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

摘要：在每段视频的结尾都有向上滑点击的操作我们是无法在视频上直接进行滑动和点击等操作的，只能是在视频播放结束时，添加一个透明遮罩，让用户在遮罩上进行操作。

文章地址： http://www.xiabingbao.com/video/2016/09/03/phone-video.html

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

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

iOS不支持preload属性，android可能会支持，没太细测试。用户只有在点击的时候才会去加载视频；

iOS不支持autoplay属性，需手动点击开启，使用setTimeout延迟开启也不行；

canplaythrough表示可是流畅播放了，但是在android下是没有卵用的； 有的android下是播放完成后才会触发。

playing表示开始播放了，android下无效；

canplay认为是视频元素没有问题，可以运行，没有更多含义了，基本用不上，android下一样；

iOS和android都支持ended事件，但不能在ended事件里启动一段音频或视频，因此不能使用ended进行视频的循环播放；

有的iOS版本下，会弹出一个全屏播放器来播放视频，iPad则支持内联播放。有人说添加webkit-playsinline属性即可支持内联播放，不过我这儿并没有什么卵用。全屏播放后，会造成操作很不流畅，必须关闭视频的全屏效果，才能进行下一步的操作；

在网络不太好，或视频比较大的情况下，在点击和正式播放的空隙内会有一段等待视频加载的时间；有时候也会出现只有音频而没有画面的情况。

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

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

有部分原因是视频的编码不正确，在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)
    }

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

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

    /**
        视频的播放时间改变时进行的操作
        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，在很多地方还有不足的地方，欢迎大家提出意见和建议。

文章地址： http://www.xiabingbao.com/video/2016/09/03/phone-video.html