Headline: HTML5视频播放完成屏幕程序

顺晟科技

2021-09-08 11:41:25

173

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:; height:;
}

</style>
<body>

//播放只能全屏
<video id="video1" style="width:; height:;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: ; width: ; display: none; " src="/solosea1/mp4/cai.mp4"
webkit-playsinline="true" class="video" height="" 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: ;
height: ;
}

</style>
<body style="background: #FFF">

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("视频已播放完成");
};

})

</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这个里面即可

上一篇：切换:在HTML页面中插入视频的各种下一篇：如何让转换后的视频支持HTML5在线

网站建设

Html

Headline: HTML5视频播放完成屏幕程序