十分钟带你详细了解媒体API

lzhcoder
62 阅读4分钟

媒体API

在HTML5之前视频和音频通常是在浏览器上使用插件进行播放的，HTML5的媒体API提供了一种元素标签来包含音频和视频的标准，可以做到无插件播放。

首先HTML5媒体支持的格式

名称格式
MP3音频
MPEG4适用于音频、视频
Wav音频文件
Ogg媒体容器格式
WebM视频文件格式

目前对HTML5支持的常用音频格式有三种：

  1. MP3格式，文件后缀名为.mp3
  2. Ogg格式,文件后缀名为.ogg
  3. Wav格式,文件后缀名为.wav

对HTML5支持的常用视频格式有三种

  1. MPEG4格式，带有H.264视频编码和AAC音频编码，文件后缀名为.mp4
  2. Ogg格式，带有Theoras视频编码和Voribs音频编码，文件后缀名为.ogg
  3. WebM格式，带有VP8视频编码和Vorbis音频编码，文件后缀名为.webm

目前没有哪种音频格式和视频格式是能被所有浏览器支持，所以在开发过程中要明确用那种格式，或者准备好两种格式备用

音频标签

audio

<audio src="./songs/周杰伦 - 花海.mp3" controls></audio>

这样就可以播放歌曲了，src属性是歌曲的路径或者URL地址，controls属性是播放器控件，显示播放按钮、进度条等控件。

audio属性介绍

属性名称值解释
autoplayautoplay当前音频准备就绪后自动播放
controlscontrols显示播放、暂停按钮和声音调节控件
looploop当音频结束后自动重新播放
mutedmuted静音状态
preloadpreload音视频预加载、并准备播放、该属性不同时和autoplay使用
srcsrc播放音视频的url地址

音频多样性

可以在audio标签中使用source标签指定多个音频文件格式，浏览器会按照顺序来使用第一个可识别的格式文件

<audio controls>
        <source src="./songs/周杰伦 - 花海.ogg">
        <source src="./songs/周杰伦 - 花海.mp3">
        对不起，您的浏览器不支持播放
    </audio>

如果都不支持，那么就会显示下面的那行字

对不起，您的浏览器不支持播放

如果你不想要他自己的播放控件，可以使用javascript自定义控件

  •     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>媒体API的简单应用</title>
        <style>
    ​
        </style>
    </head>
    <body>
        <!-- controls 添加音乐播放器控件-->
        <audio id="music">
            <source src="./songs/周杰伦 - 花海.ogg">
            <source src="./songs/周杰伦 - 花海.mp3">
            对不起，您的浏览器不支持播放
        </audio>
        <button id="btn">播放</button>
        <script>
            let music=document.getElementById('music');
            let btn=document.getElementById('btn');
            btn.addEventListener('click',function(){
                if(music.paused){
                    music.play();
                    btn.innerHTML='暂停';
                }
                else{
                    music.pause();
                    btn.innerHTML='播放';
                }
            })
        </script>
    </body>
    </html>

    视频标签

    video

        <video src="./video/莫愁乡--（OfficialMusicVideo）亚细亚旷世奇才.mp4" controls></video>

视频video渲染.png 这样就可以播放视频了

属性名称值解释
autoplayautoplay当前视频准备就绪后自动播放
controlscontrols显示播放、暂停按钮和声音调节控件
looploop当视频结束后自动重新播放
preloadpreload音视频预加载、并准备播放、该属性不同时和autoplay使用
srcsrc播放音视频的url地址
width像素值视频宽度
height像素值视频高度

和音频标签一样，autoplay和perload不能同时使用，其他的都可以同时使用，如果没有指定视频大小，那么视频大小就会按照原尺寸来

js实现播放功能

首先除去控件显示，然后再手写按钮，用js来实现功能

<video src="./video/莫愁乡--（OfficialMusicVideo）亚细亚旷世奇才.mp4#t=100,105" id="mv"></video>
    <div>
        <button id="start">播放</button>
        <button id="big">画面放大</button>
        <button id="small">画面缩小</button>
    </div>

video自定义.png

#t=100,105——播放时间范围

这个是控制播放时间起止的，src=“url地址#t=StartTime,EndTime” ,这样写之后视频就会直接在规定的时间段内播放

然后再一一实现播放、画面放大、画面缩小的功能

播放功能

对视频是否在播放进行判断，然后再更改其中内容

//播放暂停功能
        start.addEventListener('click',function(){
            if(mv.paused){
                mv.play();
                start.innerHTML='暂停';
            }
            else{
                mv.pause();
                start.innerHTML='播放';
            }
            console.log(mv.offsetWidth);
        })

画面放大，缩小功能

改变width大小，即可实现放大缩小功能

//画面放大功能
        big.addEventListener('click',function(){
            mv.width=1200;
        })
        small.addEventListener('click',function(){
            mv.width=400;
        })

媒体文件播放时间跳转

使用媒体文件的currentTime属性来制造时间节点，进行时间的跳转

var mv=docment.getElementById("mv");
function changetime(){
    mv.currentTime=60;
    //跳转到60秒节点上
    mv.play();
}

获取媒体播放时间

使用媒体标签的seekable属性

  • seekable属性的start(index)方法用于获取媒体播放的开始时间
  • seekable属性的end(index)方法用于获取媒体播放的结束时间
  • 其中index表示媒体对象的来源序号，默认只有一个的情况下填数字0
//获取播放开始时间
mv.seekable.start(0);
//获取播放结束时间
mv.seekable.end(0);

注意：只有当媒体文件加载完后才可以使用（(mv.seekable.length > 0）

video时间显示.png

获取媒体播放的当前播放时间

played属性

获取播放的当前时间点

mv.played.end(0);

终止媒体文件的下载

//首先终止媒体文件的播放
mv.pause();
//然后去除媒体文件的src属性
mv.removeAttribute("src");
//或者把src设为空值
avatar
文章
阅读
粉丝