时间戳

首页 > 解决方案 > VideoJS - 按下播放按钮后禁用自动全屏

javascript - VideoJS - 按下播放按钮后禁用自动全屏

问题描述

由于 JWPlayer 荒谬的定价政策，我改用了 VideoJS。

问题是，当用户在 iOS 上启动视频时，它会切换原生全屏。我希望控制面板在全屏模式下可用，但我还无法管理它。

代码：

<video id="tvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="..." data-setup='{"language":"en", "controls": true,"autoplay": false, "fluid": true, "aspectRatio": "16:9",   "playbackRates": [0.5, 1, 1.5, 2]}'>
   <source src="..." type='video/mp4' label='240p' res='240'/>
   <source src="..." type='video/mp4' label='360p' res='360'/>
   <source src="..." type='video/mp4' label='720p' res='720'/>
   <p class="vjs-no-js">Bu videoyu görüntülemek için lütfen JavaScript'i etkinleştirin.</p>
</video>
<script type="text/javascript">
    var myPlayer = videojs("#tvideo");
    myPlayer.videoJsResolutionSwitcher({
        default: 'high',
        dynamicLabel: true
    });
    myPlayer.persistvolume({
        namespace: 'httpswwwseyredelimcom'
    });
    myPlayer.brand({
        image: "...",
        title: "...",
        destination: "...",
        destinationTarget: "_top"
    });
    myPlayer.ready(function() {
        this.hotkeys({
            volumeStep: 0.1,
            seekStep: 5,
            enableModifiersForNumbers: false
        });
        $(".bAd").detach().appendTo(".video-js");
        $(".plAd").detach().appendTo(".video-js");

        function resizeVideoJS() {
            var containerWidth = $('.video-player').width();
            var videoHeight = Math.round((containerWidth / 16) * 9);
            myPlayer.width(containerWidth).height(videoHeight);
        }
        window.onresize = resizeVideoJS;
        myPlayer.on("ended", function() {
            startNextVideo();
        });
    });
</script>

我怎么能管理没有自动全屏并让用户在全屏上拥有控制面板？

提前致谢。

标签： javascriptvideo.js

解决方案

实际上，这不会像 video.js 描述的那样工作。它适用于直接的 html5 播放器。

对于 video.js，您需要在设置对象的其他属性时使用 .playsinline(true)。您可以在 .ready() 上调用它。

这种方法对我有用：

instanceName.ready(function(){
                myPlayer = this;
                myPlayer.playsinline(true);
            });

https://docs.videojs.com/player#playsinline

推荐阅读