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

是否可以使用webkitRequestFullScreen在全屏视频元素上设置onmouseup，onmousedown，onclick等功能？我在创建元素时为它注册了这些元素，但在视频全屏时我没有看到这些事件。鼠标/键盘事件全屏html5视频（javascript/jquery）

另外，是否有可能停止视频进度条出现在全屏模式时，只要我移动鼠标？

任何答案欢迎，无论是使用jQuery或JavaScript或类似的。

来源

2012-12-13 user1710407

你如何使用全屏？如果您使用mozilla ... https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode – aug

我在Google Chrome中使用webkitRequestFullScreen。我曾尝试在视频元素上设置onmouseup，onmousedown等功能，并在未全屏时使用这些功能。当全屏幕这些事件似乎并没有触发。 – user1710407

我不能找到一种方法，听取他们对全屏鼠标事件还有，但我已经找到了一个解决办法：

而是把视频全屏的，我只是改变视频的CSS：

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

视频的表现就像它在全屏幕上一样，并且一切正常。

来源

2013-07-28 14:57:43

终于找到一个办法做到这一点在Chrome：与div包住video元素，并呼吁webkitRequestFullScreen()为div而不是为video +一些额外的魔法是必需的。 HTML代码段：

<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; 
}

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

来源

2014-03-21 08:12:18

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

回答

相关问题