微信H5視訊全屏播放demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection"content="telephone=no">
<title>今天是個好日子</title>
<style>
*{ padding: 0;
margin:0;
}
#frist{
position: absolute;
width: 100%;
height: 100%;
background-image: url(1.png);
background-size: 100% 100%;
background-position: top;
overflow: hidden;
}
#video_box{
position: absolute;
width: 100%;
height: 100%;
background-image: url(1.png);
background-size: 100% 100%;
background-position: top;
overflow: hidden;
display: none;
}
#video_all{
position: absolute;
width: 90%;
top: 0;
left: 5%;
object-fit: fill;
background-size: cover;
overflow: hidden;
}
#btn,#againbtn{
width: 260px;height: 60px;
position: absolute;
top: 90%;
left:25%;
margin-top: -130px;
margin-left: -30px;
background-size: 100% 100%;
background-image: url(button.png);
background-size: 100% 100%;
}
#video_end{
position: absolute;
background-color: pink;
display: none;
background-size: 100% 100%;
background-image: url(last.jpg);
background-repeat: no-repeat;
background-position: top;
}
</style>
</head>
<body>
<!-- 最開始是暫停介面，手動控制視訊的播放 -->
<div id="frist"></div>
<!-- 視訊播放區 -->
<div id="video_box">
<video
id="video_all"
src="hello.mp4"
poster="1.png"
autoplay="false"
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="video_all"
src="hello.mp4"
poster="1.png" /*視訊封面*/
autoplay="false"
webkit-playsinline="true" /*這個屬性是ios 10中設定可以讓視訊在小窗內播放,也就是不是全屏播放*/
playsinline="true" /*IOS微信瀏覽器支援小窗內播放*/
x-webkit-airplay="allow"
x5-video-player-type="h5" /*啟用H5播放器,是wechat安卓版特性*/
x5-video-player-fullscreen="true" /*全屏設定,設定為 true 是防止橫屏*/
x5-video-orientation="portraint"/*播放器支付的方向,landscape橫屏,portraint豎屏,預設值為豎屏*/
style="object-fit:fill">
</video> -->
</div>
<!-- 視訊播放按鈕 -->
<div id="btn" onclick="playcontr()"></div>
<!-- 視訊播放結束 -->
<div id="video_end"></div>
<script>
var video_all = document.getElementById('video_all'),
video_box = document.getElementById('video_box'),
btn = document.getElementById('btn'),
video_end = document.getElementById('video_end');
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
video_all.pause();
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
function stylediv(divId){divId.style.width = clientWidth + 'px';
divId.style.height = clientHeight + 'px';
}
function playcontr(){
if (isAndroid) {
video_all.style.width = '100%';
video_all.style.left = '0';
}
video_box.style.display = "block";
video_all.play();
btn.style.display = "none";
video_end.style.display = "none";
};
// stylediv(video_box);
stylediv(video_end);
// 適配判斷
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
// 暫停播放
video_all.addEventListener('pause',function(){
video_all.style.width = clientWidth + 'px';
btn.style.display = "block";
})
// 播放結束
video_all.addEventListener("ended",function(){
video_all.pause();
video_end.style.display = "block";
video_box.style.display = "none";
});
</script>
</body>
</html>