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

Question

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

我不想永远做下去，只是随时决定要带或不带视频。我试过了，AllowFullScreen="true/false"但是没有用。

Answer 1

将课程添加到视频中，如下所示

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

到

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

希望它有效

Answer 2

当前版本的video-js（6.xx）支持通过fullscreenToggle选项禁用全屏按钮。您可以像这样在播放器初始化期间简单地设置它：

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

但是，我观察到这并不意味着您无法在移动设备上通过手势进入全屏模式。（例如，在iPad上反向捏-用两根手指在屏幕上并将它们分开）。那是另一个故事-im通过侦听fullscreenchange事件并检查isFullscreen()播放器的状态来处理它（fullscreenchange事件在全屏打开时也会触发，但在全屏关闭时也会触发），如果它处于全屏状态，则Im调用exitFullscreen()功能。像这样：

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

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; 
}

这样做的缺点是开销很小，因为仍然创建和加载全屏按钮，只是不显示，但考虑到加载整个视频，这应该几乎可以忽略不计。