常见问题和解决方案:
1、video添加自动播放属性autoplay,无法正常播放视频。
解决方案:
需要在video标签中添加muted属性
<video muted src="" autoplay loop></video>
但是设置muted之后,它规定视频的音频输出时应该被 静音
。
2、在一些安卓浏览器播放视频的时候,不能在H5页面播放视频,系统会自动接管视频。
解决方案:
添加内联播放属性;
如果需要在H5页面内播放视频,需要在video标签加上webkit-playsinline
,在一些ios上还需要加上playsinline
。
可以同时加上这两个属性:
<video muted src="" autoplay webkit-playsinline playsinline ></video>
有些app还需要支持内联播放的模式,这时候需要加上:
webview.allowsInlineMediaPlayback = YES;
3、可能是视频被接管的原因,移动端播放视频有时候无法直接播放或有卡顿的现象。
解决方案:
启用H5内核H5播放器;
在video标签中添加启动H5播放的属性:x5-video-player-type="h5"
如:<video muted src="" autoplay loop x5-video-player-type="h5"></video>
4、video无法铺满整个屏幕
解决方案:
video标签加上
style="width= 100%; height=100%; object-fit: fill"
;
5、移动端①播放时,点击暂停并出现蒙层;②暂停时,点击播放并且蒙层消失;
①创建一个蒙层的div,使用video的方法:播放play()、暂停pause();
②使用事件委托也是可以实现的;
蒙层制作可以参考fixed布局应用场景-遮罩层
参考思路和代码(样式不写啦):
<!-- video -->
<div class="video-wrap">
<video id="video" class="myVideo" src="" poster="" width="100%" height="100%" object-fit:fill
webkit-playsinline playsinline x5-video-player-type="h5" x5-video-orientation="portraint">
Your browser does not support HTML5 video.
</video>
</div>
<!-- like_icon -->
<div class="likeIcon-wrap">
<div class="like-icon" data-key="on"></div>
<div class="like-num"></div>
</div>
<!-- mask -->
<div class="video-mask"></div>
<!-- pause_icon -->
<div class="video-pause"></div>
$(document).ready(function () {
// video play
$('.video-mask').on('click', function () {
maskCancel();
$('#video').get(0).play(); //play不是jQuery函数,而是DOM函数,需要通过DOM来调用play
})
// video pause
$('.video-wrap').on('click', function () {
$('#video').get(0).pause();
maskShow();
})
// 监听视频播放,结束时出现暂停按钮和蒙层
$('#video').on('ended', function () {
maskShow();
})
})
var video_mask = $(".video-mask"),
video_pause = $(".video-pause"),
video = $("#video");
//video-mask/video-pause show
function maskShow() {
video_mask.css('display', 'block');
video_pause.css('display', 'block');
}
//video-mask/video-pause cancel
function maskCancel() {
video_mask.css('display', 'none');
video_pause.css('display', 'none');
}
6、监听视频是否结束
主要用到的是 监听的 ended事件;
//js写法
var video=document.getElementById("video");
video.addEventListener('ended', function () {
console.log('play over!');;
}, false);
//jQuery写法
$('#video').on('ended',function(){
console.log('play over!');
})
注意: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()
来获取我们自定义的属性。如:<div data-name="test">leaf</div>
总之,在这过程中遇到了很多问题,有些还没想起来,等想起来再去完善记录吧,这边简单记录一下。如果文章对你有用就点个小心心鼓励一下吧。
网友评论