Wenzi

视频video标签在移动端的播放总结

蚊子前端博客
发布于 2016/09/03 00:00
视频在移动端的播放有很多的限制和问题,这里我们来稍微的讲解一下

昨天新上线了一个关于腾讯 18 周年嘉年华的 html5,这个 html5 是有 5 段不同的视频组成,中间使用各种手势进行串联,欢迎大家访问。

众所周知,在移动端的视频和音频都是需要用户手动点击开启的,而使用autoplay或在 js 里写play()是没有任何作用的。还有几个常见的问题这里也提示一下:

  1. iOS 不支持preload属性,android 可能会支持,没太细测试。用户只有在点击的时候才会去加载视频;
  2. iOS 不支持autoplay属性,需手动点击开启,使用 setTimeout 延迟开启也不行;
  3. canplaythrough表示可是流畅播放了,但是在 android 下是没有卵用的; 有的 android 下是播放完成后才会触发。
  4. playing表示开始播放了,android 下无效;
  5. canplay认为是视频元素没有问题,可以运行,没有更多含义了,基本用不上,android 下一样;
  6. iOS 和 android 都支持 ended 事件,但不能在 ended 事件里启动一段音频或视频,因此不能使用ended进行视频的循环播放;
  7. 有的 iOS 版本下,会弹出一个全屏播放器来播放视频,iPad 则支持内联播放。有人说添加webkit-playsinline属性即可支持内联播放,不过我这儿并没有什么卵用。全屏播放后,会造成操作很不流畅,必须关闭视频的全屏效果,才能进行下一步的操作;
  8. 在网络不太好,或视频比较大的情况下,在点击和正式播放的空隙内会有一段等待视频加载的时间;有时候也会出现只有音频而没有画面的情况。

针对这些问题,有的是系统级的问题(比如调起全屏的播放器,循环播放视频等),我们无法修改;其他的,我们都尽量地通过程序来实现。

1. 如何获取视频的加载进度,让视频加载完成后才让用户进入? #

不能,没有任何的办法来判断视频的加载进度,而且在 iOS 中,只有视频在播放的时候,才临时去加载视频。因此,即使在 video 标签中写了preload属性也是不管用的。使用canplaythrough事件也是没法检测的,虽然 video 标签在加载的时候会触发 canplaythrough 方法,但播放时依然会有卡顿的现象,而且某些 android 还不支持次属性。

2. 播放视频时只有声音没有图像 #

有部分原因是视频的编码不正确,在 mp4 格式的视频中,只支持 h.264 的视频。我的项目中也遇到了这种情况,但不是视频编码的问题。我在自己的网络下测试时,没有这样的问题,但是在外部环境测试时就会出现黑屏、有声音没图像的情况。那么应该就是视频有点大了,然后我就把视频压缩了一下,结果还是会有这样的情况出现。

经过同事的指点,我在用户点击和视频正式播放之前添加一个 loading 效果,当视频正式播放的时候就取消 loading。如下:

function video_loading($video) {
  $(".video_loading").show();

  var timer = setInterval(function () {
    var currentTime = $video[0].currentTime; // 检测当前的播放时间

    if (currentTime > 0) {
      $(".video_loading").hide();
      clearInterval(timer);
    }
  }, 100);
}

完美解决黑屏和有声音没图像的问题。

3. 在每段视频的结尾都有向上滑、点击的操作 #

我们是无法在视频上直接进行滑动和点击等操作的,只能是在视频播放结束时,添加一个透明遮罩,让用户在遮罩上进行操作。

/**
    视频的播放时间改变时进行的操作
    videoid video标签的id
    cur 当前播放时间,可以传入ended参数
    func 回调函数
*/
videoUpdate : function(videoid, cur, func){
    var myVideo = document.getElementById(videoid);

    if( myVideo ){
        if( typeof cur =='number' ){
            myVideo.addEventListener('timeupdate', function(){
                if( this.currentTime>=cur ){
                    func();
                    myVideo.removeEventListener('timeupdate', function(){

                    }, false);
                }
            }, false);
        }else{
            myVideo.addEventListener(cur, function(){
                func();
            }, false);
        }
    }
}

使用方法:

// 第一屏的视频进行到4秒时,显示透明图层以提供用户操作
tool.videoUpdate("video1", 4, function () {
  $(".s1 .overlay").show();
});

// 第一屏的视频结束时,显示向下滑动提示按钮
tool.videoUpdate("video1", "ended", function () {
  $(".s1 .tip").show();
});

总结 #

这是第一次做移动端的视频播放 html5,在很多地方还有不足的地方,欢迎大家提出意见和建议。

标签:phonevideo
阅读(3742)
Simple Empty
No data