移动端视频适配

移动端视频适配

---

gitHub地址

插件实现的功能

• 解决播放视频时不一样设备的卡顿问题
• 同层播放器功能
• 非全屏播放，可操做菜单栏
• 安卓苹果可自动播放视频

背景：

• 默认状况下使用同层播放器时，安卓会全屏播放（页面通常不流畅，体验很差），而IOS不会全屏播放。
• 微信浏览器安卓没法自动播放视频

---

如何使用：

<script src="./lib/jsmpeg.min.js"></script>
<script src="./lib/video.js"></script>
<script>
   window.onload = function () {
        window.videoName = new Video("./lib/index.mp4",{});
        var videoBox = document.getElementById("videoBox")
        videoBox.append(videoName.domElement)
        document.getElementById("btnPlay").addEventListener("click", function () {
            videoName.play();
            videoBox.style.display = "block";
        }, false)
    }
</script>

须要提供2个视频文件，分别为.mp4和.ts。（使用ffmpeg转换（下文提供教程）或是让设计师提供 ） 2个文件放在同个目录下，传入视频路径时，只需传入.mp4的路径，如上实例。

---

详解：

安卓机采用jsmpeg建立视频，在文档中插入canvas标签；IOS使用原生方法建立视频，在文档中插入video标签；所以下方提供了集成的方法，安卓机和IOS机能够同时调用。若是提供的集成方法不能知足需求，安卓机须要查阅jsmpeg，IOS能够使用原生方法。

var videoName = new Video("index.mp4",option)

• 配置参数option: { totalTime: number//视频总时长，必须，不然安卓机监听结束事件 loop:boolean,//是否循环.默认为false，可选 autoplay:boolean,//是否自动播放，默认为false，可选 id:string,//视频节点的id选择器 }
• videoName.domElement //dom节点，用于插入到文档中
• videoName.video //video对象，ios可直接使用原生对象的属性和方法；安卓机使用了jsmpeg的属性和方法，须要参阅https://github.com/phoboslab/jsmpeg 。

---

集成的方法：

方法名	做用
load	重载视频
play	播放视频
pause	暂停视频
stop	中止视频
destroy	销毁视频
getMuted	获取音量
setMuted	设置音量
getCurrentTime	获取当前播放位置
setCurrentTime	设置当前播放位置
getPlayStatus	获取播放状态
addEventListener	增长监听事件，接受一个事件名和回调做为参数
removeEventListener	销毁监听事件

---

TIP：

• 问题：视频没法自动播放 解决方法：若是视频播放方法是在异步回调里面调用，则必须在异步开始前调用videoName.load()方法；