video標簽播放視頻 移動端不能自動播放 必須點擊后才能播放
html5 video播放完切換畫面方案
方法一
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery.min.1.8.3.js"></script>
</head>
<style>
html,body{
width:100%; height:100%;
}
</style>
<body>
//播放只能全屏
<video id="video1" style="width:100%; height:100%;object-fit: fill; display:none" src="http://mobile-show.cn/video/fromYou1.mp4" webkit-playsinline=""></video>
<script>
$(function () {
$('body').bind('click',function () {
$('#video1').css('display','block');
$('#video1')[0].play();
})
//播放完跳轉頁面 才能徹底的切換畫面
$('#video1').bind('error ended', function(){
window.location.href='http://www.baidu.com';
})
})
</script>
</body>
</html>
</pre>
方法二 最靠譜的方法(全屏播放)
<pre>
<video id="video1" style="overflow: hidden; width: 100%; width: 100%; display: none; " src="/solosea1/mp4/cai.mp4"
webkit-playsinline="true" class="video" height="100%" playsinline="true"
x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>
</pre>
這個播放完不會彈出廣告 播放完直接display:none 當然dom元素也能覆蓋 就是不能加背景因為這個只能全屏播放 直接元素蓋住他
切記不要加autoplay 加了下面事件會默認為播放處理的 其實他是不會自動播放的。。
demo如下
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery.min.1.8.3.js"></script>
</head>
<style>
html, body {
width: 100%;
height: 100%;
}
</style>
<body style="background: #FFF">
<video id="video1" style="overflow: hidden; width: 100%; width: 100%; display: none; " src="/solosea1/mp4/cai.mp4"
webkit-playsinline="true" class="video" height="100%" playsinline="true"
x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>
<script>
$(function () {
getvideoprogress();
$('body').bind('click', function () {
$('#video1').css('display', 'block');
$('#video1')[0].play();
})
var vid = document.getElementById("video1");
vid.onended = function () {
$('#video1').css('display', 'none');
alert("視頻已播放完成");
};
})
function getvideoprogress() {
setTimeout(function () {
var vid = document.getElementById("video1");
var currentTime=vid.currentTime.toFixed(1);
if(currentTime>=1.2){
//觸發
return false;
}
console.log(currentTime);
getvideoprogress();
}, 50);
}
</script>
</body>
</html>
</pre>
ps: onended="jieshuvideo()"也可以判斷有沒有結束
第三種 這種適用於不是全屏播放有進度條的
<pre>
<video src="{$yuming}/mp4/shipin.mp4" controls="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" preload="auto"></video>
</pre>
他這個可以直接display:none
第四種 最佳方法(可以全屏不全屏也沒進度條 但是性能差的手機有卡頓 )
http://newmiracle.cn/?p=2384
ps:ios自動播放 直接加在wx.ready這個里面即可