<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="video">
<video id="video" controls="controls" preload="auto" poster="http://download.dcloud.net.cn/FastAndroid-mini.jpg" width="100%" height="auto">
<source src="http://download.dcloud.net.cn/FastAndroid-mini.m4v" type="video/mp4">
<source src="http://download.dcloud.net.cn/FastAndroid-mini.webm" type="video/webm">
<source src="http://download.dcloud.net.cn/FastAndroid-mini.ogv" type="video/ogg">
<source src="http://download.dcloud.net.cn/FastAndroid-mini.mp4">
</video>
</div>
<script type="text/javascript">
/**
* 視頻全屏播放旋轉目前的邏輯
* 視頻全屏，即鎖定屏幕為橫屏。
* 視頻恢復，則解除屏幕方向的鎖定。
* 具體的切換，根據自己的實際業務做相應的操作。
*/
// Android平台的視頻全屏旋轉
var fullScreenOfAndroid = function() {
if(true) {
// 最新5+API的支持
var self = plus.webview.currentWebview();
self.setStyle({
videoFullscreen: 'landscape'
});
} else {
// 如果暫未更新sdk，可以先使用差量升級等方式，做出兼容處理；
// 舊版本下的兼容處理
document.addEventListener('webkitfullscreenchange', function() {
var el = document.webkitFullscreenElement; //獲取全屏元素
if(el) {
plus.screen.lockOrientation('landscape'); //鎖死屏幕方向為橫屏
} else {
plus.screen.unlockOrientation(); //解除屏幕方向的鎖定
}
});
}
};
// iOS平台的視頻全屏旋轉
var fullScreenOfIos = function(videoElem) {
// 監聽的事件與Android平台有很大區別
videoElem.addEventListener('webkitbeginfullscreen', function() {
plus.screen.lockOrientation('landscape'); //鎖死屏幕方向為橫屏
});
videoElem.addEventListener('webkitendfullscreen', function() {
plus.screen.unlockOrientation(); //解除屏幕方向的鎖定
});
};
// 涉及到5+API的內容，均在plusready事件后調用；
document.addEventListener('plusready', function() {
var osName = plus.os.name;
if(osName === 'Android') {
fullScreenOfAndroid();
} else if(osName === 'iOS') {
var videoElem = document.getElementById('video');
fullScreenOfIos(videoElem);
}
});
</script>
</body>
</html>
