您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

微信浏览器video标签播放bug解决方案(安卓)

发布时间：2017-04-10 13:45:02编辑：雪饮阅读（）

 css: 

video{object-fit: fill;}
.videos{
position:relative;
}
.poster{
width:100%;
position:absolute;
left:0px;
top:0px;;
}
Js:
 
var video_w=0;
var video_H=0;
 
var video_flag="";
var video_obj="";
function videoClass(){
var videos=document.getElementsByClassName("videos");
video_w=videos[0].clientWidth;
video_H=videos[0].clientHeight;
console.log(video_w);
for(var i=0;i<videos.length;i++){
console.log(videos[i].childNodes);
for(var x=0;x<videos[i].childNodes.length;x++){
if(videos[i].childNodes[x].nodeName=="VIDEO"){
videos[i].childNodes[x].addEventListener("x5videoenterfullscreen",function(e){
//监听全屏事件，为真正全屏做准备
console.log("进入全屏了");
console.log(e);
video_flag="yes";
video_obj=e.target;
});
videos[i].childNodes[x].addEventListener("x5videoexitfullscreen",function(e){
//监听退出全屏事件
console.log("退出全屏事件");
console.log(e);
console.log(e.target);
 
video_flag="no";
video_obj=e.target;
video_obj.style="width:"+video_w+"px;height:"+video_H+"px;";
console.log("退出全屏后属性");
console.log(e.target.parentNode.childNodes);
video_obj.setAttribute("x5nativepanel","freewififorvideo_fromvideoelment");
});
}
}
}
console.log(videos);
}
 
function videoPlay(obj){
console.log("点击");
console.log(obj.parentNode.childNodes);
obj.play();
}
 
window.onresize=function(){
if(video_flag=="yes"){
//真正全屏
video_obj.style.width=window.innerWidth+"px";
video_obj.style.height=window.innerHeight+"px";
}
 
 
}
 
 
 
<div class="videos">
{if count($item["say_videos"])>0}
 {loop $item["say_videos"] $say_video_k $say_video_v}
<video src="{$say_video_v}" id="videoP{$item['id']}" style="width:100%;" x5-video-player-type="h5" x5-video-player-fullscreen='true' ></video>
<img src="{$item['sayVideoPoter']}" class="poster" onclick="videoPlay(videoP{$item['id']});" />
 {/loop}
{/if}
 </div>