上个接到一个新的需求，要求视频的80%以前用户不能拖动，当时也没想那么多，直接使用video标签给整上了，结果可想而知。在ios全屏播放的时候会出现ios自带的视频控制单元，这个用户可以随意的拖动，在X5内核的app中会出把原生的拦截掉，出现的是腾讯自己封装的一些东西。太恶心了吧。产品也在抱怨这是什么东西啊，你是不是专业的啊。这话虽热难听，但是也有那么一点道理，我是不是专业的啊，这都搞不好。我不是很服气啊，然后自己封装了一套，发现还可以，但是有没有可以使用的插件呢？
然后我找到了videojs，说实话大部分功能是可以实现的，但是全屏以后再ios中就会遇到问题了，然后我查了一下X5内核的开发文档，发现可以开启同层播放，然后偶然间发现一个dplayer,它里面有两个全屏，一个是inline,一个是充满整个屏幕的。那我想我去掉充满整个屏幕的，然后再播放的时候加上X5内核需要的那些配置不就好了呀。
所以：我先判断播放的设备是安卓还是ios
//判断设备信息
getDeviceInfo() {
let ua = navigator.userAgent;
if (ua.indexOf("Android") > -1) {
return true;
} else if (ua.indexOf("iPhone") > -1) {
return false;
} else {
return false;
}
},
然后再根据设备不同添加不同的处理
/根据设备不同，控制显示不同
let video = document.querySelector(".videoPlay video");
let dplayerFull = document.querySelector(".videoPlay .dplayer-full-in-icon");
if (this.getDeviceInfo()) {
video.setAttribute('x5-playsinline', 'true');
video.setAttribute('x5-video-player-type', 'h5');
video.setAttribute('x5-video-orientation', 'portrait|landscape');
video.setAttribute('x-webkit-airplay', 'true');
video.style.objectFit = "fill";
}
经过这样处理以后在X5内核中的播放就没问题了
