功能:在网页加载好之后,自动播放页面中的视频
HTML如下:
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls"></video>
bug: 在video标签内定义的属性autoplay,在ios或者android内的微信浏览器是不生效的
ios系统下的效果图:从图中可以看出视频没有自动播放,而且整个video显示的是一片空白,简直让人无法忍受。
android系统下的效果图:从图中可以看出视频没有自动播放,但video显示的是一片黑色的背景,这个勉强还能接受
1、解决ios系统下,video显示一片空白的bug
方法:可以给video加一个background-imag,即可解决页面加载完成显示空白的问题,但是android显示的还是黑色背景
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);"></video>
ios系统下显示的效果:可以看到,给video加上背景图片,显示的就是背景图,而不是空白内容了
android系统下显示的效果:给video加上背景图没用,显示的还是黑色背景
2、解决ios系统下,视频不能自动播放的问题
利用微信的JSAPI 的WeiixinJSBridgeReady()
html如下:
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);"></video>
在html中引入jweixin.js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
部分js如下:(先引入jquery)
//这样的写法在android 和ios下都不能生效
$('#shakeVideo').play();
//必须在weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener('WeixinJSBridgeReady',function(){
$('#shakeVideo').play();
},false);
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);" webkit-playsinline playsinline></video>
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);" webkit-playsinline playsinline x5-video-player-type='h5' x5-video-player-fullscreen='true'></video>
<canvas id='myCanvas'></canvas>
video{
display:none;
}
//获取video对象
var videoO = $('#shakeVideo');
//获取画布
var canvasO = $('#myCanvas');
//设置画布
var canvasO2D = canvasO.getContext('2d');
//设置setInterval定时器
var timer = null;
//监听播放
videoO.addEventListener('play',function(){
timer = setInterval(function(){
canvasO .drawImage(videoO,0,0,640,320);
},20);
},false);
//监听暂停
videoO.addEventListener('pause',function(){
clearInterval(timer);
},false);
//监听结束
videoO.addEventListener('ended',function(){
clearInterval(timer);
},false);
<!--html代码如下-->
<!--在html中引入jweixin.js-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);" webkit-playsinline playsinline x5-video-player-type='h5' x5-video-player-fullscreen='true'></video>
<canvas id='myCanvas'></canvas>
/*css*/
video{
display:none;
}
//js代码如下
//这样的写法在android 和ios下都不能生效
$('#shakeVideo').play();
//必须在weixin JSAPI的WeixinJSBridgeReady才能生效,该方法对ios生效,对部分android生效,实现页面加载完自动播放功能
document.addEventListener('WeixinJSBridgeReady',function(){
$('#shakeVideo').play();
},false);
//以下方法针对android,解决全屏播放的问题
//获取video对象
var videoO = $('#shakeVideo');
//获取画布
var canvasO = $('#myCanvas');
//设置画布
var canvasO2D = canvasO.getContext('2d');
//设置setInterval定时器
var timer = null;
//监听播放
videoO.addEventListener('play',function(){
timer = setInterval(function(){
canvasO .drawImage(videoO,0,0,640,320);
},20);
},false);
//监听暂停
videoO.addEventListener('pause',function(){
clearInterval(timer);
},false);
//监听结束
videoO.addEventListener('ended',function(){
clearInterval(timer);
},false);