/**
* VIDEOJS补充插件，需要放到VIDEOJS之后引入
* 使用方法：引入jQuery,引入VIDEOJS和VIDEOJSMOD的对应CSS和JS文件，之后调用如下代码：
* $.videojsMod('视频地址');
*/
(function(jQuery){
let player = null;
//禁止页面滚动的handler
function _moveHandler(e){
e.preventDefault();
}
jQuery.extend({
videojsModMobile: function(videoURL){
//首先如果当前有其他视频已经实例化了，则销毁
if(player != null && player.isDisposed_ == false){
player.dispose();
}
//一定要获取到页面的尺寸信息，不然不执行下面所有操作
if(window._resizeInfo){
//拼接一个VIDEO标签到页面中
jQuery('body').append(`
`);
jQuery('.videojsMod_videoPlay').append(`
`);
//注册关闭播放器事件
jQuery('.videojsMod_videoCloseBtn').off('click');
jQuery('.videojsMod_videoCloseBtn').on('click',()=>{
player.dispose();
jQuery('.videojsMod_videoPlayMask').remove();
jQuery('.videojsMod_videoPlay').remove();
//恢复页面滚动
document.body.removeEventListener('touchmove',_moveHandler,{passive:false})
});
//初始化播放器，宽度和设备宽度相同
const boxWidth = window._resizeInfo.deviceWidth;
if(boxWidth!=undefined && !isNaN(boxWidth)){
//播放窗口比例是16:9
const boxHeight = Math.round(boxWidth/16*9);
player = videojs(document.querySelector('.video-js'),{
language:'zh-CN',
controls:true,
autoplay:true,
preload:'metadata',
height:boxHeight,
width:boxWidth,
controlBar:{
pictureInPictureToggle:false,
remainingTimeDisplay:false
}
});
//计算出视频盒子需要的高度，让视频盒子定位准确，由于水平是100%设备宽度，因此只需要计算垂直坐标即可
let availHeight = document.documentElement.clientHeight;
let offsetY = Math.round((availHeight - boxHeight)/3);
jQuery('.videojsMod_videoPlay').css({top:`${offsetY}px`});
}
//绑定自定义事件
//禁止页面滚动
document.body.removeEventListener('touchmove',_moveHandler,{passive:false})
document.body.addEventListener('touchmove',_moveHandler,{passive:false});
//添加点击视频暂停/继续播放功能
player.on('ready',function(){
$('body').off('touchstart','.video-js');
$('body').on ('touchstart','.video-js',function(){
if(player.paused()){
player.play();
}else{
player.pause();
}
});
});
//最后展示视频
jQuery('.videojsMod_videoPlayMask').show();
jQuery('.videojsMod_videoPlay').show();
}
}
});
})($);