HTML5 - video标签和audio标签

最新推荐文章于 2025-04-26 07:36:43 发布

陆讯

最新推荐文章于 2025-04-26 07:36:43 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wangzi11322/article/details/45305887

本文通过实例演示了HTML5中video与audio标签的基本用法，并提供了多种控制操作，如播放、暂停、快进快退等。同时，还介绍了如何使用JavaScript控制音视频播放，包括调整播放速度、音量等功能。

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

video标签和audio标签

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>video标签和audio标签</title>
    <head>
    <body>
        <h2>video标签的使用</h2>
        <!-- <video src="kobe.mp4" controls="controls">
            你的破浏览器可以退休了，赶紧升级吧！
        </video> -->
        <!-- <video controls  width="500px" autoplay loop poster="dog.jpg">
            <source src="kobe.mp4" type="video/mp4" />
            <source src="movie.ogg" type="video/ogg"/>
            你的破浏览器可以退休了，赶紧升级吧！
        </video> -->

        <h2>使用video标签的API</h2>
        <video src="kobe.mp4" controls="controls" id="video">
            你的破浏览器可以退休了，赶紧升级吧！
        </video>
        <br/>
        <input type="button" value="播放" onclick="playVideo()" />&nbsp;
        <input type="button" value="停止" onclick="stopVideo()" />&nbsp;
        <input type="button" value="快进10秒" onclick="forward()" />&nbsp;
        <input type="button" value="快退10秒" onclick="back()" />&nbsp;<br/>
        <input type="button" value="闭嘴" onclick="shutup(this)" />&nbsp;
        <input type="button" value="加速x2" onclick="fast()" />&nbsp;
        <input type="button" value="减速x2" onclick="slow()" />&nbsp;
        <input type="button" value="正常倍速" onclick="normal()" />&nbsp;<br/>
        <input type="button" value="大声点" onclick="up()" />&nbsp;
        <input type="button" value="小声点" onclick="down()" />&nbsp;

        <script>
            var video=document.getElementById("video");

            //播放视频
            function playVideo(){
                video.play();
            }

            //停止视频
            function stopVideo(){
                video.pause();
            }

            //快进10秒
            function forward(){
                video.currentTime+=10;
            }

            //快退10秒
            function back(){
                video.currentTime-=10;
            }

            //静音
            function shutup(obj){
                if(video.muted){
                    video.muted=false;
                    obj.value="闭嘴";
                }else{
                    video.muted=true;
                    obj.value="说话";
                }
            }

            //加速x2
            function fast(){
                video.playbackRate=2; //默认播放速度为1
            }

            //减速x2
            function slow(){
                video.playbackRate=1/2;
            }

            //正常倍速
            function normal(){
                video.playbackRate=1;
            }

            //大声点
            function up(){
                video.volume+=0.1; //声音值的范围为0-1
            }

            //小声点
            function down(){
                video.volume-=0.1; //声音值的范围为0-1
            }
        </script>

        <h2>audio标签的使用</h2>
        <audio src="wow.mp3" controls>
            你的破浏览器可以退休了，赶紧升级吧！
        </audio>
    </body>
</html>