h5video视频的无缝切换类似爱奇艺附源码下载
日期：2020-07-30
来源：程序思维浏览：2564次
h5video视频的无缝切换在网上找了好多方法都不知所以然，试了很多方法都无法做到中间不闪烁无缝切换，最终自己想到了一个方案。
原理是先将video标签overflow: hidden;（不能使用display:none;会被禁止预载播放），让第二个视频play()后在canplay事件里暂停自身，然后播放第一个视频，第一个视频播放结束事件ended里执行第二个视频的播放，以此做到无缝切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>video视频的无缝切换</title>
<style type="text/css">
/*视频*/
#video_box{position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;}
#video_box video{
display: block; margin: 0 auto; width: 100%;height: 100%; /*object-fit:fill;*/
position: absolute;left: 0;top: 0;visibility: hidden;
}
</style>
</head>
<body>
<div id="video_box">
<video id="vplayer_start" muted controls src="video/1.mp4" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"></video>
<video id="vplayer" muted controls src="video/4.mp4" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill;"></video>
</div>
<script>
var startPlay=true;
var vplayer_start = document.getElementById('vplayer_start');
var vplayer = document.getElementById('vplayer'),
video_box = document.getElementById('video_box');
vplayer_start.pause();
vplayer.play();
// 播放结束
vplayer_start.addEventListener("ended",function(e){
vplayer.style.visibility = "visible";
vplayer.play();
e.target.style.display = "none";
});
//循环播放第二个视频
vplayer.addEventListener("ended",function(e){
e.target.play();
});
vplayer.addEventListener('canplay', function(e){
if(startPlay){
e.target.pause();
vplayer_start.style.visibility = "visible";
vplayer_start.play();
startPlay=false;
}
})
</script>
</body>
</html>
h5video视频的无缝切换源码下载：链接:https://pan.baidu.com/s/1VgsFbR0ss3ZzvmDiuJ2Flg 密码:zo24
原理是先将video标签overflow: hidden;（不能使用display:none;会被禁止预载播放），让第二个视频play()后在canplay事件里暂停自身，然后播放第一个视频，第一个视频播放结束事件ended里执行第二个视频的播放，以此做到无缝切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>video视频的无缝切换</title>
<style type="text/css">
/*视频*/
#video_box{position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;}
#video_box video{
display: block; margin: 0 auto; width: 100%;height: 100%; /*object-fit:fill;*/
position: absolute;left: 0;top: 0;visibility: hidden;
}
</style>
</head>
<body>
<div id="video_box">
<video id="vplayer_start" muted controls src="video/1.mp4" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"></video>
<video id="vplayer" muted controls src="video/4.mp4" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill;"></video>
</div>
<script>
var startPlay=true;
var vplayer_start = document.getElementById('vplayer_start');
var vplayer = document.getElementById('vplayer'),
video_box = document.getElementById('video_box');
vplayer_start.pause();
vplayer.play();
// 播放结束
vplayer_start.addEventListener("ended",function(e){
vplayer.style.visibility = "visible";
vplayer.play();
e.target.style.display = "none";
});
//循环播放第二个视频
vplayer.addEventListener("ended",function(e){
e.target.play();
});
vplayer.addEventListener('canplay', function(e){
if(startPlay){
e.target.pause();
vplayer_start.style.visibility = "visible";
vplayer_start.play();
startPlay=false;
}
})
</script>
</body>
</html>
h5video视频的无缝切换源码下载：链接:https://pan.baidu.com/s/1VgsFbR0ss3ZzvmDiuJ2Flg 密码:zo24
- 上一篇：js如何操作伪类元素before，after
- 下一篇：h5video有声自动播放
精品好课
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...