微信视频全屏播放--测试

最新推荐文章于 2019-03-15 15:26:31 发布

打杂人

最新推荐文章于 2019-03-15 15:26:31 发布

阅读量714

点赞数

Web 前端乱炖专栏收录该内容

341 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style>
*{margin:0;padding: 0}
html,body,video{width: 100%;height: 100%; position: relative;overflow: hidden;}
video{ object-fit: cover;}
div,#endBtn,#exitBtn{ position: absolute; width: 60px;height: 60px; left: 50%;top: 50%; margin-left: -50px;margin-top: -50px; background: red;z-index: 100;color: #fff;text-align: center;font-size: 14px; line-height: 60px;border:none;
transition: all 1s ease;-webkit-transition: all 1s ease;
}
div.move{
transform: translate3d(0,-688px,0);
-webkit-transform: translate3d(0,-688px,0);
}
#endBtn,#exitBtn{
transition: all 1s ease;-webkit-transition: all 1s ease;
transform: translate3d(0,688px,0);
-webkit-transform: translate3d(0,688px,0);
}
#endBtn.move,#exitBtn.move{
transform: translate3d(0,0px,0);
-webkit-transform: translate3d(0,0,0);
}
#endBtn{left:45%;}
#exitBtn{left:55%;}
</style>
<body>
<div id="div">点击播放</div>
<video id="video" src="http://itakeo.com/down/video/mp4.mp4" poster="http://itakeo.com/down/video/poster.jpg" muted x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5" ></video>
<button id="endBtn">再次播放</button>
<button id="exitBtn">退出播放</button>
</body>

<script>

//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
document.getElementById('video').play();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
// document.addEventListener("WeixinJSBridgeReady", function () {
// document.getElementById('video').play();
// }, false);

document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
// document.getElementById('video').play();
WeixinJSBridge.call('hideOptionMenu');
});

// document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// WeixinJSBridge.call('hideToolbar');
// WeixinJSBridge.call('hideOptionMenu');
// });

div.ontouchend = div.onclick = function(){
this.classList.add('move')
video.play()
}
endBtn.ontouchend = endBtn.onclick = function(){
this.classList.remove('move')
video.play()
}
exitBtn.ontouchend = exitBtn.onclick = function(){
// this.classList.remove('move')
// video.play()
//close window
WeixinJSBridge.call('closeWindow');
//hidden toolbar
// WeixinJSBridge.call('hideToolbar');
//hide menu
// WeixinJSBridge.call('hideOptionMenu');
//location.href = "http://www.luxi.ren";
}
video.addEventListener('ended',function(){
endBtn.classList.add('move')
})
video.addEventListener('ended',function(){
exitBtn.classList.add('move')
})
</script>
</html>