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>
转载自：https://q.cnblogs.com/q/56878/ 作者：spiritfox358
