1

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

另外，当我移动鼠标时，是否可以在全屏模式下停止出现视频进度条？

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

4

2 回答 2

0

终于找到了一种在 Chrome 中执行此操作的方法：使用并调用它而不是 for + 包装你的video元素将需要一些额外的魔法。HTML 代码片段：divwebkitRequestFullScreen()divvideo

<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元素中的事件- 参见onclick上面 HTML 示例中的声明。另请注意，这种方法不会强制视频控件以全屏或窗口模式显示。

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

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

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

于 2014-03-21T08:12:18.130 回答
0

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

我没有将视频全屏显示，而是将视频 CSS 更改为：

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

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

于 2013-07-28T14:57:43.537 回答