有沒有辦法覆蓋全屏HTML5 <video>上的<canvas>？

我使用videojs播放視頻，並且我已經逐幀對視頻內容進行了一些處理，並將其顯示在<canvas>（ID：'display'）中。有沒有辦法覆蓋全屏HTML5 <video>上的<canvas>？

當播放視頻時，<canvas>可以顯示在<video>的前面並帶有以下css。

<style type="text/css"> 
    canvas#display { 
     z-index: 1; 
     postion: relative; 
     top: some-video-height-px; 
    } 

    video#videoDiv_html5_api { 
     z-index: -2; 
    } 

    div.vjs-controls { 
     z-index: 3; 
    } 

</style>

看來，當<video>進入全屏模式z-index屬性不能正常工作。它保持在前面和<canvas>不能覆蓋超過<video>

在W3C文檔 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#ui

我們

:fullscreen { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    z-index:2147483647; 
    box-sizing:border-box; 
    margin:0; 
    width:100%; 
    height:100%; 
}

看來，z-index的已定到Integer.MAX_VALUE ...

來源

2012-02-27 Kevin Tong

我自己找到答案。你只需要設置canvas.style.z-index爲2147483647，然後將覆蓋

來源

2012-03-19 12:53:21

我很好奇你在哪裏使用的網絡瀏覽器。此解決方案不適用於Safari，因爲全屏模式會啓動隱藏Web瀏覽器的本地視頻播放客戶端，從而取代瀏覽器中的任何和所有元素，而與z-index值無關。 – natlee75 2012-09-25 20:43:19

嗯...你是否使用了原始的webkitEnterFullscreen方法進行全屏模式或更新的「正確的」webkitRequestFullScreen？ – natlee75 2012-09-25 20:44:21

我使用在Windows上運行的Chrome。在Mac上，應根據我在iOS上的經驗調用quicktime。我不知道我使用的是什麼版本的方法... – 2012-09-27 02:13:53

有沒有辦法覆蓋全屏HTML5 <video>上的<canvas>？

回答

相關問題