本节课主要讲解html5的音视频标签的使用方法，学完本节课，感想是，html5的音视频标签的很多方法、属性，api接口都是用javascript控制的。所以想灵活的使用这些功能就应该先学会使用javascript 。
音视频的发展史
早期：<embed>+<object>+文件
问题：不是所有浏览器都支持，而且embed不是标准。
现状：现在看很多音视频因为不同厂商的原因，所以都需要安装各自的插件，例如Realplay、window media 、Quick Time 、Flash
问题：每个厂商、标准、网站编码、格式都不相同，flash的出现解决了这个问题，但是由于flash占用资源大，电脑访问flash问题不大，但在移动终端访问时，用流量、电量太大，所以apple在07年决定任何设备将不再支持flash 。
Html5制定时，认为浏览器应该本身就支持音视频，音视频现在已经是web的一等公民。
视频格式的简介
1、html5支持的常见视频格式
视频的组成部分：画面、音频、编码格式
视频编码：H.264（高清、收费）、Theora（免费）、VP8（google开发、免费开源）
2、Html5支持的常见音频格式
音频编码：AAC（收费）、MP3（收费）、Vorbis（免费）
HTML5支持的格式
HTML5能在完全脱离插件的情况下播放音视频。但是不是所有格式都支持。
HTML5支持的视频格式：
Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件 ，支持的浏览器：F（火狐）、C（谷歌）、O（欧朋浏览器）
MPEG4=带有H.264视频编码+AAC音频编码的MPEG4的文件，支持的浏览器：S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式，支持的浏览器：I、F、C、O
<Video>的使用
1、方法一：<video src=”文件地址” controls=”controls”></video>
2、方法二：这种方法添加了一个提示，在浏览器不支持时显示。
<video src=”文件地址” controls=”controls”>
您的浏览器暂不支持video标签播放视频
</video>
3、方法三：放入多个视频资源，浏览器会从第一个开始判断是否支持播放，如果不支持就判断下一个，直到找到支持的视频。
<video controls=”controls” width=”300”>
<source src=”move.ogg” type=”video/ogg”>
<source src=”move.mp4” type=”video/mp4”>
您的浏览器暂时不支持video标签播放视频
</video>
Video标签的常用属性
Video标签的API方法
使用这些API方法时，需要用javascript控制，试用方法如下：
<video controls="controls" width="600" poster="cao.jpg" id="cao">
<source src="cao.mp4" type="video/mp4" >
您的浏览器暂时不支持video标签播放视频
</video>
<br />
<button onclick="bofang()">播放</button>
<button onClick="zanting()">暂停</button>
<script>
var video=document.getElementById('cao');
function bofang(){
video.play();
};
function zanting(){
video.pause();
};
</script>
Video的API属性
属性： 说明：
audioTracks 返回可用的音轨列表（MultipleTrackList对象）
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围（TimeRanger对象）
controller 返回当前的媒体控制器（MediaController对象）
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间，单位秒（快进快退10秒）
defaultMuted 缺省是否静音
defaultPlazyback Rate 播控的缺省倍速
duration 返回媒体的播放总时长，单位秒。
ended 返回当前播放是否结束标志
error 返回当前播放的错误状态
initialTime 返回初始播放的位置
loop 是否循环播放
mediaGroup 当前音视频所属媒体组（用来连接多个音视频标签）
muted 是否静音（video.muted=true）
networkState 返回当前网络状态
paused 是否暂停
playbackRate 播放的倍速（加速、减速播放）
played 当前播放部件已经播放的时间范围（TimeRanges对象）
preload 页面加载时是否同时加载音视频
readyState 返回当前准备状态
seekable 返回当前可跳转部件的时间范围（TimeRanges对象）
seeking 返回用户是否做了跳转操作
src 当前音视频文件的URL
startOffsetTime 返回当前的时间偏移（Date对象）
textTracks 返回可用的文本轨迹（TextTrackList对象）
videoTracks 返回可用的视频轨迹（VideoTrackList对象）
volume 音量值
Video的常用事件
事件 描述
abort 当音视频加载被异常终止时产生该事件
canplay 当浏览器可以开始播放该音视频时产生该事件
canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange 当媒体的总时长改变时产生该事件
emptied 当前播放列表为空时产生该事件
ended 当前播放列表结束时产生该事件
error 当加载媒体发生错误时产生该事件
loadeddata 当加载媒体数据时产生该事件
loadedmetadata 当收到总时长，分辨率和字轨等metadata时产生该事件
loadstart 当开始查找媒体数据时产生该事件
pause 当媒体暂停时产生该事件
play 当媒体播放时产生该事件
playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress 当获取到媒体数据时产生该事件
ratechange 当播放倍数改变时产生该事件
seeked 当用户完成跳转时产生该事件
seeking 当用户正执行跳转时操作的时候产生该事件
stalled 当试图获取媒体数据，但数据还不可用时产生该事件
suspend 当获取不到数据时产生该事件
timeupdate 当前播放位置发生改变时产生该事件
volumechange 当前音量发生改变时产生该事件
waiting 当视频因缓冲下一帧而停止时产生该事件
HTML5支持的音频格式
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的
HTML5支持的音频格式：
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
<audio>的使用
使用方法和video标签相同，有三种，使用方法如下：
1、<audio src="文件地址" controls="controls"></audio>
2、< audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ video >
3、< audio controls="controls" >
<source src="happy.MP3" type="video/mpeg" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>
audio的常见属性
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
本文链接：https://www.dnwfb.com/536.html，转载请注明出处。
评论0