1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <title>视频播放</title> 8 </head> 9 10 <body> 11 <div class="video"> 12 <video id="video" controls="controls" preload="auto" poster="http://download.dcloud.net.cn/FastAndroid-mini.jpg" width="100%" height="auto"> 13 <source src="http://download.dcloud.net.cn/FastAndroid-mini.m4v" type="video/mp4"> 14 <source src="http://download.dcloud.net.cn/FastAndroid-mini.webm" type="video/webm"> 15 <source src="http://download.dcloud.net.cn/FastAndroid-mini.ogv" type="video/ogg"> 16 <source src="http://download.dcloud.net.cn/FastAndroid-mini.mp4"> 17 </video> 18 </div> 19 <script type="text/javascript"> 20 /** 21 * 视频全屏播放旋转目前的逻辑 22 * 视频全屏，即锁定屏幕为横屏。 23 * 视频恢复，则解除屏幕方向的锁定。 24 * 具体的切换，根据自己的实际业务做相应的操作。 25 */ 26 // Android平台的视频全屏旋转 27 var fullScreenOfAndroid = function() { 28 if(true) { 29 // 最新5+API的支持 30 var self = plus.webview.currentWebview(); 31 self.setStyle({ 32 videoFullscreen: \'landscape\' 33 }); 34 } else { 35 // 如果暂未更新sdk，可以先使用差量升级等方式，做出兼容处理； 36 // 旧版本下的兼容处理 37 document.addEventListener(\'webkitfullscreenchange\', function() { 38 var el = document.webkitFullscreenElement; //获取全屏元素 39 if(el) { 40 plus.screen.lockOrientation(\'landscape\'); //锁死屏幕方向为横屏 41 } else { 42 plus.screen.unlockOrientation(); //解除屏幕方向的锁定 43 } 44 }); 45 46 } 47 }; 48 // iOS平台的视频全屏旋转 49 var fullScreenOfIos = function(videoElem) { 50 // 监听的事件与Android平台有很大区别 51 videoElem.addEventListener(\'webkitbeginfullscreen\', function() { 52 plus.screen.lockOrientation(\'landscape\'); //锁死屏幕方向为横屏 53 }); 54 videoElem.addEventListener(\'webkitendfullscreen\', function() { 55 plus.screen.unlockOrientation(); //解除屏幕方向的锁定 56 }); 57 }; 58 // 涉及到5+API的内容，均在plusready事件后调用； 59 document.addEventListener(\'plusready\', function() { 60 var osName = plus.os.name; 61 if(osName === \'Android\') { 62 fullScreenOfAndroid(); 63 } else if(osName === \'iOS\') { 64 var videoElem = document.getElementById(\'video\'); 65 fullScreenOfIos(videoElem); 66 } 67 }); 68 </script> 69 </body> 70 71 </html>