1

我正在努力寻找一种跨浏览器的方式来触发视频上的双击全屏事件。我使用 videoJS 作为播放器框架和全屏 API。我需要一个兼容 IE11、Google Chrome 和 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>

这个解决方案及其问题是有效的。我可以点击我的视频并进入全屏模式，但视频区域内出现了一个奇怪的窗口：

在此处输入图像描述

我该如何解决这些问题？

4

0 回答 0