JS自定義多媒體Video控制條（控制視頻播放、進度、全屏案例）

本文轉載自查看原文 2019-08-23 14:36 7383

版權聲明：本文為博主原創文章，遵循 CC 4.0 by-sa 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/weixin_41105030/article/details/86695625

案例參考

先來看一下一些視屏控件

HTML代碼

我們自定義實現控制條，所以video不要使用controls屬性
從其他網站視頻播放，一般都是要自己實現控制條來達到我們想要的效果，使用video提供的控制條相關屬性就很難修改，也可能不搭配網站，不美觀
html代碼

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義視頻控制條</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
    <div class="wrap">
        <h3>視頻控制案例</h3>
        <div class="content">
            <div class="player">
                <video src="source/trailer.mp4">
                您的瀏覽器不支持 video 標簽。
                </video>
                <div class="control">
                    <div class="fa fa-play play_pause"></div>
                    <div>
                        <span class="progress"></span>
                    </div>
                    <div class="timer">
                        <span class="progress_timer">00:00:00</span>/
                        <span class="duration_timer">00:00:00</span>
                    </div>
                    <div class="fa fa-expand expand"></div>
                </div>
            </div>
        </div>
    </div>            
</body>
<script src="js/index.js"></script>
</html>

CSS代碼

*{
    margin: 0;
    padding: 0;
}
/* 去掉全屏時顯示的自帶控制條 */
video::-webkit-media-controls{
    display:none !important;
}
.wrap h3{
    text-align: center;
    height: 100px;
    line-height: 100px;
}
.player{
    width: 720px;
    height: 400px;
    margin: 0 auto;
    position: relative;

}
.player video{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}
.player .control{
    position: absolute;
    background: rgba(255,255,0,0.3);
    width: 680px;
    height: 40px;
    border-radius: 5px;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
}
.player .control div{
    display: inline-block;
    line-height: 40px;
    margin-left: 10px;
    font-size: 18px;
    color: #fff;
}
.player .control .play_pause,.player .control .expand{
    color: rgb(255,255,0);
}
.player .control div:nth-child(2){
    width: 460px;
    height: 10px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 5px;
    overflow: hidden;
}
.player .control .progress{
    display: block;
    width: 10%;
    height: 10px;
    background: #fff;
}
.player .control .timer{
    font-size: 12px;
}

效果預覽

JS代碼

實現播放暫停

屬性：paused 設置或返回視頻是否暫停。
方法：play()開始播放視頻。pause() :暫停當前播放的視頻。
代碼

// 獲取元素
var videoObj = document.querySelector('video')
var playBtn = document.querySelector('.play_pause')
// 0.實現播放按鈕
// 1.獲取所需要的元素
// 2.點擊播放按鈕控制視頻的播放
// 3.切換為暫停按鈕
// 4.點擊暫停按鈕實現暫停
// 5.實現切換
playBtn.addEventListener('click', function(){
    if(videoObj.paused){
        // 如果視頻處於播放狀態
        videoObj.play()
        this.classList.remove('fa-play')
        this.classList.add('fa-pause')
    }else{
        videoObj.pause()
        this.classList.add('fa-play')
        this.classList.remove('fa-pause')
    }
})

4.效果
在這里插入圖片描述

實現時間
屬性：currentTime 設置或返回視頻中的當前播放位置（以秒計）。duration 返回視頻的長度（以秒計）
方法：oncanplay: 事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。 ontimeupdate:通過該事件來報告當前的播放進度.
代碼

var progressTimer = document.querySelector('.progress_timer')
var durationTimer = document.querySelector('.duration_timer')
// 0.實現時間
// 1.獲取所需的元素
// 2.時間格式為：hh:mm:ss
// 3.獲取總時間，並格式化
// 4.獲取當前視頻時間，並格式化
// 5.渲染到頁面
let {totalT,presentT} = {totalT:0,presentT:0}
videoObj.addEventListener('canplay',function(){
    totalT = this.duration
    var videoDuration = formatTime(totalT)
    durationTimer.innerHTML = videoDuration
})

videoObj.addEventListener('timeupdate',function(){
    presentT = this.currentTime
    var videoCurrent = formatTime(presentT)
    progressTimer.innerHTML = videoCurrent
})
function formatTime(t){
    var h = parseInt(t/3600)
    h = h<10?'0'+h:h 
    var m = parseInt(t%3600/60)
    m = m<10?'0'+m:m
    var s = parseInt(t%60)
    s = s<10?'0'+s:s
    return h+':'+m+':'+s
}

實現進度條

在播放進度里面實現

var progress = document.querySelector('.progress')
//0.實現進度條 
//1.獲取所需元素
//2.根據時間來實現百分比
var percent = presentT/totalT*100
progress.style.width = percent+'%'

實現全屏

全屏：video.webkitRequestFullScreen();

// 0.實現全屏
var expand = document.querySelector('.expand')
expand.addEventListener('click',function(){
    videoObj.webkitRequestFullScreen()
})

但是這樣會覆蓋我們自定義的控制條
使用提高層級並不能解決
使用user agent stylesheet來更改也起不了作用
我們可以使用video存放的容器來實現全屏，然后video根據父元素進行變化即可

var videoObj = document.querySelector('video')
var playBtn = document.querySelector('.play_pause')
var progressTimer = document.querySelector('.progress_timer')
var durationTimer = document.querySelector('.duration_timer')
var progress = document.querySelector('.progress')
var player = document.querySelector('.player')
var expand = document.querySelector('.expand')
playBtn.addEventListener('click', function(){
    if(videoObj.paused){
        // 如果視頻處於播放狀態
        videoObj.play()
        this.classList.remove('fa-play')
        this.classList.add('fa-pause')
    }else{
        videoObj.pause()
        this.classList.add('fa-play')
        this.classList.remove('fa-pause')
    }
})
let {totalT,presentT} = {totalT:0,presentT:0}
videoObj.addEventListener('canplay',function(){
    totalT = this.duration
    var videoDuration = formatTime(totalT)
    durationTimer.innerHTML = videoDuration
})

videoObj.addEventListener('timeupdate',function(){
    presentT = this.currentTime
    var videoCurrent = formatTime(presentT)
    progressTimer.innerHTML = videoCurrent
    var percent = presentT/totalT*100
    progress.style.width = percent+'%'
})

function formatTime(t){
    var h = parseInt(t/3600)
    h = h<10?'0'+h:h 
    var m = parseInt(t%3600/60)
    m = m<10?'0'+m:m
    var s = parseInt(t%60)
    s = s<10?'0'+s:s
    return h+':'+m+':'+s
}

expand.addEventListener('click',function(){
    player.webkitRequestFullScreen()
})

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Audio/Video 標簽屬性及自定義（進度條、播放、快進、全屏）自定義視頻

vue+flvjs實現自定義控制條的流媒體播放器 CSS控制 video 隱藏、顯示進度條、播放按鈕、全屏按鈕 silverlight自定義控件之多媒體視頻播放器【轉】CSS_控制 video 標簽的控制欄組件（隱藏、顯示進度條、播放按鈕、全屏按鈕等）【Android-視頻播放】實用vitamio自定義控制條位置【WinForm】自定義控件（進度控制條） HTML5實現video標簽的自定義播放進度條 Android：webView加載h5網頁視頻，播放不了，以及橫屏全屏的問題和實現自定義加載進度條的效果