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

本节是第四讲的第二十三小节，上一节课为大家介绍了JavaScript绘制图形的方法（Canvas API），本节将为大家介绍多媒体播放控制器的开发包括音频和视频。

HTML5视频和音频

HTML5提供了用于在文档中嵌入富媒体的元素 — <video>和<audio> — 这些元素通过自带的API来控制视频或音频的播放，定位进度等。<video>和<audio>元素允许我们把视频和音频嵌入到网页当中。就像我们在音频和视频内容文中展示的一样，一个典型的实现如下所示：

<video controls>

<source src="rabbit320.mp4" type="video/mp4">

<source src="rabbit320.webm" type="video/webm">

<p>Your browser doesn't support HTML5 video. Here is a <a href="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多媒体开发，更多示例请参见网站示例。跟着张员外讲编程，学习更轻松，不花钱还能学习真本领。