JavaScript控制音頻和視頻的播放、暫停、音量

更新時間：2023年10月21日 11:50:15 投稿：yin

HTML<video>元素用于在HTML或者XHTML文檔中嵌入媒體播放器,用于支持文檔內(nèi)的視頻播放,你也可以將<video>標簽用于音頻內(nèi)容,在前端中實現(xiàn)音頻和視頻播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript來控制這些媒體元素的播放、暫停、音量等屬性

步驟 1: 添加HTML元素

首先，你需要在HTML中添加<audio>或<video>元素以容納你的音頻或視頻。例如：

<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video id="myVideo" width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

步驟 2: 使用JavaScript控制媒體播放

你可以使用JavaScript來控制這些媒體元素的播放、暫停和其他屬性。例如，以下是使用JavaScript控制音頻播放的示例：

// 獲取音頻元素
const audio = document.getElementById('myAudio');

// 播放音頻
function playAudio() {
  audio.play();
}

// 暫停音頻
function pauseAudio() {
  audio.pause();
}

// 設置音頻音量
function setVolume(volume) {
  audio.volume = volume;
}

步驟 3: 處理媒體事件

你還可以為媒體元素添加事件處理程序，以便在播放期間或播放結(jié)束等情況下執(zhí)行特定的操作。例如，以下是為音頻添加事件處理程序的示例：

audio.addEventListener('play', () => {
  console.log('音頻正在播放');
});

audio.addEventListener('ended', () => {
  console.log('音頻播放結(jié)束');
});

類似地，你可以為視頻添加事件處理程序。

步驟 4: 自定義播放器界面

如果你希望自定義音頻或視頻播放器的界面，你可以使用HTML和CSS來創(chuàng)建自己的播放器控件，或者使用現(xiàn)成的第三方播放器庫，如video.js或plyr。

這些步驟可以幫助你在前端網(wǎng)頁中實現(xiàn)音頻和視頻播放功能。請注意，HTML5提供了許多內(nèi)置的媒體元素屬性和方法，使得處理音頻和視頻非常方便。你可以根據(jù)需要進一步擴展和自定義這些功能。

JavaScript控制<video>視頻播放

實現(xiàn)功能如下：

（1）可以播放，暫停，停止視頻。

（2）可以改變播放速度（2倍速度加速播放，一半的速度慢速播放，正常速度播放）

（3）播放時有進度條，同時還能顯示已播放時間。

（4）通過改變SRC改變播放的視頻內(nèi)容

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>視頻播放控制</title>
</head>
<style>
    #durationBar{
        border:solid 1px #164900;
        width:450px;
        margin-bottom:5px;
    }
  
    #positionBar{
        height:20px;
        color:white;
        font-weight:bold;
        background:#2D9900;
        text-align:center;
    }
</style>
      
<script>
    //播放
    function play(){
        var video = document.getElementById("videoPlayer");
        video.play();
    }
  
    //暫停
    function pause(){
        var video = document.getElementById("videoPlayer");
        video.pause();
    }
  
    //停止
    function stop(){
        var video = document.getElementById("videoPlayer");
        video.pause();
        video.currentTime = 0;
    }
  
    //快放
    function speedUp(){
        var video = document.getElementById("videoPlayer");
        video.play();
        video.playbackRate = 2;
    }
  
    //慢放
    function slowDown(){
        var video = document.getElementById("videoPlayer");
        video.play();
        video.playbackRate = 0.5;
    }
  
    //正常速度
    function normalSpeed(){
        var video = document.getElementById("videoPlayer");
        video.play();
        video.playbackRate = 1;
    }
  
    //進度條相關(guān)
    function progressUpdate(){
        var video = document.getElementById("videoPlayer");
  
        //動態(tài)設置進度條
        var postionBar = document.getElementById("positionBar");
        postionBar.style.width = (video.currentTime / video.duration * 100) + "%";
  
        //設置播放時間
        displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + "秒";
    }
     
    function btnChangeA(){
        const video = document.getElementById('videoPlayer');
        video.src = 'test.mp4';
        video.load();
        video.play();
    }
    function btnChangeB(){
        const video = document.getElementById('videoPlayer');
        video.src = 'test2.mp4';
        video.load();
        video.play();
    }
</script>
  
<body>
    <video controls id="videoPlayer" width="450px" height="300"
        ontimeupdate="progressUpdate()">
    </video>
    <div id="durationBar">
        <div id="positionBar"><span id="displayStatus">0秒</span></div>
    </div>
    <button id="btnChange" onclick="btnChangeA()">播放A</button>
    <button id="btnChange" onclick="btnChangeB()">播放B</button>
      
    <button onclick="play()">播放</button>
    <button onclick="pause()">暫停</button>
    <button onclick="stop()">停止</button>
      
    <button onclick="speedUp()">快放</button>
    <button onclick="slowDown()">慢放</button>
    <button onclick="normalSpeed()">正常</button>
</body>
</html>