程序员最大的快乐应该就是解决bug吧，哈哈，这个问题在我这边解决了，我太难了，
说下整个流程吧，
我用的是video.js来播放的视频，安卓状态下，点击全屏按钮可以直接横屏没问题，用的是社区里一位老兄的办法，具体的是谁的找不到了哈，我这里拿过来借鉴一下，
// 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点击全屏按钮后强制视频横屏播放