|游戏开发之旅-JavaScript多媒体开发

本节是第四讲的第二十三小节，上一节课为大家介绍了JavaScript绘制图形的方法（Canvas API），本节将为大家介绍多媒体播放控制器的开发包括音频和视频。
HTML5视频和音频
HTML5提供了用于在文档中嵌入富媒体的元素 — <video>和<audio> — 这些元素通过自带的API来控制视频或音频的播放，定位进度等。 <video>和<audio>元素允许我们把视频和音频嵌入到网页当中。就像我们在音频和视频内容文中展示的一样，一个典型的实现如下所示：

<video controls>
<source src=https://mparticle.uc.cn/"rabbit320.mp4\" type=\"video/mp4\">
<source src=https://mparticle.uc.cn/"rabbit320.webm\" type=\"video/webm\">
<p>Your browser doesn't support HTML5 video. Here is a <a href=https://mparticle.uc.cn/"rabbit320.mp4\">link to the video</a> instead.</p>
</video>

本节主要学习我们最感兴趣的controls属性，它会启用默认的播放设置。如果没有指定该属性，则播放器中不会显示相关控件。你可能会觉得这个属性作用不大，但是它确实很有优势。使用原生浏览器控件的一个很大的问题在于，它们在各个浏览器中都不相同 — 对于跨浏览器的支持并不是很好！另一个问题是，在大多数浏览器中原生控件难以通过键盘来操作。你可以通过隐藏本地控件（通过删除controls属性），然后使用HTML ， CSS和JavaScript编写自己的代码来解决这两个问题。
HTMLMediaElement API
作为HTML5规范的一部分， HTMLMediaElement(包括了video和audio元素) API提供允许你以编程方式来控制视频和音频播放的功能—例如 HTMLMediaElement.play() HTMLMediaElement.pause()等。该接口对<audio>和<video>两个元素都是可用的，因为在这两个元素中要实现的功能几乎是相同的。
HTMLMediaElement API 常用属性及方法
autoplay//表示autoplay的HTML属性，表明在视频加载可用时是否不中断地自动播放资源
buffered//buffered属性会告诉浏览器哪一部分的媒体已经被下载（如果浏览器支持的话），按照标准会返回一个TimeRanges对象
controls//映射在HTML标签。 controls属性控制是否显示用户播放界面的控制 HTML
currentTime// 当前播放时间，单位为秒。为其赋值将会使媒体跳到一个新的时间。
defaultMuted//映射在HTML标签上。muted 属性表示媒体声音被播放时是否应该被静音。
defaultPlaybackRate//控制媒体的播放速度。 1.0表示正常的播放速度，如果值小于1.0 ，则播放速度会比”正常速度“慢，如果值大于1.0 ，则播放速度会比”正常速度“快。 0.0是一个无效的值，并且会抛出 NOT_SUPPORTED_ERR 错误。
duration//媒体以秒为单位的总长度时间，如果媒体不可用，则为0. 如果媒体可用，但时间长度未知值为NAN.
ended //表示媒体是否已经播放完毕。
error //MediaError 对象表示最近的错误，如果没有错误则值为 null 。
loop//会映射在HTML标签 loop 属性决定该媒体是否循环播放.
muted//静音时为true，否则是false
networkState//获取媒体时的网络状态 0- 还没数据；2-正在加载。
paused //指示媒体元素是否被暂停。
played//媒体可被播放的范围。返回TimeRanges类型。
volume//表示音频的音量。值从0.0（静音）到1.0（最大音量）。
preload//是DOMString反映preloadHTML属性的，指示应该预加载哪些数据（如果有）。可能的值有：none ， metadata ， auto 。
readyState //指示媒体的就绪状态。 0-没有资源的可用信息；1-已检索到足够的资源；2-数据可用于当前播放位置；3-当前回放的数据是可用的；4-足够的数据可供使用
seeking //返回Boolean ，指示媒体是否正在寻找新位置。
src//是DOMString反映srcHTML属性的，其中包含要使用的媒体资源的URL 。
fastSeek()//直接寻找给定的时间。
load()//将媒体重置为开始，并使用src属性或<source>元素从提供的来源中选择最佳的可用来源。
pause()//暂停媒体播放。
play()//开始播放媒体。
关于播放器实例的代码讲解请参照视频课程，以上内容部分摘自视频课程04网页游戏编程JavaScript-23多媒体开发，更多示例请参见网站示例。跟着张员外讲编程，学习更轻松，不花钱还能学习真本领。
【|游戏开发之旅-JavaScript多媒体开发】