使用video
html
<video class="video" poster="../imgs/banner01.png" controls="controls">
<source src="../imgs/shi.mp4" type="video/mp4">
</video>
css
.video{
width: 100%;
height: 3rem;
object-fit: fill; //视频占满所在容器的大小
}
js
播放当前视频 其他视频暂停
var video = document.getElementsByTagName("video");
// 暂停函数
function pauseAll() {
var self = this;
[].forEach.call(video, function (i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause();
})
}
// 给play事件绑定暂停函数
[].forEach.call(video, function (i) {
i.addEventListener("play", pauseAll.bind(i));
})