首页 新闻 搜索 专区 学院

怎么让html5的video横屏播放?

0
[已关闭问题] 关闭于 2013-12-03 11:54

html5不是说为下一代移动互联网设计吗?怎么不能让video横屏播放呢,我试了用画布的知识转90度,道是可以,可是没有了控制条,不方便呀????求大神

angelshelter的主页 angelshelter | 大侠五级 | 园豆:9678
提问于:2013-11-13 21:40
< >
分享
所有回答(3)
0

也是需要这样的东西,求大神快来

williamxia | 园豆:210 (菜鸟二级) | 2014-12-18 11:47

只能手机转屏了。

支持(0) 反对(0) angelshelter | 园豆:9678 (大侠五级) | 2014-12-23 17:48
0

您好,我现在也想实现这样的功能,请问楼主找到解决办法了吗?

1059470415 | 园豆:202 (菜鸟二级) | 2015-08-14 11:16

调用本地播放器吧,效果最好。

支持(0) 反对(0) angelshelter | 园豆:9678 (大侠五级) | 2015-08-14 13:01
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>
spiritfox358 | 园豆:202 (菜鸟二级) | 2017-11-02 10:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册