HTML5多媒体（音频、视频播放）

SongYuLong的博客

已于 2022-02-22 15:37:42 修改

阅读量4.1k

点赞数 2

分类专栏： HTML5 文章标签：音视频 html5 html

于 2022-02-22 14:47:28 首次发布

本文链接：https://blog.csdn.net/songyulong8888/article/details/123068006

版权

HTML5 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

HTML5多媒体

HTML5多媒体
音频播放
视频播放
多文件播放
音频播放器
视频播放器

HTML5多媒体

在这里插入图片描述

音频播放

<!DOCTYPE html>
<html>
    <head>
        <title>音频播放</title>
    </head>
    <body>
        <h2>音频播放</h2>
        <audio src="birds.mp3" controls>
            您的浏览器不支持audio元素
        </audio>
    </body>
</html>

在这里插入图片描述

视频播放

<!DOCTYPE html>
<html>
    <head>
        <title>视频播放</title>
    </head>
    <body>
        <h2>视频播放</h2>
        <video src="9-tsr_h1080p.mov" width="800" height="480" controls>
            浏览器不支持video元素
        </video>
    </body>
</html>

在这里插入图片描述

多文件播放

<!DOCTYPE html>
<html>
    <head>
        <title>音频播放</title>
    </head>
    <body>
        <h3>音频播放</h3>
        <audio controls>
            <source src="1.ogg" type="audio/ogg" media="aaa"/>
            <source src="1.mp3" type="audio/mpeg" />
            <source src="1.wav" type="audio/x-wav" />
        </audio>
    </body>
</html>

音频播放器

<!DOCTYPE html>
<html>

<head>
    <title>音频播放器</title>
    
</head>

<body>
    <script type="text/javascript">
        // 定义能播放的所有音频
        var musics = [
            "1.mp3",
            "brids.mp3",
            "161939.mp3"
        ];
        // 定义正在播放的音频文件的索引
        var index = 0;
        // 记录顺序播放、随机播放变量
        var playType="sequence";
        window.onload = function () {
            var typeSel = document.getElementById("typeSel");
            // 当用户更改下拉菜单选项时，改变播放方式
            typeSel.onchange = function () {
                window.playType = typeSel.value;
            }
            var player = document.getElementById("player");
            // 页面加载时播放第一个音频
            player.src = musics[index];
            player.onload = function () {
                if (playType == "random") {
                    // 计算下一个随机数
                    index = Math.floor(Math.random() * musics.lenght);
                    // 随机播放下一个音频
                    player.src = musics[index];
                }
                else {
                    // 播放下一个音频
                    player.src = musics[++index % musics.length];
                }
                // 播放音频
                player.play();
            }
        }
    </script>

    <h2>音频播放器</h2>
    <select name="typeSel" id="typeSel" style="width: 160px;">
        <option value="sequence">顺序播放</option>
        <option value="random">随机播放</option>
    </select><br>
    <audio id="player" controls>
        浏览器不支持audio元素
    </audio>
</body>

</html>

在这里插入图片描述

视频播放器

<!DOCTYPE html>
<html>
    <head>
        <title>视频播放器</title>
    </head>
    <body>
        <h2>视频播放器</h2>
        <video src="9-tsr_h1080p.mov" id="mv" width="800" height="480" loop>
            浏览器不支持video元素
        </video><br>

        <input type="button" id="bn" value="播放" /><span id="detail"></span>秒
        <script type="text/javascript">
            var bn = document.getElementById("bn");
            var mv = document.getElementById("mv");
            var detail = document.getElementById("detail");
            // 为video元素的ontimeupdate事件绑定监听器
            mv.ontimeupdate = function()
            {
                detail.innerHTML = mv.currentTime + "/" + mv.duration;
            };
            bn.onclick = function()
            {
                if (mv.paused)
                {
                    mv.play();
                    bn.value = "暂停";
                }
                else
                {
                    mv.pause();
                    bn.value = "播放";
                }
            }
        </script>
    </body>
</html>

视频播放器

浏览器不支持video元素

    <input type="button" id="bn" value="播放" /><span id="detail"></span>秒
    <script type="text/javascript">
        var bn = document.getElementById("bn");
        var mv = document.getElementById("mv");
        var detail = document.getElementById("detail");
        // 为video元素的ontimeupdate事件绑定监听器
        mv.ontimeupdate = function()
        {
            detail.innerHTML = mv.currentTime + "/" + mv.duration;
        };
        bn.onclick = function()
        {
            if (mv.paused)
            {
                mv.play();
                bn.value = "暂停";
            }
            else
            {
                mv.pause();
                bn.value = "播放";
            }
        }
    </script>
</body>