<!DOCTYPE html>
? ? ? <meta charset="UTF-8">
? ? ? <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
? ? ? <title>視頻播放
? ? ? <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">
? ? ? <script type="text/javascript">
? ? ? ? /**
* 視頻全屏播放旋轉(zhuǎn)目前的邏輯
* 視頻全屏，即鎖定屏幕為橫屏。
* 視頻恢復(fù)，則解除屏幕方向的鎖定。
* 具體的切換，根據(jù)自己的實(shí)際業(yè)務(wù)做相應(yīng)的操作。
*/
? ? ? ? // Android平臺(tái)的視頻全屏旋轉(zhuǎn)
? ? ? ? var fullScreenOfAndroid =function() {
if(true) {
// 最新5+API的支持
? ? ? ? ? ? ? var self =plus.webview.currentWebview();
? ? ? ? ? ? ? self.setStyle({
videoFullscreen:'landscape'
? ? ? ? ? ? ? });
? ? ? ? ? ? }else {
// 如果暫未更新sdk，可以先使用差量升級(jí)等方式，做出兼容處理；
// 舊版本下的兼容處理
? ? ? ? ? ? ? document.addEventListener('webkitfullscreenchange', function() {
var el =document.webkitFullscreenElement; //獲取全屏元素
? ? ? ? ? ? ? ? ? if(el) {
plus.screen.lockOrientation('landscape'); //鎖死屏幕方向?yàn)闄M屏
? ? ? ? ? ? ? ? ? }else {
plus.screen.unlockOrientation(); //解除屏幕方向的鎖定
? ? ? ? ? ? ? ? ? }
});
? ? ? ? ? ? }
};
? ? ? ? // iOS平臺(tái)的視頻全屏旋轉(zhuǎn)
? ? ? ? var fullScreenOfIos =function(videoElem) {
// 監(jiān)聽的事件與Android平臺(tái)有很大區(qū)別
? ? ? ? ? ? videoElem.addEventListener('webkitbeginfullscreen', function() {
plus.screen.lockOrientation('landscape'); //鎖死屏幕方向?yàn)闄M屏
? ? ? ? ? ? });
? ? ? ? ? ? videoElem.addEventListener('webkitendfullscreen', function() {
plus.screen.unlockOrientation(); //解除屏幕方向的鎖定
? ? ? ? ? ? });
? ? ? ? };
? ? ? ? // 涉及到5+API的內(nèi)容，均在plusready事件后調(diào)用；
? ? ? ? document.addEventListener('plusready', function() {
var osName =plus.os.name;
? ? ? ? ? ? if(osName ==='Android') {
fullScreenOfAndroid();
? ? ? ? ? ? }else if(osName ==='iOS') {
var videoElem =document.getElementById('video');
? ? ? ? ? ? ? fullScreenOfIos(videoElem);
? ? ? ? ? ? }
});
</html>
