一个简单的移动端视频组件的实现

作者: 小a草日期: 2017-07-03

296585

一个简单的移动端视频组件的实现

据说移动端需要个视频组件，然后自己尝试了一下，不知道能不能用上，有问题希望大家提出来，(>=<)
这里还是采用了标签video的方式来实现的视频播放。
当然video存在一些问题
视频在最顶层的问题，这里需要区分不同的系统和系统版本，
ios系统
在ios8以下，video处于最顶层
在ios8以上ios10以下的iphone上视频在不播放时，不会处于最顶层，如果播放，视频就会自动全屏，处于最顶层，
在ios10以上的iphone系统上视频不播放和播放时，都不会自动全屏，并处于最顶层。
android系统
在安卓系统下，video处于最顶层，播放视频会自动全屏，但是最近发现在侥幸三星手机自带的浏览器下video在播放和不播放时都不会处于最顶层。

以上是对移动端有关video支持情况的一点了解，如果有错误或者不完整的地方，希望大家补充。

来简单的说明一下自己尝试实现的组件（主要是基于ios中较好支持video的系统版本实现）
1>创建是在初始化配置后自动创建, 所用方法

1	`create();`

2>在创建后进行一些事件的功能绑定，功能包括（播放，暂停，拖动视频进度条，视频源的切换，全屏播放控制，退出全屏等）
主要用到的事件类型

1	`onclick, ontouchstart, ontouchmove`

3>在实现时注意遇到的问题，
为了实现自定义的控制视频面板，取消默认的全屏播放，当然就要影藏video自带的默认控制面板，禁止全屏。

//采用css的方式影藏(最好添加video父元素，不然会影藏掉所有的video元素的控制条)
    <style>
        #videocom video::-webkit-media-controls-enclosure{
            display:none;
        }
    </style>
        <video webkit-playsinline playsinline></video>
 
//在播放视频前，采用的是在视频数据加载完成的情况下才能开始播放
that.selele('videoele').onloadedmetadata = function() {
    that.selele('videoele').play();
}

但是在andrioid机上点击播放后，视频正常播放的情况下，再次触摸video层会出现默认播放控制面板，所以在安卓机上不做自定义控制面板。（然而三星自带浏览器，不会出现默认的播放控制面板，为了能够保证三星自带浏览器正常观看视频，所以在video上增加了播放和暂停）

4>引用方法

<div id="main"></div>//需要创建视频组件的父容器
<script src="https://test.nie.163.com/test_cdn/test/m/zt/20170703201422/js/video_1b67226.js"></script>//引入对应的js文件
<script>
    $video.init({
            el:"main",//创建的父元素id
            btncolor:"#c9c9c9",//控制按钮的颜色
            bgcolor:"",//控制条的背景颜色
            bgprocolor:"",//进度条显示进度颜色
            autoplay:false,//开启自动播放，false不能自动播放
            loopplay:true,//true自动循环播放，false不自动循环播放
            controlsstate:{
                playbtn:true,//播放和暂停按钮显示，false不显示
                toggbtn:true,//下一个和上一个视频切换按钮显示，false不显示
                processbtn:true,//播放进度条显示，false不显示
                fullbtn:true//全屏按钮显示
            },
            //视频源地址支持mp4
            src:["http://res.nie.netease.com/r/video/20161017/3d535a71-3ef7-4f16-974c-643812e97a2d.mp4","http://res.nie.netease.com/r/video/20161017/3d535a71-3ef7-4f16-974c-643812e97a2d.mp4","http://v.crazynote.netease.com/2016/1203/01bcca1963e8ac1e1d43eb83a29a272dqt.mp4","http://v.crazynote.netease.com/2016/1203/01bcca1963e8ac1e1d43eb83a29a272dqt.mp4","http://res.nie.netease.com/r/video/20161017/3d535a71-3ef7-4f16-974c-643812e97a2d.mp4"]
        });
</script>