頻道欄目
首頁 > 資訊 > HTML 5 > 正文

HTML5重寫video控制欄,Chrome去除下載按鈕的代碼實例講解

18-05-31        來源:[db:作者]  
收藏   我要投稿

video標簽

video控制欄功能

1.volume 聲音

2.currentTime 視頻進度

3.play/pause 播放/暫停

4.fullscreen 全屏

5.download (Chrome下顯示)

一般情況下重寫控制欄的目的:

1.樣式上的優化,

2.去除Chrome的下載按鈕

假設現在獲取到一個video Elment 對象 video

如何實現上述功能:

1.聲音 video.volume 設置或返回視頻音量

2.進度 video.currentTime 設置或返回視頻中的當前播放位置(以秒計)

3.播放 video.pause 返回是否暫停 ,play() pause() 暫停播放操作

4.全屏 requestFullscreen/exitFullscreen 全屏以及退出全屏

問題:

當video全屏的時候是會強制展示默認的控制條

解決方案 :

給video標簽套一層div ,讓video的父標簽全屏而video占滿父標簽即可.

讓我們來看一下全屏的代碼:

//dom 表示Element 對象
function toFullScreen(dom){

    if(dom.requestFullscreen){
        return dom.requestFullScreen();
    }else if(dom.webkitRequestFullScreen){
        return dom.webkitRequestFullScreen();
    }else if(dom.mozRequestFullScreen){
        return dom.mozRequestFullScreen();
    }else{
        return dom.msRequestFullscreen();
    }

}
//稍微改造一下,就變成了一個通用的方法,相對于上面方法而言,不會多次執行if else
var toFullScreen= (function(){
    var full = Element.prototype.requestFullscreen ||
        Element.prototype.webkitRequestFullscreen||
        Element.prototype.mozRequestFullScreen||
        Element.prototype.msRequestFullscreen;
    return function(dom){
        full.call(dom)
    }
})()

退出全屏的代碼

var exitFullscreen = (function(){
    var full = document.exitFullscreen||
        document.mozExitFullScreen||
        document.webkitExitFullscreen;
    return function(){
        full.call(document);
    }
})()

監聽全屏事件 fullScreenChange

判斷是否全屏 就不一一贅述了.

然后控制欄的樣式編寫,就是純粹的css布局問題了.

1.不要給video 標簽添加 controls 屬性. controls 和required 屬性一樣,只需要寫了就會生效,而不在乎屬性值.

2.用fullScreen和exitfullScreen 控制video的父標簽全屏,同時設置video css 樣式width,height 100% ,屬性值video.width video.height不設置即可.這樣父標簽全屏,video自動全屏,且不會有控制條,然后再手動添加一個控制條,加上對應事件即可

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

免费的黄色网站