首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript控制video视频播放功能

JavaScript控制音频和视频的播放、暂停、音量

2023-10-21 11:50:15 投稿：yin

HTML<video>元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放,你也可以将<video>标签用于音频内容,在前端中实现音频和视频播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript来控制这些媒体元素的播放、暂停、音量等属性

在前端中实现音频和视频播放通常涉及使用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: 处理媒体事件

你还可以为媒体元素添加事件处理程序，以便在播放期间或播放结束等情况下执行特定的操作。例如，以下是为音频添加事件处理程序的示例：

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

audio.addEventListener('ended', () => {
  console.log('音频播放结束');
});

类似地，你可以为视频添加事件处理程序。

步骤 4: 自定义播放器界面

如果你希望自定义音频或视频播放器的界面，你可以使用HTML和CSS来创建自己的播放器控件，或者使用现成的第三方播放器库，如video.js或plyr。

这些步骤可以帮助你在前端网页中实现音频和视频播放功能。请注意，HTML5提供了许多内置的媒体元素属性和方法，使得处理音频和视频非常方便。你可以根据需要进一步扩展和自定义这些功能。

JavaScript控制<video>视频播放

实现功能如下：

（1）可以播放，暂停，停止视频。

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

（3）播放时有进度条，同时还能显示已播放时间。

（4）通过改变SRC改变播放的视频内容

代码如下：

<!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;
    }
  
    //进度条相关
    function progressUpdate(){
        var video = document.getElementById("videoPlayer");
  
        //动态设置进度条
        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>

总结

HTML <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

在不支持 video 元素的浏览器中，<video></video> 标签中间的内容会显示，作为降级处理。