html5多媒体播放器,走进HTML5-学习多媒体，带你实现视频播放器、音乐播放器功能(*^▽^*)...

欢迎关注个人我的博客分享一些前端技术、面试题、面试技巧等html

Web 中的音频和视频

自 21 世纪初以来，咱们的带宽开始可以支持任意类型的视频在早些时候，传统的 web 技术(如 HTML )不可以在 Web 中嵌入音频和视频，因此一些像 Flash 的专利技术在处理这些内容上变得很受欢迎。这些技术可以正常的工做，可是却有着一系列的问题，包括没法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。前端

传统的解决方案可以解决许多这样的问题，前提是它可以正确的工做,幸运的是，几年以后 HTML5 标准提出，其中有许多的新特性，包括 和 标签，以及一些 JavaScript 和 APIs 用于对其进行控制。git

音频标签

咱们能够在 html 文件中使用 标签来插入一个音频文件。github

复制代码

属性

autoplay 自动播放

复制代码

controls 设置控件

复制代码

preload 预加载

规定是在否在页面加载后载入资源，这个属性有三个值可选web

"none":不缓冲，不须要加载数据

"metadata": 仅缓存文件的元数据，诸如时长，比特率，帧大小这样的元数据，而不是媒体内容徐亚加载的

"auto": 页面加载后缓存媒体文件，浏览器应当加载它认为适量的媒体内容

复制代码

loop 循环播放

是否可让音频或者视频文件面试

复制代码

muted

会致使媒体播放时，默认关闭声音。浏览器

复制代码

多格式支持

对于不一样的浏览器对视频或者音频格式的支持不一样缓存

像 MP三、MP四、WebM这些术语叫作容器格式,他们是用不一样的方式来播放音频或视频的。也就是说这些容器是用不一样的音频轨道、视频轨道、元数据来呈现媒体文件的。安全

视频和音频都有不一样的格式app

WebM 容器一般包括了 Ogg Vorbis 音频和 VP8/VP9 视频

主要在 FireFox 和 Chrome 当中支持

MP4 容器一般包括 AAC 以及 MP3 音频和 H.264 视频

主要在 Internet Explorer 和 Safari 当中支持

老式的 Ogg 容器每每支持 Ogg Vorbis 音频和 Ogg Theora 视频

主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代

复制代码

如今咱们将 src 属性从 标签中移除，转而将它放在几个单独的标签 当中。在这个例子当中，浏览器将会检查 标签，而且播放第一个与其自身 codec 相匹配的媒体

视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

每一个 标签页含有一个 type 属性，这个属性是可选的,可是建议添加上这个属性——它包含了 标签文件的 MIME types,同时在浏览器检索的时候也会迅速的跳过那些不支持的格式，找到能正确播放的格式。

视频标签

标签与 标签的使用方式几乎彻底相同,有一些细微的差异咱们下边一一介绍

属性

width/height

控制视频的尺寸，可使用属性，也可使用 Css 来控制视频的尺寸。不管哪一种方式，视频都会保持它原始的纵横比。若是你设置的尺寸没有保持视频原始的长宽比，那么视频的边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

poster

当时视频不可用时，使用一张图片替代，不然是空白

指向了一个图像的URL，这个图像会在视频播放前显示。一般用于粗略的预览或者广告。

>

复制代码

当咱们使用了 autoplay 属性时，当页面一加载就播放视频的话，就不会看到 poster 的效果了。

脚本化

当咱们在元素上设置了 controls 属性时，浏览器会显示原生的浏览器控件，当你想要修改这些样式的时候，能够经过隐藏本地控件， JavaScript API 来进行相应的设置。

获取 Dom

// 获取到对应的 `dom` 元素

let audio = document.getElementById('audio')

复制代码

// 使用 js 建立标签

// audio 可使用 new 操做符

let audio = new Audio('音频文件')

let video = document.createElement('video');

复制代码

自定义控件

为了设置当前的控件样式，须要将默认的控件删除。

audio.removeAttribute('controls');

// 使用属性 Boolean 值

audio.controls = false

复制代码

// 其余的属性设置

audio.loop = 'loop'

audio.preload = 'auto'

audio.autoplay = true

复制代码

播放与暂停

经过使用play()和pause()方法来控制音频视频的播放和暂停,经过paused属性查询媒体播放状态

if (audio.paused) {

audio.play()

} else {

audio.pause()

}

复制代码

咱们使用if语句来检查视频是否暂停。若是视频已暂停，audio.paused属性返回true，包括在第一次加载时处于0的时间段都是视频的暂停状态。

当咱们在想实现视频中止功能时，点击中止，视频中止播放，播放时间返回0。无奈的是在 API 中并无中止的方法，咱们能够经过设置currentTime属性来设置当前的播放位置,将它设置为0，将会马上跳到该位置。

function stop(){

audio.pause()

audio.currentTime = 0

}

复制代码

播放速率

咱们能够经过设置播放速率，进而实现快退快进的功能。 playbackRate设置媒体文件播放时的速率。这用于实现让用户控制快放、慢放等。 正常播放速率乘以该值表示当前的播放速率，因此1.0表示一个正常的播放速率。

// 浮点数1.0 是 "正常速度"， 比 1.0 小的值使媒体文件播放的慢于正常速度，比1.0大的值使播放变得快于正常速度.

audio.playbackRate = 1.0

复制代码

也能够经过定时器，经过设置当前播放时间来实现快进快退

function backWard(){

// 快退

if(audio.currentTime <= 3) {

// 当资源已经回退到最初了

clearInterval(intervalRwd)

stop()

} else {

audio.currentTime -= 3

}

}

function forWard(){

// 快进

if(audio.currentTime >= audio.duration -3) {

// 当资源已经快进到最后了

clearInterval(intervalFwd)

stop()

} else {

audio.currentTime += 3

}

}

复制代码

更新当前播放时间

当须要设置播放器的显示时间时，咱们将运行一个函数，以便在元素播放过程当中timeupdate事件触发时更新当前播放时间和播放进度。

function setTime(){

// 首先咱们计算到当前的播放时间

let minutes = Math.floor(audio.currentTime / 60);

let seconds = Math.floor(audio.currentTime - minutes * 60);

let minuteValue;

let secondValue;

// 进行格式转换，当分钟小于10的时候，在前面加0

if (minutes < 10) {

minuteValue = '0' + minutes;

} else {

minuteValue = minutes;

}

// 秒数的格式设置

if (seconds < 10) {

secondValue = '0' + seconds;

} else {

secondValue = seconds;

}

// 进行时间值拼接，展现到页面

let audioTime = minuteValue + ':' + secondValue;

timer.textContent = audioTime;

// 进度条的长度计算

let barLength = timerWrapper.clientWidth * (audio.currentTime/audio.duration);

timerBar.style.width = barLength + 'px';

}

复制代码

音量

能够经过 volume 属性设置播放音量，介于0(静音)~1(最大音量)之间，默认为1。将 muted 属性设置为true则会进入静音属性(模式)，设置为false则会恢复以前指定的音量继续播放。

audio.volume=0.2;

复制代码

缓冲 TimeRanges对象

played 属性返回 TimeRanges 对象，表示已经播放(看过)的时间段 已播范围指的是被播放音频/视频的时间范围。若是用户在音频/视频中跳跃，则会得到多个播放范围。

buffered 属性返回 TimeRanges 对象，表示已经缓存的时间段 缓冲范围指的是已缓冲音视频的时间范围。若是用户在音视频中跳跃播放，会获得多个缓冲范围。

seekable 属性返回 TimeRanges 对象，表示用户能够调转的时间段 可寻址范围指的是用户在音频/视频中可寻址(移动播放位置)的时间范围。

// 返回起始时间点和结束时间点，单位是秒，其实参数为0

audio.played.start(0)

audio.played.end(0)

audio.buffered.start(0)

audio.buffered.end(0)

audio.seekable.start(0)

audio.seekable.end(0)

复制代码

媒体播放状态

paused 为 true 时，表示播放器暂停

seeking 为 true 时，表示播放器正在跳到一个新的播放点

ended 为 true 时，播放器播放完媒体会停下来

下面的代码肯定当前缓存内容的百分比

let percent_loaded = Math.floor(song.buffered.end(0) / song.duration * 100)

复制代码

事件

当音频/视频处于加载过程当中时，会依次发生如下事件：

loadstart 当浏览器开始查找资源时触发

durationchange 当资源时长已更改时

loadedmetadata 当浏览器获取完媒体的元数据时触发

loadeddata 浏览器已经加载完当前帧数据，准备播放时触发

progress 当浏览器正在下载资源时

canplay 当浏览器能够播放资源时

canplaythrough 当浏览器可在不因缓冲而停顿的状况下进行播放时

play 当资源已经开始播放时

pause 当资源暂停时

retechange 当资源播放速度已更改时

seeked 当用户已经移动/跳跃到音频/视频中的新位置时

stalled 当浏览器尝试获取媒体数据，但数据不可用时

volumechange 当音量发生改变时

error 当在资源加载期间发生错误时

ended 当播放结束时触发

兼容文件

在使用资源文件时，须要考虑到当前浏览器是否支持当前的文件格式，咱们可使用canPlayType()方法来作兼容

let a = new Audio()

if(a.canPlayType('audio/mp3')){

a.src = './audio.mp3';

a.play();

}

复制代码

当你看到这的时候是否是有种懵逼的感受，接下来给你送上两个demo源码看看这些API是怎么使用的吧 视频播放器插件和音乐播放器歌词滚动效果

但愿对读完本文的你有帮助、有启发，若是有不足之处，欢迎批评指正交流！

欢迎关注个人我的博客分享一些前端技术、面试题、面试技巧等

辛苦整理良久，还望手动点赞鼓励~

'摘抄'不是单纯的“粘贴->复制”，而是眼到，手到，心到的一字一句敲打下来。

博客声明:全部转载的文章、图片仅用于做者本人收藏学习目的，被要求或认为适当时，将标注署名与来源。若不肯某一做品被转用，请及时通知本站，本站将予以及时删除。