mui使用video.js,点击全屏按钮后只是视屏放大了,苹果手机点击直接横屏播放视屏和在手机禁止横屏的情况下app点击全屏按钮后强制视频横屏播放

程序员最大的快乐应该就是解决bug吧,哈哈,这个问题在我这边解决了,我太难了,
说下整个流程吧,
我用的是video.js来播放的视频,安卓状态下,点击全屏按钮可以直接横屏没问题,用的是mui使用video.js,点击全屏按钮后只是视屏放大了,苹果手机点击直接横屏播放视屏和在手机禁止横屏的情况下app点击全屏按钮后强制视频横屏播放社区里一位老兄的办法,具体的是谁的找不到了哈,我这里拿过来借鉴一下,

// Android平台的视频全屏旋转
var fullScreenOfAndroid = function() {
console.log("监听安卓")
if(true) {
// 最新5+API的支持
var self = plus.webview.currentWebview();
self.setStyle({
videoFullscreen: ‘landscape‘
});
} else {
document.addEventListener(‘webkitfullscreenchange‘, function() {
var el = document.webkitFullscreenElement; //获取全屏元素
if(el) {
console.log("监听安卓横屏")
plus.screen.lockOrientation(‘landscape‘); //锁死屏幕方向为横屏
} else {
consle.log("监听安卓竖屏")
plus.screen.lockOrientation(‘portrait-primary‘); //锁死屏幕方向为竖屏
}
});
}
};
// 涉及到5+API的内容,均在plusready事件后调用;
document.addEventListener(‘plusready‘, function() {
var osName = plus.os.name;
if(osName === ‘Android‘) {
fullScreenOfAndroid();
} else if(osName === ‘iOS‘) {
// myPlayer.enterFullScreen();
setTimeout(function(){
console.log(‘苹果ios‘)
var videoElem = document.getElementById(‘my-video‘);
console.log("视频元素="+JSON.stringify(videoElem))
fullScreenOfIos(videoElem);
},1000)

}
});
安卓的没问题,非常ok,帖子里苹果的方法我这用着确实不好使,绞尽脑汁,累得我想罢工,
ios下点击全屏不会横屏播放,直接视屏放大竖屏播放,这还有个学名叫视频劫持,其实就是正常页面播放是由你的video标签定义的播放器来播放,一点击全屏播放就会由系统自身的播放器接管,退出后再交回h5的video,很坑啊,一开始我想法是禁止系统自身的播放器,可最后发现禁止不了,我是不会禁止,

后来的想法是监听video.js的全屏点击按钮vjs-control,在点击全屏时直接强制横屏播放,然后在监听系统自身的播放器的退出全屏按钮将页面强制回竖屏

ps这里多说个小知识
在同时使用mui和video.js的时候,touch事件在点击全屏按钮的时候会执行两遍,结果就是你点击全屏就会直接退出全屏,闪一下就回来了,这里需要处理一下
mui("#my-video").on("touchstart",".vjs-control",function(){
return false;
});
这样就ok了,点击一下就结束它

回归话题,
监听点击全屏按钮是没问题,可是我监听不到系统自身的退出全屏按钮,难受,
后来啊,心血来潮的试了一下video.js的fullscreenchange事件,竟然有用,太哇塞了
他可以监听到屏幕发生改变,我们只有两个需求,横屏或者竖屏,

当屏幕发生改变时,如果现在是竖屏我就锁死横屏,反之亦然
安卓的没问题了,我只需要苹果的
判断一下苹果系统我就要执行另一种横屏方法了,安卓的不变

这个方法下边的代码里有齐全的
this.on(‘fullscreenchange‘,function(){
console.log(‘屏幕改变‘)
var osName = plus.os.name;
if(osName === ‘Android‘) {

} else if(osName === ‘iOS‘) {
 if(window.orientation === 180 || window.orientation === 0) {
plus.screen.lockOrientation(‘landscape‘); //锁死屏幕方向为横屏
console.log(‘竖屏状态!‘); //竖屏状态下发生屏幕改变就锁死为横屏
}
if(window.orientation === 90 || window.orientation === -90) {
console.log(‘横屏状态!‘); //横屏状态下就锁死为竖屏

setTimeout(function(){
plus.screen.lockOrientation("portrait-primary");
},200)
//这里延迟一下是因为直接退出横屏时屏幕会有个缩小的状态,加上这个就不太明显了
}
}

})
然后就ok了,开心

上个全点的代码吧,ios的横屏方法在里面,还有我用得是video.js

var myPlayer;
function video(){
console.log(‘测试放入视频‘)
//这里video标签要整个都用js插入进去,要不会报错,不能只替换src

//webkit-playsinline="" playsinline    这两个属性是为了兼容ios点击视频就直接全屏播放的,加上他俩是为了没点击全屏的时候可以在你定义的video区域播放视屏
var src = ‘‘
src=‘<video id="my-video" class="video-js" controls webkit-playsinline="false" playsinline style="width:100%;height:100%; object-fit: fill;" poster="qinqiguanxi.png" x5-video-player-fullscreen="false" data-setup="{}"><source id="mymp" src="‘+ video_url +‘" type="video/mp4"> </video>‘
$(‘.m‘).append(src)

myPlayer = videojs(‘my-video‘,{      //my-video这个就是video标签的id,然后在这里定义一些视频的事件,比如静音啊,自动播放啊,这个定义最好定义在标签插入的方法里,放在外边容易发生找不到id的错误,当然你也可以将这些事件定义在标签里的 data-setup="{}"

muted: false,
controls : true,
height:300,
width:300,
loop : false,
isFullscreen: true,
poster:video_img,
playbackRates: [0.5, 1, 1.5, 2],      //这个可以调整倍速,还不错
techOrder : [ "html5", "flash" ],
notSupportedMessage: false,
html5:{

nativeControlsForTouch:false,
nativeVideoTracks:false
}

},function onPlayerReady(){          //z这个是video.js的events事件了,可以在某个状态时给出用户提示
var myPlayer = this;
//在回调函数中,this代表当前播放器,
//可以调用方法,也可以绑定事件。
/**
* 事件events 绑定事件用on 移除事件用off
*/
this.on(‘suspend‘, function() {//延迟下载
console.log("延迟下载")
});
this.on(‘loadstart‘, function() { //客户端开始请求数据
console.log("客户端开始请求数据")
});
this.on(‘progress‘, function() {//客户端正在请求数据
console.log("客户端正在请求数据")
});
this.on(‘abort‘, function() {//客户端主动终止下载(不是因为错误引起)
console.log("客户端主动终止下载")
});
this.on(‘error‘, function() {//请求数据时遇到错误
console.log("请求数据时遇到错误")
});
this.on(‘stalled‘, function() {//网速失速
// plus.screen.lockOrientation("portrait-primary");
console.log("网速失速")
});
this.on(‘play‘, function() {//开始播放
console.log("开始播放")
});
this.on(‘pause‘, function() {//暂停
console.log("暂停")
});
this.on(‘loadedmetadata‘, function() {//成功获取资源长度
console.log("成功获取资源长度")
});
this.on(‘loadeddata‘, function() {//渲染播放画面
console.log("渲染播放画面")
});
this.on(‘waiting‘, function() {//等待数据,并非错误
console.log("等待数据")
});
this.on(‘playing‘, function() {//开始回放
console.log("开始回放")
});
this.on(‘canplay‘, function() {//可以播放,但中途可能因为加载而暂停
console.log("可以播放,但中途可能因为加载而暂停")
});
this.on(‘canplaythrough‘, function() { //可以播放,歌曲全部加载完毕
console.log("可以播放,歌曲全部加载完毕")
});
this.on(‘seeking‘, function() { //寻找中
console.log("寻找中")
});
this.on(‘seeked‘, function() {//寻找完毕
console.log("寻找完毕")
});
this.on(‘timeupdate‘, function() {//播放时间改变
console.log("播放时间改变")
});
this.on(‘ended‘, function() {//播放结束
console.log("播放结束")
});
this.on(‘ratechange‘, function() {//播放速率改变
console.log("播放速率改变")
});
this.on(‘durationchange‘, function() {//资源长度改变
console.log("资源长度改变")
});
this.on(‘volumechange‘, function() {//音量改变
console.log("音量改变")
});
this.on(‘fullscreenchange‘,function(){          //这个就是我监听屏幕变化的方法了
console.log(‘屏幕改变‘)
var osName = plus.os.name;
if(osName === ‘Android‘) {       //只要ios下就行了

} else if(osName === ‘iOS‘) {
 if(window.orientation === 180 || window.orientation === 0) {
plus.screen.lockOrientation(‘landscape‘); //锁死屏幕方向为横屏
console.log(‘竖屏状态!‘);
}
if(window.orientation === 90 || window.orientation === -90) {
console.log(‘横屏状态!‘);
setTimeout(function(){
plus.screen.lockOrientation("portrait-primary");
},200)

}
}

})

}

);
videojs("my-video").ready(function(){
var myPlayer = this;
console.log("视频准备好了")
if(isAndroid_ios()){
}else{

}
});

 

mui("#my-video").on("touchstart",".vjs-control",function(){           //这个就是那个额外的小知识了,防止连续点击
console.log("chuda")
return false;
});

}

当然这个方法最后横屏的还是系统播放器,自定义播放器样式可以成功横屏的各位大佬跪求告诉我一下啊

这个方法我应该算是原创吧,哈哈

对于我来说这个问题是解决了,当然每个人的情况都不一样,希望对大家有些帮助

解决bug就是最大的开心,加油

 

mui使用video.js,点击全屏按钮后只是视屏放大了,苹果手机点击直接横屏播放视屏和在手机禁止横屏的情况下app点击全屏按钮后强制视频横屏播放

上一篇:移动支付


下一篇:Android 动态更换桌面图标