关于js控制html5的vedio属性

最新推荐文章于 2024-03-24 10:00:00 发布

iimo

最新推荐文章于 2024-03-24 10:00:00 发布

阅读量1.5k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_41569151/article/details/105957698

版权

本文介绍如何使用JavaScript控制HTML5视频元素，包括播放、暂停、调整播放速度和音量的方法。通过示例代码展示了如何实现这些功能，适用于网页音视频应用开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要获取到元素

video = document.getElementsByTagName("video")[0];//因代码而异

播放和暂停

video.play();//播放

video.pause();//暂停

video.paused;//是否正在暂停，常用于切换播放和暂停

调整速率

video.playbackRate属性，默认值为1，调整该属性来调整速率，例如设为2即二倍速，设为0.5即0.5倍速

调整音量

video.volume属性，默认值为1，调整范围0-1，支持小数点。

贴代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>音频播放</title>
        <script>
            let video;
            window.onload = () => {
                video = document.getElementsByTagName("video")[0];
                console.log(video);
            };
            function shift() {
                console.log(video);
                video.paused ? video.play() : video.pause();
            }
            function speedUp() {
                video.playbackRate *= 2;
            }
            function speedDown() {
                video.playbackRate /= 2;
            }
            function volumeUp() {
                video.volume += 0.1;
            }
            function volumeDown() {
                video.volume -= 0.1;
            }
        </script>
    </head>
    <body>
        <video
            src="https://vdept.bdstatic.com/4a444148564c4a6274574c7761634754/4a67395636467551/74a616ad713d0af74eca8c6fde16bbdc3ad060d7f1f2f56be288605b97b487050429999ffbe916d3b3a0fc1227fdaee1f5c860c5853d77142c16afcd5a41436c.mp4?auth_key=1588766816-0-0-70f817a3c3f2d562365b8070e7a250d5"
        ></video>
        <br />
        <button onclick="shift()">播放</button>
        <button onclick="speedUp()">快放</button>
        <button onclick="speedDown()">慢放</button>
        <button onclick="volumeUp()">提高音量</button>
        <button onclick="volumeDown()">降低音量</button>
    </body>
</html>