videojs 手机端全屏横屏播放

最新推荐文章于 2024-05-15 10:54:10 发布

H_feiyun123

最新推荐文章于 2024-05-15 10:54:10 发布

阅读量1.2w

点赞数 6

分类专栏： js

huyunfei

本文链接：https://blog.csdn.net/huyunfei/article/details/107611151

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

解决方案：

https://github.com/prateekrastogi/videojs-landscape-fullscreen

如图，videojs后引入

videojs-landscape-fullscreen.min.js

var player = videojs('some-player-id');

后加

player.landscapeFullscreen();

这样当点击全屏按钮后会自动横屏全屏

找了好久，记录分享一下。

参考代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!--    <th:block th:include="include :: header('课件')"/>-->
    <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>
    <link href="/css/video-js.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #191919;
            margin: 0px;
            padding: 0px;
            /*transform: rotate(90deg);*/
        }

        .m {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #my-video {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>

<div class="m">
    <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="800"
           height="600"
           data-setup="{}">
        <source th:src="*{courseware.transformFilepath}" type="video/mp4">
        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser
            that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
    </video>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/video.min.js"></script>
    <script src="/js/videojs-landscape-fullscreen.js"></script>
    <script src="/js/videojs_zh-CN.js"></script>

    <script th:inline="javascript">


        var myPlayer = videojs('my-video', {
            autoplay: true,
            controls: true,
            height: document.documentElement.clientHeight,
            width: document.documentElement.clientWidth
        }, function onPlayerReady() {
            this.on('timeupdate', function () {//播放时间改变
                // console.log("播放时间改变")
            });

        });
        myPlayer.landscapeFullscreen();
        videojs("my-video").ready(function () {
            var myPlayer = this;
            myPlayer.play();
        });

        

    </script>
</div>

</body>
</html>

H_feiyun123

关注

6
点赞
踩
21

收藏

觉得还不错? 一键收藏
16
评论
videojs 手机端全屏横屏播放

解决方案：https://github.com/prateekrastogi/videojs-landscape-fullscreen如图，videojs后引入videojs-landscape-fullscreen.min.jsvar player = videojs('some-player-id');后加player.landscapeFullscreen();这样当点击全屏按钮后会自动横屏全屏找了好久，记录分享一下。...
复制链接

扫一扫