怎么让html5的video横屏播放？
0
[已关闭问题]
关闭于 2013-12-03 11:54
html5不是说为下一代移动互联网设计吗？怎么不能让video横屏播放呢，我试了用画布的知识转90度，道是可以，可是没有了控制条，不方便呀？？？？求大神
所有回答(3)
0
也是需要这样的东西，求大神快来
只能手机转屏了。
0
您好，我现在也想实现这样的功能，请问楼主找到解决办法了吗？
调用本地播放器吧，效果最好。
0
视频播放,拿来即用
<!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>
