視頻全屏彈幕實現

BDEEFE 發布于2019-08-23 16:46 / 1411人閱讀

摘要：該文章短小精悍問視頻全屏后如何加彈幕答了解一下如果你沒有領會我的意思，我可以手摸手帶你擼一遍視頻全屏遇到的問題最近在搞給視頻加個花邊的東西用的在全屏的時候瀏覽器會把視頻層級提高也有同樣的問題，重點是并不草理你的，大家玩玩就懂我的意思了。

該文章短小精悍
問？視頻全屏后如何加彈幕
答：了解一下 screenfull; pointer-events: none;
(如果你沒有領會我的意思，我可以手摸手帶你擼一遍)

視頻全屏遇到的問題
最近在搞給視頻加個花邊的東西用的 Flash,在全屏的時候瀏覽器會把視頻層級提高(H5也有同樣的問題)，（重點是 Flash 并不草理你的DOM，大家玩玩就懂我的意思了。）導致全屏后通過position定位的花邊位于了視頻下方，簡單的說花邊在視頻全屏的時候不展示

處理問題的過程
最開始用的是非常常規的想法，如何在視頻全屏的時候降低視頻的層級，使我需要的div塊位于視頻上方。然后嘗試了各種方法，結果被制裁的服服帖帖的，大家可以去搞搞。其實仔細思考我要做的就是類似于彈幕的東西，咦～～B站怎么實現的。

別人家的彈幕
B站肯定是拿不到源碼的啦，縷他控制臺的資源，element，style。人家確實全屏的時候實現了，彈幕
寫的DOM結構，和CSS樣式并不復雜，全屏無外乎全屏的時候給DOM加了一個樣式而已。我也照著試了不行。

WEY？

4.錯在了哪里

這個問題如果思路錯了就是個死胡同。所以我在找問題的時候趟了很多坑。思路錯在我不應該使用視頻的全屏，敲黑板！劃重點啦！不要使用視頻的全屏！（解決了問題的時候才幡然醒悟），然后發現了個賊有意思的東西。[screenfull][3]。不知道B站他們怎么玩的，但是我用這個實現了。這個東西做了一個事情讓你瀏覽器的DOM鋪滿全屏。歐？～～～

5 實現它
DOM

Script

CSS

去我的代碼里找你需要的東西吧。

6.pointer-events是啥？彈幕呢？

pointer-events 是一個CSS屬性做點透的時候用的，如果你有一個彈幕層在Video上邊你會需要到她的。彈幕呢，沒有。好多人都已經實現了好不好，這個你還是去問問[百度][5]或者[必應][6]吧。

GitHub 地址 https://github.com/Gao-Fan/vi...

云服務器 GPU云服務器彈幕實現 js實現瀏覽器全屏 B站視頻彈幕 js彈幕視頻播放器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103258.html

視頻全屏彈幕實現

摘要：該文章短小精悍問視頻全屏后如何加彈幕答了解一下如果你沒有領會我的意思，我可以手摸手帶你擼一遍視頻全屏遇到的問題最近在搞給視頻加個花邊的東西用的在全屏的時候瀏覽器會把視頻層級提高也有同樣的問題，重點是并不草理你的，大家玩玩就懂我的意思了。該文章短小精悍問？視頻全屏后如何加彈幕答：了解一下 screenfull; pointer-events: none;(如果你沒有領會我的意思，我可以...

mumumu 2019-08-02 16:11 評論0 收藏0
HTML5彈幕視頻播放器

摘要：考慮到只適合在單位時間內繪制少量彈幕，這對于我們播放器來說明顯是不合需求的。比如說直播播放器模式和視頻播放器模式的優化細節又有點不一樣，還有高級彈幕的處理圖片，圖形等。。前言大家年前好，馬上就要元旦了，在很久沒有寫文章之后，想到這篇文章將會成為本人今年的絕響也是有點蛋疼。不過也好，畢竟本人算不得什么勤快的生物，而且比起那些大神來說也差遠了，就作為自己工作半年后的一次沉淀算了。文中...

happyfish 2019-08-21 11:25 評論0 收藏0
HTML5彈幕視頻播放器

摘要：考慮到只適合在單位時間內繪制少量彈幕，這對于我們播放器來說明顯是不合需求的。比如說直播播放器模式和視頻播放器模式的優化細節又有點不一樣，還有高級彈幕的處理圖片，圖形等。。前言大家年前好，馬上就要元旦了，在很久沒有寫文章之后，想到這篇文章將會成為本人今年的絕響也是有點蛋疼。不過也好，畢竟本人算不得什么勤快的生物，而且比起那些大神來說也差遠了，就作為自己工作半年后的一次沉淀算了。文中...

OBKoro1 2019-06-21 16:13 評論0 收藏0