多媒体_详解（audio/video）

最新推荐文章于 2024-04-16 10:16:48 发布

题词策

最新推荐文章于 2024-04-16 10:16:48 发布

阅读量560

点赞数 1

分类专栏：多媒体(audio/video) js

本文链接：https://blog.csdn.net/Elementsboy/article/details/106607203

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

多媒体(audio/video)

1 篇文章 0 订阅

订阅专栏

多媒体(audio)

audio

该标签往页面插入音频标签

语法:

<audio src="song.mp3" controls loop autoplay>浏览器不支持audio标签</audio>

浏览器对音频的兼容性
在这里插入图片描述

大约有80%的浏览器支持HTML5的audio标签，但是并没有一种统一的音频格式。从支持的格式来看，要让所有的浏览器可以播放audio元素上的音频，最佳的方式是提供MP3和Ogg两种格式

兼容代码如下：

<!--拥有两份源文件的音频播放器-->
    <audio controls>
       <source src="horse.ogg" type="audio/ogg">
       <source src="horse.mp3" type="audio/mpeg">
    </audio>

video

该标签往页面插入视频标签

<video src="song.mp3" controls loop autoplay>浏览器不支持audio标签</vide>

视频的兼容性
在这里插入图片描述

从浏览器支持的视频格式来看，最佳的方式是提供WebM和MP4两种格式的视频

–兼容代码如下：

<video width="320" height="240" controls>    
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.ogg" type="video.ogg">
    <!—向后兼容代码: -->      
    <iframe width="480" height="360" src="文件路径" frameborder="0" allowfullscreen></iframe>  
</video>

音频和视频共同享有属性和方法。

属性：
在这里插入图片描述
方法：

事件：

示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.min.css">
    <script src="js/flexible.js"></script>
</head>

<body>
    <div class="container">
        <div class="banner">
            <video width="100%" height="350" src="mp3/风中的节奏.mp4" autoplay controls></video>
        </div>
        <div class="duration"></div>
        <div class="controls">
            <p>快退</p>
            <p>上一个</p>
            <p>播放</p>
            <p>下一个</p>
            <p>快进</p>
            <p>x2</p>
            <p>静音</p>
        </div>
    </div>

    <script>
        // 获取到视频标签 dom
        let v = document.querySelector("video");

        let sum = [
            { "url": "mp3/a.mp4" },
            { "url": "mp3/video.mp4" },
            { "url": "mp3/b.mp4" },
            { "url": "mp3/音乐节.mp4" },
            { "url": "mp3/风中的节奏.mp4" }
        ];
        let index = 0;
        let time = 0;
        console.log(v.ended);
        

        // 当视频加载完成正常播放时执行
        v.oncanplaythrough = function () {
            // duration 文件总时长
            v.ontimeupdate = function () {
                let sum = Math.floor(v.duration);//总时长
                let start = Math.floor(v.currentTime); //当前位置
                time = start;
                document.querySelector(".duration").innerHTML = `${start}/${sum}`;
                console.log(v.ended);
            }

        }

        document.querySelector(".controls").onclick = function (e = event) {
            var ele = e.target || e.srcElement;
            // e.preventDefault();
            if (ele.innerHTML == "快退") {
                //点击快退了！
                v.currentTime = time - 3;
            } else if (ele.innerHTML == "上一个") {
                //点击上一个了！
                index--;
                index = index < 0 ? sum.length - 1 : index;
                v.src = sum[index].url;
                if (!v.paused) {
                    v.play();
                } else {
                    v.pause();
                }
            } else if (ele.innerHTML == "播放" || ele.innerHTML == "暂停") {
                console.log(v.paused);
                
                //点击上一个了！
                if (v.paused) {
                    v.play();
                    ele.innerHTML = "暂停";
                } else {
                    v.pause();
                    ele.innerHTML = "播放";
                }
            } else if (ele.innerHTML === "下一个") {
                //点击上一个了！
                index++;
                index = index > sum.length - 1 ? 0 : index;
                v.src = sum[index].url;
                if (v.paused) {
                    v.pause();
                } else {
                    v.play();
                }

            } else if (ele.innerHTML === "快进") {
                //点击上一个了！
                v.currentTime = time + 3
            }
            else if (ele.innerHTML === "静音" || ele.innerHTML === "音量") {
                //点击上一个了！
                if (ele.innerHTML === "静音") {
                    v.muted = true;
                    ele.innerHTML = "音量";
                } else {
                    v.muted = false;
                    ele.innerHTML = "静音";
                }

            }
            else if (ele.innerHTML === "x2" || ele.innerHTML === "x1") {
                //点击上一个了！
                if (ele.innerHTML === "x2") {
                    v.playbackRate = 2;
                    ele.innerHTML = "x1";
                } else {
                    v.playbackRate = 1;
                    ele.innerHTML = "x2";
                }
            }
        }
    </script>
</body>

</html>

题词策

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多媒体_详解（audio/video）

多媒体(audio)audio该标签往页面插入音频标签语法:<audio src="song.mp3" controls loop autoplay>浏览器不支持audio标签</audio>浏览器对音频的兼容性大约有80%的浏览器支持HTML5的audio标签，但是并没有一种统一的音频格式。从支持的格式来看，要让所有的浏览器可以播放audio元素上的音频，最佳的方式是提供MP3和Ogg两种格式兼容代码如下：<!--拥有两份源文件的音频播放器--&g
复制链接

扫一扫