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()状态来处理它（全屏切换事件在打开时触发，但在全屏关闭时），如果它在全屏幕中然后我调用exitFullscreen()函数。就像这样：

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

Answer 2

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

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

Answer 3

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

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

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

希望它有效

Answer 4

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

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

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

4 个答案: