上一篇文章写出了如何在app上使用uniapp+videojs播放m3u8视频流的方法，但是实际使用后发现点击全屏按钮不会自动横屏，在网上找到了两种解决办法
方法一：
在引入videojs的后面引入 videojs-landscape-fullscreen.min.js
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-landscape-fullscreen.min.js"</script><script>
var player = videojs('some-player-id');
player.landscapeFullscreen();
在 var player = videojs(‘some-player-id’); 后加 player.landscapeFullscreen();
这样当点击全屏按钮后会自动横屏全屏
参考代码：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- <th:block th:include="include :: header('课件')"/>-->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>视频课件</title>
<link href="/css/video-js.min.css" rel="stylesheet">
<style>
body {
background-color: #191919;
margin: 0px;
padding: 0px;
/*transform: rotate(90deg);*/
}
.m {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#my-video {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="m">
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="800"
height="600"
data-setup="{}">
<source th:src="*{courseware.transformFilepath}" type="video/mp4">
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser
that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<script src="/js/jquery.min.js"></script>
<script src="/js/video.min.js"></script>
<script src="/js/videojs-landscape-fullscreen.js"></script>
<script src="/js/videojs_zh-CN.js"></script>
<script th:inline="javascript">
var myPlayer = videojs('my-video', {
autoplay: true,
controls: true,
height: document.documentElement.clientHeight,
width: document.documentElement.clientWidth
}, function onPlayerReady() {
this.on('timeupdate', function () {//播放时间改变
// console.log("播放时间改变")
});
});
myPlayer.landscapeFullscreen();
videojs("my-video").ready(function () {
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
</body>
</html>但是在我实地使用这个方法后发现还是不行，没有报错，什么都没有，点击全屏还是不自动横屏过来。于是又找到了方法二
方法二：
在安卓端借鉴如下方法
// 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的横屏方法在里面
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;
});}方法二我还没有测过，等测过后再回来更新
