启用/禁用全屏选项Video.js HTML5

Question

如何从WordPress中的我的帖子标签html中启用/禁用一个视频的全屏选项？我正在使用video.js。

我不想永远做到这一点，只要随时决定我想要的视频。我尝试了AllowFullScreen="true/false"，但它不起作用。

Answer 1

video-js（6.x.x）的当前版本也支持 fullscreenToggle选项禁用全屏按钮。您可以在这样的播放器中简单地设置它：

videojs("my-video", {
    controlBar: {
      fullscreenToggle: false
    }
});

但是，我观察到，这并不意味着您无法通过手势在移动设备上输入全屏。（例如，在iPad上反向紧缩 - 屏幕上的两个手指并将其移开）。这是另一个故事 - 我正在通过收听fullscreenchange事件并检查isFullscreen()播放器状态（FullScreenchange事件在打开时触发但也关闭全屏时）来处理它，如果它处于完整屏幕中，我将调用exitFullscreen()函数。就像这样：

videojs("my-video",{controlBar: {fullscreenToggle: false}}).ready(function(){
    let myPlayer = this;
    myPlayer.on("fullscreenchange", function(){
        if(myPlayer.isFullscreen()){
            myPlayer.exitFullscreen();
        }
    });
});

Answer 2

将类添加到视频中，如下

.vjs-nofull .vjs-fullscreen-control {
    display:none;
}

to

<video class="video-js vjs-default-skin vjs-nofull" ....></video>

希望它有效

Answer 3

浏览video.js文档，获取名为 FullscreenToggle的子组件是一个相当涉及的过程。对我来说，只有 myPlayer.children()[5].children()[7]做到了，这里定义了 myPlayer：

videojs("lodestar_video").ready(function(){
    myPlayer = this;
});

但是，调用.disable()和.disposed()不起作用并返回undefined。

对我有用的是CSS解决方案：确保它不会使用display:none出现，然后设置适当的边距，以使卷控件不会脱离位置。

.vjs-fullscreen-control { 
    display: none; 
} 
.vjs-default-skin .vjs-volume-control { 
    margin-right: 20px; 
}

由于仍然创建和加载了全屏按钮，因此缺点是小开销，只有显示，但鉴于加载了整个视频。

在7.5.0中，您可以使用它隐藏全屏按钮并禁用双击

videojs("my-player", {
    controlBar: {
        fullscreenToggle: false
    },
    userActions: {
        doubleClick: false
    }
});