视频和音频内容

时间  2019-11-17
标签 视频 音频 内容 繁體版
原文   原文链接

web 中的音频和视频

HTML5新增了两个与媒体相关的标签，让开发人员没必要依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是<audio>和<video>，且不被IE8-浏览器支持javascript

以视频文件举例，它包含了音频轨道、视频轨道和其余一些元数据(封面、标题、子标题、字幕等)html

使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将做为后备内容，在浏览器不支持这两个媒体元素的状况下显示java

<video> 标签

<video> 容许你简单的嵌入一段视频web

src同 <img> 标签使用方式相同，src 属性指向你想要嵌入网页当中的视频资源chrome

controls用户必须可以控制视频和音频的回放功能。你可使用浏览器提供的控制接口，同时你也能够在 JavaScript （JavaScript API）当中使用这些控制接口。浏览器

<video> 标签内的段落这个叫作后备内容 — 当浏览器不支持 <video> 标签的时候，它将会显示出来，它使咱们可以对旧的浏览器作一些兼容处理。缓存

多格式支持

不一样的浏览器对视频格式的支持不一样。网络

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

视频和音频都有不一样的格式，以下:ide

  • WebM 容器一般包括了 Ogg Vorbis 音频和 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。
  • MP4 容器一般包括 AAC 以及 MP3 音频和 H.264 视频。主要在 Internet Explorer 和 Safari 当中支持。
  • 老式的 Ogg 容器每每支持 Ogg Vorbis  音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代。

音频播放器将会直接播放音频文件,，例如 MP3 和 Ogg 文件。这些不须要容器。

面对不一样浏览器支持不一样格式咱们该怎么作呢？

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此连接</a>观看</p>
</video>

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

每一个 <source> 标签页含有一个 type 属性，这个属性是可选的，它包含了视频文件的 MIME types。浏览器会经过检查这个属性来迅速的跳过那些不支持的格式。

若是你没有添加 type 属性，浏览器会尝试加载每个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

其余 <video> 特性

width 和 height你能够用属性控制视频的尺寸，也能够用 CSS 来控制视频尺寸

autoplay这个属性会使音频和视频内容当即播放，即便页面的其余部分尚未加载彻底。

loop这个属性可让音频或者视频文件循环播放。

muted这个属性会致使媒体播放时，默认关闭声音。

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

preload

这个属性被用来缓冲较大的文件，有3个值可选：

  • "none" ：不缓冲
  • "auto" ：页面加载后缓存媒体文件
  • "metadata" ：仅缓冲文件的元数据

<audio> 标签

<audio> 标签与 <video> 标签的使用方式几乎彻底相同，有一些细微的差异好比下面的边框不一样

autoplay         自动播放
controls         显示控件
loop             循环播放
preload          音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
src              要播放的音频的URL

　[注意]<audio>元素不支持播放wma格式的文件

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此连接</a>收听。</p>
</audio>

<source>

　　为<video>和<audio>提供媒介资源

media     规定媒体资源的类型(没有浏览器支持)
src     　规定媒体文件的URL
type      规定媒体资源的MIME类型

经常使用类型

　　　　视频 [1]video/ogg [2]video/mp4 [3]video/webm

　　　　音频 [1]audio/ogg [2]audio/mpeg

使用<audio>和<video>至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将做为后备内容，在浏览器不支持这两个媒体元素的状况下显示

<video src="#">
    video player not available.
</video>

<audio src="#">
    audio player not available.
</audio>

由于并不是全部浏览器都支持全部媒体格式，因此能够指定多个不一样的媒体来源。为此，不用在标签中指定src属性，而是使用一个或多个<source>元素

<video>
    <source src="video.webm" type="video/webm; codecs='vp8,vorbis'">
    <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'">
    <source src="video.mp4">
    video player not available.
</video>

<audio>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mp3">
    audio player not available.
</audio>

　由于并不是全部浏览器都支持<audio>和<video>标签，因此更好的解决办法是有备选内容

<audio controls="controls" height="100" width="100">
    <source src="song.mp3" type="audio/mp3" />
    <embed height="100" width="100" src="song.mp3" />
</audio>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.mp4" width="320" height="240" />
  </object>
</video>

　　

显示音轨文本

<track>

　　<track>元素被看成媒体元素—<audio>和<video>的子元素来使用。它容许指定计时字幕（或者基于事件的数据），例如自动处理字幕

　　track 给媒体元素添加的数据的类型在kind属性中设置，属性值能够是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。一个media元素的任意两个track子元素不能有相同的 kind、srclang和 label属性

【default】

　　default属性规定该轨道是默认的，假如没有选择任何轨道

【kind】

　　kind属性表示轨道属于什么文本类型

captions 　　　　该轨道定义将在播放器中显示的简短说明
chapters    　　该轨道定义章节，用于导航媒介资源
descriptions   该轨道定义描述，用于经过音频描述媒介的内容，假如内容不可播放或不可见
metadata    　　该轨道定义脚本使用的内容
subtitles    　该轨道定义字幕，用于在视频中显示字幕

【label】

　　label属性表示轨道的标签或标题

【url】

　　URL属性表示字幕文件的URL

【srclang】

　　srclang属性表示轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的。中文为"zh"，英文为"en"

　　字幕文件书写格式以下所示，注意，毫秒位的3个0不能省略

WEBVTT

1
00:00:01.000 --> 00:00:08.000
欢迎来到小火柴的我的网站

<video width="320" height="240" controls="controls">
  <source src="mov.mp4" type="video/mp4" />
  <track src="cn_track.vtt" srclang="zh" default kind="captions" label="欢迎你">
  <object data="mov.mp4" width="320" height="240">
    <embed src="mov.mp4" width="320" height="240" />
  </object>
</video>

显示字幕

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们能够用来描述这个字符串将会在视频中显示的时间，甚至能够用来描述这些字符串的样式以及定位信息。这些字符串叫作 cues ，你能够根据不一样的需求来显示不一样的样式，最多见的以下：

subtitle
经过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。
captions
同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。
timed descriptions
将文字转换为音频，用于服务那些有视觉障碍的人 
WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

　让其与 HTML 媒体一块儿显示

  1. 以 .vtt 后缀名保存文件。
  2. 用 <track> 标签连接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时须要放在全部 <source> 标签以后。使用 kind 属性来指明是哪种类型，如 subtitles 、 captions 、 descriptions。而后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。

　

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

API

　　HTML5 DOM为<audio>和<video>元素提供了方法、属性和事件

方法

一、canPlayType()

　　检测浏览器是否能播放指定的音频或视频类型，返回值为下列之一：

'probable':浏览器最可能支持该类型
'maybe':浏览器也许支持该类型
'':浏览器不支持该类型

//经常使用值
video/ogg
video/mp4
video/webm
audio/mpeg
audio/ogg
audio/mp4
video/ogg;codecs="theora,vorbis"
video/mp4;codecs="avc1.4D401E,mp4a.40.2"
video/webm;codecs="vp8.0,vorbis"
audio/ogg;codecs="vorbis"
audio/mp4;codecs="mp4a.40.5"

<audio id="audio" src="song.mp3"></audio>    
<script>
var audio = document.getElementById('audio');
//probably
console.log(audio.canPlayType('video/ogg;codecs="theora,vorbis"'));
</script>

二、load()

　　从新加载音频或视频元素，用于在更改src来源或其余设置后对音频或视频元素进行更新

<audio id="audio" src="song.mp3" autoplay controls></audio>    
<script>
    var audio = document.getElementById('audio');
    audio.src = 'myocean.mp3';
    audio.load();
</script>

三、play()

　　开始播放音频或视频

四、pause()

　　暂停当前播放的音频或视频

<button onclick = 'audio.play();'>播放</button>
<button onclick = 'audio.pause();'>暂停</button>
<audio id="audio" src="myocean.mp3" controls></audio>

属性

　　[注意]全部属性中，只有videoWidth和videoHeight是当即可用的，在音视频的元数据加载后，其余属性才可用

【只读】

一、buffered

buffered.length//获取已缓冲范围的数量
buffered.start(index)//获取某个已缓冲范围的开始位置
buffered.end(index)//获取某个已缓冲范围的结束位置
buffered.end(0)//获取当前已缓冲的秒数

<button>获取缓冲时间</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
    alert(audio.buffered.end(0));
}
</script>

二、currentSrc

　　返回当前音频或视频的URL

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var audio = document.getElementById('audio');
//http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3
setInterval(function(){
    console.log(audio.currentSrc);    
},1000); 
</script>

三、ended

　　返回音频或视频是否已结束

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.ended);
}    
</script>

四、duration

　　返回当前音频或视频的长度(以秒计)，若是未设置则返回NaN

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//NaN
console.log(audio.duration);
//317.022041
setTimeout(function(){
    console.log(audio.duration);
},1000);

五、networkState

　　返回音频或视频当前网络状态

networkState:0(还没有初始化)
networkState:1(已选取资源，但并未使用网络)
networkState:2(正在下载数据)
networkState:3(未找到资源来源)

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//3
console.log(audio.networkState)
//1
document.onclick = function(){
    console.log(audio.networkState);
}
</script>

六、paused

　　返回音频或视频是否已暂停

paused:true;(已暂停)
paused:false;(未暂停) 

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
console.log(audio.paused)
document.onclick = function(){
    console.log(audio.paused);
}
</script>

七、played

　　已播范围是指音频或视频的时间范围。若是用户在音频或视频中跳跃，会得到多个播放范围

played.length(得到音频或视频已播放范围的数量)
played.start(index)(得到某个已播范围的开始位置)
played.end(index)(得到某个已播范围的结束位置)

[注意]首段已播范围的下标是0

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.played.end(0));
}
</script>　

八、readyState

　　返回音频或视频的当前就绪状态

readyState:0(没有关于音频或视频是否就绪的信息)
readyState:1(关于音频或视频就绪的元数据)
readyState:2(关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧)
readyState:3(当前及至少下一帧的数据是可用的)
readyState:4(可用数据足以开始播放)

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
//0
console.log(audio.readyState);
//4
document.onclick = function(){
    console.log(audio.readyState);
}
</script>

九、seekable

　　返回可寻址范围，可寻址范围是指用户在视频或音频中可寻址(移动播放位置)的时间范围。对于流视频，一般能够寻址到视频中的任何位置，即便其还没有完成缓冲

seekable.length(得到音频或视频中可寻址范围的数量)
seekable.start(index)(得到可寻址范围的开始位置)
seekable.end(index)(得到可寻址范围的结束位置)

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
document.onclick = function(){
    console.log(audio.seekable.end(0));
}
</script>

十、seeking

seeking:true(用户正在寻址)
seeking:false(用户没有在寻址)

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
audio.onseeking = function(){
    console.log(audio.seeking);    
}    
</script>

【可读写】

一、autoplay

autoplay:false(默认，不自动播放)
autoplay:true(自动播放)

二、controls

controls:false(默认，不显示控件)
controls:true(显示控件)

三、crossOrigin

　　设置或返回CORS设置

四、currentTime

　　设置或返回音频或视频的当前位置(以秒计)

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var audio = document.getElementById('audio');
document.onclick = function(){
    console.log(audio.currentTime);    
    audio.currentTime = 5;
    console.log(audio.currentTime);
}; 
</script>

五、defaultMuted(只有chrome支持)

defaultMuted:true(初始静音)
defaultMuted:false(默认，初始不静音)

audio.defaultMuted = true;

六、muted

muted:true(静音)
muted:false(不静音)

<button onclick="audio.muted = !audio.muted">音量开关</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>

七、defaultPlaybackRate

defaultPlaybackRate:1(正常速度)
defaultPlaybackRate:0.5(半速)
defaultPlaybackRate:2(倍速)
defaultPlaybackRate:-1(向后正常速度)
defaultPlaybackRate:-0.5(向后半速)

var audio = document.getElementById('audio');
setTimeout(function(){
    audio.defaultPlaybackRate = 0.5;
    audio.load();    
},1000);

八、playbackRate

playbackRate:1(正常速度)
playbackRate:0.5(半速)
playbackRate:2(倍速)
playbackRate:-1(向后正常速度)
playbackRate:-0.5(向后半速)

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
var array = [-1,-0.5,0.5,1,2];
var i = 0;
var audio = document.getElementById('audio');
document.onclick = function(){
    audio.playbackRate = array[i];
    console.log(audio.playbackRate);
    i++;
    i=i%5;
}

九、loop

loop:true(循环播放)
loop:false(默认，不循环播放)

十、preload

　　设置或返回是否在页面加载后当即加载音频或视频

preload:auto;(一旦页面加载，则开始加载音频或视频)
preload:metadata;(当页面加载后仅加载音频或视频的元数据)
preload:none;(页面加载后不加载音频或视频)

[注意]当设置autoplay时，该属性无效

十一、src

　　设置或返回音频或视频的当前来源

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>
console.log(audio.src);
document.onclick = function(){
    console.log(audio.src);
    audio.src = 'http://7xpdkf.com1.z0.glb.clouddn.com/song.mp3';
    audio.load();
    console.log(audio.src);
}    
</script>

十二、volume

　　设置或返回音频或视频的当前音量

volume(取得为0-1，0为静音，1为最大，默认为1)    

<button onclick = "if(audio.volume<=0.9)audio.volume+=0.1;">增大音量</button>
<button onclick = "if(audio.volume>=0.1)audio.volume-=0.1;">减少音量</button>
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>

事件

　　当音频或视频正在加载过程当中，会依次发生如下事件：

loadstart:提示浏览器开始寻找指定的音频或视频
progress:提示浏览器正在下载指定的音频或视频
durationchange:提示音频或视频的时长已改变
loadedmetadata:提示音频或视频的元数据已加载
loadeddata:提示音频或视频的当前帧已加载，但没有足够数据播放下一帧
canplay:提示浏览器可以开始播放指定的音频或视频
canplaythrough:提示音频或视频可以不停顿地一直播放
progress:提示浏览器正在下载指定的音频或视频

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>
<script>    
audio.onloadstart = function(){
    console.log('loadstart');
}
audio.ondurationchange = function(){
    console.log('durationchange');
}    
audio.onloadedmetadata = function(){
    console.log('loadedmetadata');
}    
audio.onloadeddata = function(){
    console.log('loadeddata');
}    
audio.onprogress = function(){
    console.log('progress');
}    
audio.oncanplay = function(){
    console.log('canplay');
}    
audio.oncanplaythrough = function(){
    console.log('canplaythrough');
}    
</script>

影响音频或视频数据加载的事件有如下几个：

abort:在音频或视频终止加载时触发
error:在音频或视频加载发生错误时触发
stalled:在浏览器尝试获取媒体数据，但数据不可用时触发
suspend:在音频或视频数据被阻止加载时触发(能够是完成加载后触发，或者由于被暂停)
empted:在发生故障而且文件忽然不可用时触发

<video id="video" src="http://7xpdkf.com1.z0.glb.clouddn.com/movie.mp4" controls></video>
<script>
setTimeout(function(){
    video.src='';
},2000);    
video.onabort = function(){
    console.log('abort');
}
video.onerror = function(){
    console.log('error');
}    
video.onstalled = function(){
    console.log('stalled');
}    
video.onsuspend = function(){
    console.log('suspend');
}    
video.onemptied = function(){
    console.log('emptied');
}
</script>

音频或视频控制按钮发生改变时触发如下事件:

play:音频或视频文件已经就绪能够开始播放时触发
playing:音频或视频已开始播放时触发
ended:音频或视频文件播放完毕后触发
pause:音频或视频文件暂停时触发
ratechange:播放速度改变进触发
seeked:指示定位已结束时触发
seeking:正在进行指示定位时触发
timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发]
volumechange:音量改变时触发
waiting:须要缓冲下一帧而中止时触发

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3" controls></audio>
<script>    
var i = 1;
document.onclick = function(){
    i+=0.1;
    audio.playbackRate = i;
}
audio.onended = function(){
    console.log('ended');
}
audio.onpause = function(){
    console.log('pause');
}    
audio.onplay = function(){
    console.log('play');
}    
audio.onplaying = function(){
    console.log('playing');
}    
audio.onratechange = function(){
    console.log('ratechange');
}    
audio.onseeked = function(){
    console.log('seeked');
}    
audio.onseeking = function(){
    console.log('seeking');
}    
audio.ontimeupdate = function(){
    console.log('timeupdate');
}    
audio.onvolumechange = function(){
    console.log('volumechange');
}    
audio.onwaiting = function(){
    console.log('waiting');
}    
</script>

　　

audio专有

　　<audio>元素在一个原生的javascript构造函数Audio，能够在任什么时候候播放音频。Audio和Image很像，但Audio不用像Image那样必须插入到文档中，只要建立一个新实例，并传入音频源文件便可

var audio = new Audio('test.mp3');   

<script>
var audio = new Audio('http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3');
audio.oncanplaythrough = function(){
    audio.controls = true;
    document.body.appendChild(audio);
}
// 为兼容IOS
audio.load()
</script>

特别注意的是，IOS不能直接使用oncanplaythrough事件，须要添加audio.load()方法，不然该事件不生效

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程