Question

是否可以使用webkitRequestFullScreen在全屏视频元素上设置onmouseup，onmousedown，onclick等功能？我在创建元素时注册它们，但是当视频全屏时我似乎没有得到事件。

此外，每当我移动鼠标时，是否可以在全屏模式下停止显示视频进度条？

欢迎使用jquery或javascript或类似的任何答案。

Answer 1

我找不到在全屏幕上收听鼠标事件的方法，但我找到了一个解决方法：

我只是将视频CSS更改为：

，而不是将视频放在全屏上

position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999;

视频的行为就像全屏一样，一切正常。

Answer 2

最后找到了一种在Chrome中执行此操作的方法：将video元素与div打包在一起，然后为webkitRequestFullScreen()调用div，而不是video +将需要一些额外的魔法。 HTML code snippet：

<div id="video-container" style="background-color: #000000;" onclick=divClicked()>
    <video id="myvideo">Video not supported!</video>
</div>

JavaScript代码段：

function doFullscreen() {
    var container = document.getElementById("video-container");

    if (container.requestFullscreen) {
        container.requestFullscreen();
    } else if (container.mozRequestFullScreen) {
        container.mozRequestFullScreen();
    } else if (container.webkitRequestFullscreen) {
        container.webkitRequestFullscreen();
    }

    var video = document.getElementById("myvideo");

    // have to resize the video to fill the whole screen
    video.width=window.screen.availWidth;
    video.height=window.screen.availHeight;
}

这种方法允许处理鼠标等。 div元素中的事件 - 请参阅上面的HTML示例中的onclick声明。另请注意，此类方法不会强制视频控件以全屏模式或窗口模式显示。

关于进度条的第二个问题，您可以将以下内容添加到CSS中：

video::-webkit-media-controls-enclosure {
  display:none;
}

但请注意，使用上述方法时不需要它。

鼠标/键盘事件全屏html5视频（javascript / jquery）

2 个答案: