Question

我很难找到一种跨浏览器的方式来触发视频上的双击全屏事件。我使用videoJS作为播放器框架和fullscreen API。我需要一个兼容IE11，谷歌浏览器和Safari 10的解决方案。

这是我在HTML页面中定义视频标记的部分：

<div id="video-js-player-container" onclick="toggleFullScreen()">
    <video id="video-js" class="video-js vjs-default-skin videoSlideBox" 
                         autoplay="autoplay" preload="auto" 
                         width="100%" height="100%" 
                         data-setup='{}' controls>
        <source src="path/to/my/file" type='video/mp4'>
    </video>
</div>

Anf这是全屏的脚本：

<script>
    function toggleFullScreen() {
        var i = document.getElementById("video-js-player-container");
        if (i.requestFullscreen) {
               i.requestFullscreen();
        }   //fullscreen for safari/chrome/opera
        else if (i.webkitRequestFullscreen) {
               i.webkitRequestFullscreen();
        }   //fullscreen for Firefox    
        else if (i.mozRequestFullScreen) {
               i.mozRequestFullScreen();
        }   //fillscreen for IE11   
        else if (i.msRequestFullscreen) {
               i.msRequestFullscreen();
        }
    }                   
</script>

如果我点击视频的边缘，此解决方案可以正常运行，视频会全屏显示，如下图所示：

例如，如果我点击视频中间没有任何反应，而如果我点击边缘，红色箭头指向，视频将进入全屏。

为了克服这个问题，我试图将我的视频放在按钮标签中：

<button id="fullScreenButton" type="button" onclick="toggleFullScreen()">
    <div id="video-js-player-container">
        <video id="video-js" class="video-js vjs-default-skin videoSlideBox" 
                         autoplay="autoplay" preload="auto" 
                         width="100%" height="100%" 
                         data-setup='{}' controls>
            <source src="path/to/my/file" type='video/mp4'>
        </video>
    </div>
</button>

此解决方案及其问题有效。我可以点击我的视频，然后进入全屏，但视频区域内会出现一个奇怪的窗口：

我如何解决这些问题并解决所有这些问题？

跨浏览器方式触发双击全屏事件

0 个答案: