标签：elf 宽度 event 兼容 als console bool tca duration
标签的布置
<video src="1.mp4" poster="1.jpg" id="vid" controls>
你的浏览器不支持该视频播放 </video>
标签的属性配置
autoplay => 自动播放
controls => 是否显示控件
width => 播放器的宽度
height => 播放器的高度
loog => 是否循环播放
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 } };
标签：elf 宽度 event 兼容 als console bool tca duration
原文地址：https://www.cnblogs.com/rickyctbu/p/9651934.html
