标签的布置
<video src="1.mp4" poster="1.jpg" id="vid" controls>
你的浏览器不支持该视频播放
</video>
标签的属性配置
autoplay => 自动播放
controls => 是否显示控件
width => 播放器的宽度
height => 播放器的高度
loop => 是否循环播放
muted => 是否静音播放
poster => 视频封面
src => 播放源
preload => 页面加载时进行加载 , 如果有autoplay那么该属性就会被无视
标签的js接口
play() => 播放
pause() => 暂停
currentTime => 当前播放的位置(s)
duration => 长度(s)
volume => 音量
muted => 静音(boolean)
事件
timeupdate => 根据播放时间变化而触发的事件
注意:该事件只能用addEventListener来定义
let ovideo = document.getElementById('vid');
ovideo.addEventListener('timeupdate', function () {
console.log(`当前的时间点是${ovideo.currentTime},视频长度是${ovideo.duration}`);
}, false)全屏
因为不同浏览器之间的兼容性不同,那么全屏的方法也是不一样的,兼容性写法如下
let fullScreen = elem => {
let ele = elem;
if (document.requestFullscreen) {
ele.requestFullscreen(); //w3c标签
} else if (document.mozRequestFullScreen) {
ele.mozRequestFullScreen(); //FireFox
} else if (document.webkitRequestFullScreen) {
ele.webkitRequestFullScreen(); //Chrome等
} else if (document.msRequestFullscreen) {
ele.msRequestFullscreen(); //IE11
}
};退出全屏
退出全屏的方法也是不一样的,兼容性写法如下
let exitFullScreen = elem => {
let ele = elem;
if (document.exitFullscreen) {
ele.exitFullscreen(); //w3c标签
} else if (document.mozCancelFullScreen) {
ele.mozCancelFullScreen(); //FireFox
} else if (document.webkitCancelFullScreen) {
ele.webkitCancelFullScreen(); //Chrome等
} else if (document.msExitFullscreen) {
ele.msExitFullscreen(); //IE11
}
};