在原生开发中控制HTML5视频

---

前言

有人可能会问，在如今各种前端框架和开发工具横行的年代，还用得上原生开发吗？作为一名从业18年的前端讲师，我要告诉大家学习原生开发的优点：

1. 原生开发有助于同学们从原理上认识前端知识，并在本质上学会它。
2. 原生开发有助于锻炼同学们的编程水平，提高大家对前端知识的理解。
3. 正所谓万变不离其宗，做过项目开发的人们都知道，无论用什么框架，也是要用到扎实的JavaScript功底的。
4. 以小程序开发为例，如果用户要在小程序中添加一个非常长的页面，有的时候还是需要使用来实现的，这就可能会涉及到原生页面的制作。

今天我就为大家讲一讲在原生开发过程中，标记对遇到的一些问题以及这些问题的解决方案。

---

一、video标记对的属性

下表中列出了video标记对在开发过程中常用的原生属性。

属性	含义	JS取值
src	设置视频存放的路径及文件名。	视频文件的URL地址
controls	设置是否显示视频的控制面板。	true、false
autoplay	设置是否自动播放。	true、false
loop	设置是否循环播放。	true、false
muted	设置是否默认静音播放。	true、false
volume	获取/设置视频的音量大小。	0-1
paused	获取视频是否处于暂停状态。	true、false
ended	获取视频是否处于播放结束状态。	true、false
duration	获取视频的总播放时长。	以秒为单位的时间
currentTime	获取/设置视频当前播放的时长。	以秒为单位的时间
playbackRate	获取/设置视频的播放速度。	1-正常倍速 2-两倍倍速 0.5-半倍倍速
poster	设置视频播放前的封面图地址。	封面图的URL地址
width	设置视频在页面中显示的宽度范围。	数值
height	设置视频在页面中显示的高度范围。	数值
videoWidth	返回视频的原始宽度。	数值
videoHeight	返回视频的原始高度。	数值

二、video标记对的方法

下表中列出了video标记对在开发过程中常用的原生方法。

方法	含义
play()	控制视频开始播放。
pause()	控制视频暂停播放。

三、video标记对的事件

下表中列出了video标记对在开发过程中常用的原生事件以及事件的触发机制。

事件	触发机制
play	当视频开始播放时触发该事件。
pause	当视频暂停播放时触发该事件。
ended	当视频播放结束时触发该事件。
volumechange	当视频音量发生变化时触发该事件。
ratechange	当视频播放速度发生变化时触发该事件。
timeupdate	当视频播放时间发生变化时触发该事件。
seeking	当改变视频播放进度时触发该事件。
seeked	当改变视频播放进度结束时触发该事件。

四、PC端video标记对的问题

1、视频如何自动播放

当前的浏览器都已经将视频的自动播放功能去掉了，也就是说在标记对上使用autoplay属性也无法实现视频的自动播放功能。
但是如果为标记对添加上autoplay属性的同时设置其静音播放是可以实现的。

<video src=“video/01.mp4” autoplay muted loop></video>

2、视频的全屏播放

有的视频是要在页面中实现自动全屏播放的，这类视频往往在页面一进入时就能够占据整个屏幕。目的是显示酷炫的视频效果，而不是展示声音，因此可以静音自动播放。

HTML代码如下所示：

<video src=“video/0