鼠標/鍵盤事件全屏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）

回答

相關問題