背景
用的是video.js来播放的视频，安卓状态下，点击全屏按钮可以直接横屏没问题，安卓的没问题，非常ok,帖子里苹果的方法我这用着确实不好使，绞尽脑汁，累得我想罢工，ios下点击全屏不会横屏播放，直接视屏放大竖屏播放，这还有个学名叫视频劫持，其实就是正常页面播放是由你的video标签定义的播放器来播放，一点击全屏播放就会由系统自身的播放器接管，退出后再交回h5的video,很坑啊，一开始我想法是禁止系统自身的播放器，可最后发现禁止不了，我是不会禁止，
// 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)
}
});
后来的想法是监听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)
//这里延迟一下是因为直接退出横屏时屏幕会有个缩小的状态，加上这个就不太明显了
}
}
})
完整示例
上个全点的代码吧，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;
});
}
当然这个方法最后横屏的还是系统播放器，自定义播放器样式可以成功横屏的各位大佬跪求告诉我一下啊
