美文网首页H5
关于H5 video在移动端播放问题

关于H5 video在移动端播放问题

作者: 前端葱叶 | 来源:发表于2019-01-30 11:04 被阅读346次

常见问题和解决方案:

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>

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

相关文章

网友评论

    本文标题:关于H5 video在移动端播放问题

    本文链接:https://www.haomeiwen.com/subject/pmvtsqtx.html