video参数
<!-- autoplay:自动播放 -->
<!-- poster:占位图片,默认视频第一帧图像 -->
<!-- controls:控制条 -->
<!-- loop:循环播放
preload:预加载,和autoplay相冲。二选一
meted:静音
height|width:高宽设置(只设置一个值就好,设置两个达不到想要的效果,除非刚 好与视频等比例。
js可以直接操作的几个方法
// load :加载
// play : 播放
// paus :暂停
// webkitRequestFullScreen:全屏
//视频播放的当前进度
console.log(videL.currentTime);
//视频的总时长(单位是秒,需要在视频加载完成以后调用,否则返回NaN)
console.log(videL.duration);
//视频的播放状态 (返回布尔值,true代表未播放,false代表正在播放;
console.log(videL.paused);
常用的几个事件
//oncanplay : 当用户可以开始播放时触发
videL.oncanplay = function () {
alert(' 客官,可以开始播放了');
}
//ontimeupdate:报告当前播放的进度。(注意,需要写开始以及终止条件,否则会一直弹出)
videL.ontimeupdate = function () {
alert(' 客官,你现在播放进度为xxx秒');
}
//onended:当视频播放完毕时弹出
videL.onended = function () {
alert('客官,你已经看完了');
}
控制开始或暂停
<body>
<video src="./74ed42e4ebde8d704f25c2ff543f17cd.mp4" autoplay controls height="200px" id="videL"></video>
<button id="button">暂停/开始</button>
<script>
var videL = document.getElementById('videL');
var button = document.getElementById('button');
button.onclick = function () {
if (videL.paused) {
videL.play();
} else {
videL.pause();
}
}
</script>
</body>