Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/418.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
鼠标/键盘事件全屏html5视频(javascript/jquery)_Javascript_Jquery_Html_Video_Fullscreen - Fatal编程技术网

鼠标/键盘事件全屏html5视频(javascript/jquery)

鼠标/键盘事件全屏html5视频(javascript/jquery),javascript,jquery,html,video,fullscreen,Javascript,Jquery,Html,Video,Fullscreen,是否可以使用webkitRequestFullScreen在全屏视频元素上设置onmouseup、onmousedown、onclick等功能?我在创建元素时为元素注册它们,但在视频全屏显示时,我似乎无法获取事件 此外,当我移动鼠标时,是否可以在全屏模式下停止显示视频进度条 欢迎使用jquery或javascript或类似工具回答任何问题。我也找不到在全屏上收听鼠标事件的方法, 但我找到了一个解决办法: 我没有将视频全屏显示,而是将视频CSS更改为: position: fixed; left:

是否可以使用webkitRequestFullScreen在全屏视频元素上设置onmouseup、onmousedown、onclick等功能?我在创建元素时为元素注册它们,但在视频全屏显示时,我似乎无法获取事件

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


欢迎使用jquery或javascript或类似工具回答任何问题。

我也找不到在全屏上收听鼠标事件的方法, 但我找到了一个解决办法:

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

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

然后,视频的行为就像在全屏上一样,一切正常。

最终找到了一种在Chrome中实现的方法:用div包装视频元素,并为该div调用webkitRequestFullScreen,而不是视频+需要一些额外的魔法。 HTML代码段:

<div id="video-container" style="background-color: #000000;" onclick=divClicked()>
    <video id="myvideo">Video not supported!</video>
</div>
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元素中处理mouse/etc.事件——参见上面HTML示例中的onclick声明。 还要注意的是,这种方法不会强制视频控件以全屏或窗口模式显示

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

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

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

如何使用全屏?如果您正在使用mozilla。。。我在Google Chrome中使用webkitRequestFullScreen。我试过在视频元素上设置onmouseup、onmousedown等功能,这些功能在非全屏时可以工作。当全屏显示时,这些事件似乎不会触发。