video标签知多少

视频对于现在的web来说已经见怪不怪了，如何在web上播放视频呢？有请我们今天的主角video标签。

用法

html 复制代码

<video controls>
    <source type="video/mp4" src="url of mp4 video">
    您的当前设备不支持video标签
</video>

默认效果如下：

支持的内容情况

我们都知道视频格式有很多，但是很不幸，目前video标签只支持3种视频格式，分别是"mp4"、"webm"、"ogg"。

video标签常用属性介绍

属性	描述
autoplay	控制视频是否自动播放
controls	控制视频是否显示控件
height	控制视频播放器的高度
width	控制视频播放器的宽度
loop	控制视频是否循环播放

source标签常用属性介绍

属性	描述
src	视频的地址
type	视频的类型。可选值："video/mp4"、"video/ogg"、"video/webm"

设置播放器的样式

自己准备一个mp4类型的视频，然后将它嵌入到我们的video标签里，同时给标签设置样式如下：

css 复制代码

video {
    margin-top: 100px;
    margin-left: 500px;
    width: 500px;
}

html 复制代码

<video controls>
    <source src="视频地址" type="video/mp4">
</video>

如果不出意外的话，目前是下面这样的：

但是如果我们同时设置了高度，高度800px或者100px，或者是不成比例的设置，那么就会出现不协调的现象，比如下面：

出现这种不协调的问题其实很好解释，因为视频本身也是由很多张图片组成的嘛。当我们给图片设置"怪异比例"的时候，图片可能会出现压缩、伸长、或者大片的黑色部分。

如何让视频内容占满指定的宽度和高度呢？

我们一般是给video标签外套一个div元素，然后同时给video标签的宽度和高度都设置100%，并且将object-fit属性值设置为"fill"。

html 复制代码

<style>
    div {
        width: 500px;
        height: 600px;
    }
    video {
        height: 100%;
        width: 100%;
        object-fit: fill;
    }
</style>
<div>
    <video controls>
        <source type="video/mp4" src="...">
    </video>
</div>

我们再来看一下，视频设置前后的样式对比：

设置前的样式如下：

设置后的样式如下：

我们可以看到，视频内容现在是占满宽高了，但此时的问题也明显了，视频变形了。

video标签常用事件介绍

属性	描述
loadstart	当浏览器开始查找视频时触发
durationchange	当视频的时长已更改时触发
loadedmetadata	当浏览器已加载视频的元数据时触发。元数据是指：视频的时长+视频的尺寸+文本轨道
loadeddata	当浏览器已加载视频的当前帧时触发
progress	当浏览器正在下载视频时触发
canplay	当浏览器可以开始播放视频时触发
waiting	当视频由于需要缓冲下一帧而停止时触发

video标签常用方法介绍

重新加载视频

html 复制代码

<video controls>
    <source type="" src="...">
</video>

<script>
    setTimeout(function(){
        document.querySelector('video').load();
    }, 3000);
</script>

播放视频

html 复制代码

<video controls>
    <source type="" src="...">
</video>

<script>
    setTimeout(function(){
        document.querySelector('video').play();
    }, 3000);
</script>

视频暂停播放

html 复制代码

<video controls>
    <source type="" src="...">
</video>

<script>
    setTimeout(function(){
        // 开启播放
        document.querySelector('video').play();
    }, 2000);
    
    setTimeout(function(){
        // 暂停播放
        document.querySelector('video').pause();
    }, 3000);
</script>

视频进入全屏模式

我们可以通过 FullScreen API来完成这个功能。对video标签使用这些方法有几点需要注意：

当video标签加载完毕后，才可以调用 FullScreen API。
FullScreen API 存在兼容性问题，需要在前面加上各自浏览器内核的前缀。
想要实现video标签放大的功能有下面几种方式：

1、使用原生的API。requestFullscreen（非ios可用）、webkitEnterFullScreen（ios可用）。这里需要动态判断你的设备支持哪种API。

2、使用 css+js 来完成假全屏。

html 复制代码

<video controls>
    <source type="" src="...">
</video>

<button>视频放大</button>

<script>
    function videoLarge(){
        let video = document.querySelector('video');
        if (video.requestFullscreen){
            // 非ios
            video.requestFullscreen();
        } else if (video.webkitEnterFullScreen){
            // ios
            video.webkitEnterFullScreen();
        }
    }
</script>