HTML5网页多媒体（ 音频，视频，旧版本浏览器提示，格式兼容，多媒体标签属性）

4. 网页多媒体

多媒体 embed（会使用）

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

4.1. 音频

• 定义音频播放组件

<audio src="要播放的音频文件"></audio>

4.2. 视频

• 定义播放视频组件

<video src="要播放的视频文件"></video>

4.3. 旧版本浏览器提示

• 如果HTML中遇到不能识别的标签，就会将该标签当做DIV(块级元素)
• 那么video中的innerHTML也就会直接显示在界面上
• 利用这个特点我们可以实现不支持video标签的浏览器提示

<video src="demo.mp4">
  <!-- 如果浏览器不识别video标签，以下内容可以直接显示在浏览器上 -->
  <p>抱歉，您的浏览器不支持视频播放！</p>
</video>

4.4. 格式兼容

• 每个浏览器的音视频格式支持不同（版权问题）
• 需要兼容更多的浏览器，可以通过定义多个<source>的方式实现
• html解析过程中会找其中第一个能认识的格式播放，一旦找到认识的视频格式，就不会再往后找了

<video controls width="500">
  <!-- 分析第一个source格式是否支持，如果支持则加载该文件，不支持继续往下解析 -->
  <source src="chrome.mp4">
  <source src="chrome.ogv">
  <source src="chrome.webm">
  <p>抱歉，您的浏览器不支持视频播放！</p>
</video>

• 因此不管是audio还是video都不要直接设置标签的src

4.5. 多媒体标签属性

属性	含义
controls	决定是否显示控制菜单
autoplay	自动播放
loop	循环播放
height/width	定义播放器的宽高，只会在视频标签中生效
preload	预加载 是否在页面加载完成并且没有开始播放时就开始加载文件，如果有自动播放属性则该属性无意义

4.6. 自定义播放器外观

1. 隐藏原生的控制菜单，也就是删除标签中的controls属性
2. 自己设计一套界面控制元素，比如播放按钮，音量控制开关之类
3. 为每个不同的控制元素注册对应的事件
4. 在事件中通过视频元素的API实现自定义播放器的效果
5. 具体的多媒体元素API表：

4.6.1. 方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

4.6.2. 属性

属性	描述
audioTracks	返回表示可用音轨的 AudioTrackList 对象
autoplay	设置或返回是否在加载完成后随即播放音频/视频
buffered	返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller	返回表示音频/视频当前媒体控制器的 MediaController 对象
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频/视频的 CORS 设置
currentSrc	返回当前音频/视频的 URL
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频/视频默认是否静音
defaultPlaybackRate	设置或返回音频/视频的默认播放速度
duration	返回当前音频/视频的长度（以秒计）
ended	返回音频/视频的播放是否已结束
error	返回表示音频/视频错误状态的 MediaError 对象
loop	设置或返回音频/视频是否应在结束时重新播放
mediaGroup	设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted	设置或返回音频/视频是否静音
networkState	返回音频/视频的当前网络状态
paused	设置或返回音频/视频是否暂停
playbackRate	设置或返回音频/视频播放的速度
played	返回表示音频/视频已播放部分的 TimeRanges 对象
preload	设置或返回音频/视频是否应该在页面加载后进行加载
readyState	返回音频/视频当前的就绪状态
seekable	返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频/视频中进行查找
src	设置或返回音频/视频元素的当前来源
startDate	返回表示当前时间偏移的 Date 对象
textTracks	返回表示可用文本轨道的 TextTrackList 对象
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象
volume	设置或返回音频/视频的音量

4.6.3. 事件

事件	描述
abort	当音频/视频的加载已放弃时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange	当音频/视频的时长已更改时
emptied	当目前的播放列表为空时
ended	当目前的播放列表已结束时
error	当在音频/视频加载期间发生错误时
loadeddata	当浏览器已加载音频/视频的当前帧时
loadedmetadata	当浏览器已加载音频/视频的元数据时
loadstart	当浏览器开始查找音频/视频时
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在已因缓冲而暂停或停止后已就绪时
progress	当浏览器正在下载音频/视频时
ratechange	当音频/视频的播放速度已更改时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
seeking	当用户开始移动/跳跃到音频/视频中的新位置时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
suspend	当浏览器刻意不获取媒体数据时
timeupdate	当目前的播放位置已更改时
volumechange	当音量已更改时
waiting	当视频由于需要缓冲下一帧而停止

// 获取界面上的video元素，所有的操作必须通过它实现
var video = document.getElementById('video');
var btn_play = document.getElementById('btn_play');
// 注册点击事件
// addEventListener 用于注册事件， 将事件属性的on去掉 作为第一个参数传入
btn_play.addEventListener('click', function() {
  video.play();
  btn_play.disabled = true;
  btn_pause.disabled = false;
});
var btn_pause = document.getElementById('btn_pause');
btn_pause.addEventListener('click', function() {
  video.pause();
  btn_play.disabled = false;
  btn_pause.disabled = true;
});
var btn_muted = document.getElementById('btn_muted');
btn_muted.addEventListener('click', function() {
  // 交互变化true或false
  video.muted = !video.muted;
  btn_muted.innerHTML = video.muted ? "取消静音" : "静音";
});
var volume = document.getElementById('volume');
volume.addEventListener('change', function(e) {
  // 拿一下当前volume的值
  video.volume = volume.value;
});
var btn_speed_up = document.getElementById('btn_speed_up');
btn_speed_up.addEventListener('click', function(e) {
  // 加速
  video.playbackRate += 0.1;
});
var btn_speed_down = document.getElementById('btn_speed_down');
btn_speed_down.addEventListener('click', function(e) {
  // 减速
  video.playbackRate -= 0.1;
});
var btn_forward = document.getElementById('btn_forward');
btn_forward.addEventListener('click', function(e) {
  // 前进5秒
  video.currentTime += 5;
});
var btn_back = document.getElementById('btn_back');
btn_back.addEventListener('click', function(e) {
  // 后退5秒
  video.currentTime -= 5;
});

// 注册视频播放状态变化事件
video.addEventListener('timeupdate', function() {
  // console.log(1111);
  progress.value = (video.currentTime / video.duration) * 100;
});

4.7. 全屏 API

• HTML5中提供了可以通过JS实现网页全屏的效果
• 具体的方式就是通过特定元素的requestFullScreen方法实现
• 由于在不同浏览器中该方法需要加上特定前缀
• 退出全屏通过exitFullScreen方法

// 全屏
function fullScreen(element) {
  if (element.requestFullScreen) {
    element.requestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.oRequestFullScreen) {
    element.oRequestFullScreen()
  } else if (element.msRequestFullScreen) {
    element.msRequestFullScreen()
  }
}
var btnFullScreen = document.getElementById('btn_fullscreen');
btnFullScreen.addEventListener('click', function() {
  fullScreen(video);
  // fullScreen(document.body);
});

4.8. SVG 了解*

1. iframe的作用就是在网页中挖个坑，在这个坑里再展示一个页面
2. svg本身也是文档 所以可以使用iframe的方式载入

---