HTML 多媒体API（音频，视频的属性，方法和实例）

最新推荐文章于 2023-11-23 15:47:17 发布

想被带飞的鱼

最新推荐文章于 2023-11-23 15:47:17 发布

阅读量595

点赞数

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

本文链接：https://blog.csdn.net/m0_62008199/article/details/123502631

版权

Javascript 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

多媒体API

1.引入多媒体

音频

<audio src="audio.mp3" controls preload></audio>

视频

视频的格式：MIME-type MP4 video/mp4 WebM video/webm Ogg video/ogg

<video src="video.mp4" width="320" height="200" controls preload></video>

2.属性

属性	描述
muted	设置当前媒体是否开静音，如果设置为 true 代表开启静音，false 为不开启。
autobuffer	设置为 true 后将实现自动缓冲。
controls	出现该属性则是显示控件，比如播放按钮
autoplay	设置为自动播放。即使设置了该属性，现在的浏览器也只允许在静默模式下才能自动播放。
preload	该视频在页面加载时进行加载，并预备播放（预加载）。如果使用 “autoplay”，则忽略该属性
loop	设置后将会重复播放。
poster	“URL“：设置视频的封面，没有播放时可以显示一张图片。
width	“pixels”:设置视频播放器的宽度
height	“pixels”:设置视频播放器的高度
volume	用于设置音量
currentTime	用于获取多媒体当前所播放的具体时间
playbackRate	该属性用于设置快进或者快退速度的数字值。值为1时表示以正常速度播放。
duration	用于查看该多媒体的持续时间，也就是时长为多久。

3.方法

方法	描述
play()	播放时触发的事件
pause()	暂停时触发的事件
load()	重新加载音频/视频元素。
addTextTrack()	向音频/视频添加新的文本轨道。
canPlayType()	检测浏览器是否能播放指定的音频/视频类型。

4.事件

事件	描述
timeupdate	当目前的播放位置已更改时触发。
volumechange	音量改变时触发
loademetadata	在多媒体的所有元数据被加载时会触发该事件

5.实例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频视频</title>
</head>

<body>
    <video src="./MP3/birds.mp4" id="video" controls autoplay></video>
    <br>
    <input type="button" value="播放" id="playBtn">
    <input type="button" value="静音" id="pauseBtn">
    <select name="" id="sheet">
        <option value="">播放速度</option>
        <option value="0.5">0.5</option>
        <option value="1">1</option>
        <option value="1.5">1.5</option>
        <option value="2">2</option>

    </select>
    <span id="text"></span>

    <!-- <audio src="./MP3/周杰伦 - 半岛铁盒.mp3" controls autoplay ></audio> -->

    <script>
        let video = document.getElementById("video");
        let playBtn = document.getElementById("playBtn");
        let sheetmain = document.getElementById("sheet");
        let sheet = document.querySelectorAll("#sheet>option");
        let time = document.getElementById("text");
        let pauseBtn = document.getElementById("pauseBtn");

        //暂停与播放
        let state = false;
        playBtn.onclick = function () {
            if (!state) {
                playBtn.value = "暂停";
                video.play();
                console.log(video.playbackRate);
            } else {
                playBtn.value = "播放";
                video.pause();
            }
            state = !state;
        }
        //播放的时间
        //如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全
        video.ontimeupdate = function () {
            console.log(video.currentTime);
            let hour = parseInt(video.currentTime / 3600).toString().padStart(2, "0");
            let minute = parseInt(video.currentTime % 3600 / 60).toString().padStart(2, "0");
            let Seconds = parseInt(video.currentTime % 3600 % 60).toString().padStart(2, "0");
            console.log(`${hour}：${minute}：${Seconds}`);
            time.innerHTML = `${hour}：${minute}：${Seconds}`;
        }

        //静音
        pauseBtn.onclick = function () {
            if (!state) {
                video.muted = false;
            } else {
                video.muted = true;
            }
            state = !state;
        }

        //播放速度
        sheetmain.onchange = function () {
            //     console.log(1);
            for (let i = 0; i < sheet.length; i++) {
                if (sheet[i].selected) {
                    video.playbackRate = sheet[i].value;
                    console.log(sheet[i], video.playbackRate);
                }
            }
        }
    </script>
</body>

</html>