四、媒体元素
介绍：在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video>
1. 嵌入视/音频：
标签之间的内容表示后备内容，在浏览器不支持这两个媒体元素的情况下显示。
通过给按钮绑定事件控制视频的播放、暂停、切换、前进、后退、音量+-、倍速播放的功能：
<script>
// 获取视频dom节点
var video = document.querySelector('video');
// 获取btn按钮dom节点
var btns = document.querySelectorAll('button');
// 给按钮绑定事件
// 类数组对象-》数组
var arrList = Array.from(btns);
arrList.forEach(function (item) {
item.onclick = function (event) {
console.log(event.target.innerText);
var text = event.target.innerText;
switch (text) {
case '播放':
video.play()
break;
case '暂停':
video.pause()
break;
case '切换':
// video.paused是当前视频是否暂停，返回boolean值
if (video.paused) {
video.play()
} else {
video.pause()
}
break;
case '前进':
// currentTime是当前视频的播放时间点
video.currentTime += 5;
break;
case '后退':
video.currentTime -= 5;
break;
case '音量+':
if (video.volume > 0.9) {
video.volume = 1
} else {
video.volume += 0.1
}
break;
case '音量-':
if (video.volume < 0.1) {
video.volume = 0
} else {
video.volume -= 0.1
}
break;
case '倍速播放':
video.playbackRate = 2
break;
}
}
})
</script>
2. source:指定不同媒体来源
并不是所有的浏览器都支持所有媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一般要指定多种格式的媒体来源。
| src | 指播放媒体的URL地址 |
| type | 媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式。 |
例如：
<video id="video_1">
<source src="sample.ogv" type="video/ogg">
<source src="sample.mov" type="video/quicktime">
视频播放器无法使用
</video><audio id="audio_1">
<source src="" type="">
<source src="" type="">
音频播放器无法使用
</audio>3. 视频格式
视频格式与浏览器的支持当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
| 浏览器 | MP4 | WebM | Ogg |
| Internet | Explorer | YES | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES | YES | YES |
MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式：
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
检测编解码器的支持情况：canPlayType()
参数： 格式/编解码器字符串
返回值： probobly, maybe, ""
audio.canPlayType("audio/mpeg"); //取值可能为maybe
audio.canPlayType("audio/ogg; codecs=\"vorbis\""); //取值可能为probably4. 自定义媒体播放器
btn.onclick = function(){
if(player.paused){
player.play();
this.value = "暂停";
}else{
player.pause();
this.value = "播放";
}
};
//实时更新当前播放时间
setInterval(function(){
curtime.innerHTML = player.currentTime;
},250);
<div class="mediaplayer">
<div class="video">
<video id="player" width="400" height="300">
<source src="../../video/html5.mp4" type="video/mp4">
</video>
</div>
<div class="controls">
<input type="button" id="btn" value="播放"/>
当前时间：<span id="curtime">0</span>
总时长：<span id="duration">0</span>
</div>
</div>
注意：如果想在一段音乐播放后再播放另一段音频，必须在onfinish事件处理函数中调用play()方法
5. 音/视频属性：
src：指向要加载的媒体文件
width：video元素独有，播放器的宽度，以像素为单位
height：video元素独有，播放器的高度，以像素为单位
poster：video元素独有，当视频不可用时，可以使用该元素向用户展示一副替代用的图片。
（1）取值为boolean类型的：
autoplay ：取得或设置自动播放标志。
<video src="sample.mov" autoplay></video>bufferingThrottled：浏览器是否对缓冲进行节流
controls ：用于显示或隐藏浏览器自带的播放用的控制条。控制条具有播放，暂停等按钮。
<video src="sample.mov" controls></video>ended：表示媒体文件是否播放完毕
loop：表示媒体文件在播放完成后是否再从头开始播放(循环播放)
muted：媒体文件是否静音
paused：表示是否暂停
seeking：表示播放器是否正移动到媒体文件中的新位置
（2）取值为number类型的整数：
networkState表示当前媒体的网路连接状态，0表示空，1表示正在加载，2表示加载元数据，3表示已经加载了第一帧，4表示加载完毕
bufferingRate：下载过程中每秒钟平均接收到的位数
currentLoop ：媒体文件已经循环的次数
defaultPlaybackRate（浮点数）：设置或取得默认播放速度，默认为1.0秒(开发者可以改变)
duration媒体的总播放事件
totalBytes当前资源所需的总字节数
videoHeight返回视频的高度，只适用于video
videoWidth返回视频的宽度，只适用于video
readyState：表示媒体是否已经就绪。
0表示数据不可用，
1表示可以显示当前帧，
2表示可以开始播放，
3表示媒体可以从头到尾播放
4表示当前播放位置已经有数据可以播放，同时也获取到了可以让播放器前进的数据，而且浏览器确认媒体数据以某一种速度进行加载可以保证有足够的后续数据进行播放。
（3）浮点数：
currentTime 已经播放的秒数
playbackRate取得或设置当前的播放速度(用户可以改变)
start取得或者设置媒体文件中开始播放的位置，以秒为单位
volume取得或设置当前音量
（4）取值为其他
preload：在该属性中指定音视频数据是否预加载，如果使用预加载，浏览器会预先将视频或音频数据进行缓冲，这样可以加快播放速度。
值：auto 默认值，预先加载全部视频或音频
none 不进行预加载
metadata值预加载媒体的元数据(媒体字节数，第一帧，播放列表，持续时间等)
seekable：可以搜索的时间范围
played：目前为止已播放的时间
src：字符串，媒体文件的来源，任何时候都需要重写这个属性
buffered：返回一个对象，该对象实现TimeRanges接口，以确认浏览器是否已缓存媒体数据。多数情况下该对象表示的事件范围是一个单一的从0开始的范围。
bufferedBytes：字节范围，表示已下载的缓冲的字节范围的对象
currentSrc ：string，当前播放的媒体文件的URL，只读属性
6. 音/视频共有方法
play：播放媒体，自动将元素的paused属性的值变为false
pause：暂停播放，自动将元素的paused属性变为true
load：重新载入媒体进行播放，自动将元素的playbackRate属性的值变为defaultPlaybackRate属性的值，自动将元素的error值变为null
canPlayType：用来测试浏览器是否支持指定的媒体类型
var support = videoElement.canPlayType(type)参数：
type ：参数的指定方法与source元素的type参数指定方法相同，用播放文件的MIME类型来指定，可以在指定的字符串中加上表示媒体编码格式的codes参数
返回值：
空字符串：不支持此种媒体类型
maybe： 可能支持此种媒体类型
probably：确认支持此种媒体类型
7. 音/视频共有事件
abort：下载中断
canplay：可以播放时，readyState值为2
canplaythrough：播放可继续，而且应该不会中断，readyState值为3
canshowcurrentframe：当前帧已下载完毕，readyState值为1
detaunavailable：因为没有数据而不能播放；readyState值为0
durationchange：duration属性的值改变
emptied：网路连接关闭
empty：发生错误阻止了媒体下载
ended：媒体已播放到了末尾，播放停止
error：播放媒体发生错误时该事件被激发
下载期间发生了网络错误，只读属性
1 :媒体数据的下载过程中由于用户操作原因而被终止
2:确认媒体资源可用，但是在下载时出现网路错误，媒体数据的下载被终止
3:确认媒体资源可用，但是解码时发生错误
4 :媒体资源部可用或媒体资源不被支持
load ：所有媒体已经加载完毕，这个事件可能废弃，建议使用canplaythrough
loadeddata：媒体的第一帧已经加载完毕
loadedmetadata：媒体的元数据已经加载完毕
loadstart：下载已经开始
pause：播放已暂停
play：媒体已收到指令开始播放
playing：媒体已实际开始播放
progress：正在下载
ratechange：播放媒体的速度改变
seeked：搜索结束
seeking：正移动到新位置
stalled：浏览器尝试下载，但未收到数据
timeupdate：currentTime被以不合理或意外的方式更新
volumechange：volume属性值或muted属性值已改变
waiting：播放暂停。等待下载更多数据
扫一扫
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
