Question

我在我们的网站上使用HTML5视频。我尝试使用纯HTML5和Video.js插件。当您单击控件中的全屏按钮时，两者都会使整个页面全屏而不是视频。

我无法判断它是否与我的CSS或其他一些错误有关。有谁知道它为什么这样做？

以下是一个示例链接：example video

以下是涉及video.js的视频的代码段：

    <div class='twoThreeColumn'>
    <h3 class='current-video-title' style='color:#bbb;margin-bottom:5px;'>$title</h3>
        <video allowFullScreen='true' webkitallowfullscreen='true' mozallowfullscreen='true' width='auto' height='auto' id='webinar-$sku' controls poster='' class='video-js vjs-default-skin vjs-big-play-centered html5-video' preload='auto'>
            <source src='{$url}mp4/{$sku}.mp4' type='video/mp4'/>
            <source src='{$url}ogg/{$sku}.ogv' type='video/ogg'/>
            <source src='{$url}webm/{$sku}.webm' type='video/webm'/>
        </video>
</div>

<script>
    videojs('webinar-$sku',{},function(){});
</script>

Answer 1

不确定为什么会出现这个问题，但我已经弄明白了，因为包含视频的div ID包含了＆＃34;动画fadeInUp＆＃34; ...删除了这两个类，它工作正常。

为什么HTML5视频全屏使整个页面全屏？

1 个答案: