indent

微信h5插入视频的一些坑

安卓下微信h5中的video同层播放:
x5-video-player-type=’h5’ 安卓下开启同层播放(ios本来就支持同层播放的)
x5-video-player-fullscreen=’true’ //安卓下设置此属性后 可以通过窗口变动事件来设置视频尺寸 设置视频尺寸后会等比缩放 超出屏幕后会自动裁切
style=’object-position:0 0;’ 安卓下设置视频播放后 左上角的位置

ios下 onclick事件来调用视频的play() 无效;需要用 ontouchstart事件来调用play();

安卓播放完视频后 需要在去播放一个音频文件来回到页面

ios在设置视频层的display:block后 再去play() 视频无法播放,需要改成fadeIn(0,function(){video.play()})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- x5-video-player-type='h5' x5-video-player-fullscreen='false' style='object-position:0 0;' x5-video-player-fullscreen='false' -->
<div class="videoBox">
<video id="video" src="1.mp4" webkit-playsinline="true" playsinline="true" preload="auto" x5-video-player-type='h5' x5-video-player-fullscreen='true' style='object-position:0 0;'></video>
</div>
<div style='position:absolute;left:0;top:0;width:100px;height:100px;background:#900;opacity:0.5;'></div>
<script>
window.onload=function(){
var box = $('.videoBox');
var mp4 = document.getElementById('video');
window.onresize = function(){
//mp4.style.width = window.innerWidth*.5 + 'px'
//mp4.style.height = window.innerHeight*.5 + 'px'
mp4.style.width = 300 + 'px'
//mp4.style.height =800 + 'px'
}
document.documentElement.ontouchstart = function(){
mp4.play();
}
mp4.addEventListener('ended',function(){
//mp4.pause();
//box.fadeOut(0);
//box.remove();
//var music_alert = new Audio('bj.mp3');
//music_alert.play();
},false);
}
</script>

849890769@qq.com

Proudly published with Hexo