h5安卓手机播放完以后有广告

常见问题和解决方案：

1、添加自动播放属性，无法正常播放视频。

解决方案：

需要在标签中添加属性=""但是设置之后，它规定视频的音频输出时应该被静音。

2、在一些安卓浏览器播放视频的时候，不能在H5页面播放视频，系统会自动接管视频。

解决方案：

添加内联播放属性；

如果需要在H5页面内播放视频，需要在标签加上-playsinline，在一些ios上还需要加上playsinline。

可以同时加上这两个属性：

videomutedsrc=""autoplaywebkit-playsinlineplaysinline/video

有些app还需要支持内联播放的模式，这时候需要加上：

webview.allowsInlineMediaPlayback=YES;

3、可能是视频被接管的原因，移动端播放视频有时候无法直接播放或有卡顿的现象。

解决方案：

启用H5内核H5播放器;

在video标签中添加启动H5播放的属性：x5-video-player-type="h5"

如：videomutedsrc=""autoplayloopx5-video-player-type="h5"/video

4、video无法铺满整个屏幕

解决方案：

video标签加上style="width=100%;height=100%;object-fit:fill"；

5、移动端①播放时，点击暂停并出现蒙层；②暂停时，点击播放并且蒙层消失；

①创建一个蒙层的div，使用video的方法：播放play()、暂停pause()；

②使用事件委托也是可以实现的；

蒙层制作可以参考fixed布局应用场景-遮罩层

参考思路和代码（样式不写啦）：

!--video--divclass="video-wrap"videoid="video"class="myVideo"src=""poster=""width="100%"height="100%"object-fit:fillwebkit-playsinlineplaysinlinex5-video-player-type="h5"x5-video-orientation="portraint"YourbrowserdoesnotsupportHTML5video./video/div!--like_icon--divclass="likeIcon-wrap"divclass="like-icon"data-key="on"/divdivclass="like-num"/div/div!--mask--divclass="video-mask"/div!--pause_icon--divclass="video-pause"/div$(document).ready(function(){//videoplay$('.video-mask').on('click',function(){maskCancel();$('#video').get(0).play();//play不是jQuery函数，而是DOM函数，需要通过DOM来调用play})//videopause$('.video-wrap').on('click',function(){$('#video').get(0).pause();maskShow();})//监听视频播放，结束时出现暂停按钮和蒙层$('#video').on('ended',function(){maskShow();})})varvideo_mask=$(".video-mask"),video_pause=$(".video-pause"),video=$("#video");//video-mask/video-pauseshowfunctionmaskShow(){video_mask.css('display','block');video_pause.css('display','block');}//video-mask/video-pausecancelfunctionmaskCancel(){video_mask.css('display','none');video_pause.css('display','none');}

6、监听视频是否结束

主要用到的是监听的ended事件；

//js写法varvideo=document.getElementById("vih5安卓手机播放完以后有广告deo");video.addEventListener('ended',function(){console.log('playover!');;},false);//jQuery写法$('#video').on('ended',function(){console.log('playover!');})

注意：addEventListener是js的监听事件，如果在jQuery中这样使用是会出错的，在jQuery中监听可以使用on。

7、关于jQuery使用H5视频播放事件play()、暂停事件pause()出错问题：

在js中使用document.getElementById(‘video’).play();是可以的；

但是在jQuery中使用$('#video').play()就是错误的。

原因：H5的play()/pause()都不是jQuery函数，而是DOM函数，如果jQuery要使用play()/pause(),需要通过DOM来调用play()/pause()

如：$('#video').get(0).play()

8、关于H5中的自定义属性

H5标准规定，自定义的属性都以data-*开头,这样区分了固有属性和自定义属性，我们可以通过原生js的getAttribute()和jQuery中的attr()来获取我们自定义的属性。如：divdata-name="test"leaf/div

总之，在这过程中遇到了很多问题，有些还没想起来，等想起来再去完善记录吧，这边简单记录一下。如果文章对你有用就点个小心心鼓励一下吧。

著作权归作者所有,转载或内容合作请联系作者

标签：h5安卓手机播放完以后有广告