通过代码示例跟我学html5相关技术——html5中的视频和音频标签及应用实例

通过代码示例跟我学html5相关技术——html5中的视频和音频标签及应用实例内容摘要：

的数字版权管理问题 由于在 video和 audio标签中需要明确地给出媒体资源的 URL 地址，因此用户可以自由下载相关的视频 文件。 目前使用 HTML5 还不能防止媒体资源受限制的访问，在将来的某个时候可能在 HTML5 中会出现处理数据版权管理（ DRM）的规范的方法。 但目前还没有，因此 HTML5 视频目前并不适于那些想要保护视频内容的用户使用。 在实际应用中需要考虑的相关问题 兼容各个主流的浏览器的方法 （ 1）兼容新版的各个主流的浏览器的方法 为了能够实现在主流的浏览器中显示，一般需创建三种视频格式以实现对 Firefox、Safari/Chrome 和 IE 等浏览器的支持。 或者只需要提供两种不同格式的视频内容：向 Safari和 Inter Explorer 9 提供 MP4/ 格式视频，再向 Firefox， Chrome 和 Opera 提供 WebM格式视频。 目前的 Firefox浏览器也开始支持 Theora Ogg，但在版本 4 之后就开始支持 WebM格式了。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 12/27 页 12 （ 2）兼容于低版本浏览器如 IE IE IE6 等  方法之一：可以按照下述方法添加一个同一视频文件的链接。 video autoplay controls source src= type=video/mp4 source src= type=video/webm a href=如果不能在线播放本视频，可以点击下载离线播放 /a /video  方法之二：添加对 Flash Player 插件的支持，由相关的 Flash Player 插件实现在线播放。 video autoplay controls source src= type=video/mp4 source src= type=video/webm object type=application/xshockwaveflash data=?videoUrl=amp。 autoPlay=true param name=movie value=?videoUrl=amp。 autoPlay=true /object /video 因此，如果客户端所在的浏览器端系统中装有 Flash Player，就会在 Flash Player 中显示视频。 全屏播放和自适应屏幕的长宽比 （ 1）全 屏播放 全屏播放能够提升视觉体验并增加观看者的参与感，在许多的桌面浏览器中都使用了内置的控制机制实现全屏播放。 Firefox 使用右键菜单选项，而 Safari 则采用的是一个控制栏按钮。 在移动设备上，全屏技术被广泛应用。 iPad 上总是有一个全屏开关，而iPhone/Android 上的视频播放模式总是全屏的。 W3C 最近正在开发一个全屏 API 标准。 这个 API 可以将所有的 HTML 元素渲染成全屏模式，因此可以在视频中添加各种自定义控件。 Safari 和 Chrome 的最新版本已经支持这一API 了。 而 Firefox 10 也 将引入该 API。 （ 2）自适应屏幕的长宽比 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 13/27 页 13 显示器的长宽比与视频元素的大小通常并不匹配，因此如何控制视频在屏幕上的布局至关重要。 在 iOS 中，提供了一个内置的控件用于在视频原始大小和全屏播放模式间切换。 Opera 的 CSS3 objectfit 属性也是完成类似的功能的。 在其他的浏览器中，视频总是根据屏幕的尺寸调整大小。 视频和音频的常用控制的 JavaScript 函数 （ 1） load() 通常不必调用，除非是动态生成的元素，用来在播放前预加载或者重新加载由 src 属性所指定的资源。 （ 2） play() 除非音频 /视频已经暂停在其他位置，否则重头播放。 （ 3） pause() 暂停播放。 （ 4） canPlayType() 测试 video标签元素是否支持给定 MIME 类型的文件，下面的代码可以快速判断浏览器是否支持由 playType 类型字符串所指定的视频格式文件，其中的 playType 可以为video/mp video/webm 等类型的字符串。 var supportsFoolVideo=!!((39。 video39。 ).canPlayType(39。 playType39。 ))。 视频和音频标签对象所支持的部分只读属性 （ 1） duration 整个媒体文件的播放时长（ s），无法获取返回 NaN。 （ 2） paused 是否暂停，如果媒体文件当前被暂停，返回 true，否则返回 false。 （ 3） ended 是否结束，如果媒体文件已经播放完毕，返回 true。 （ 4） startTime 返回最早的播放时间，一般是 ，除非是缓冲过的媒体文件，并且一部分内容已经不再缓冲区，则不为 0。 （ 5） error 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 14/27 页 14 在发生错误的时候返回错误代码。 （ 6） currentSrc 以字符串的形 式返回当前正在播放或已经加载的文件。 （ 7） readyState HAVE_NOTHING 、 HAVE_METADATA 、 HAVE_CURRENT_DATA 、HAVE_FUTURE_DATA 和 HAVE_ENOUGH_DATA 等状态。 （ 8） seeking 是否正在 seeking。 （ 9） loop 是否循环播放。 video和 audio标签内部分可被 JavaScript 脚本程序修改并直接影响播放的属性 （ 1） autoplay 将媒体文件设置为创建后自动播放，或者查询是否已经设置为 autoplay。 （ 2） loop 设置为 true 表示循环播放。 或者查询。 （ 3） currentTime 返回从开始播放到现在所用的时间。 在播放过程中，设置 currentTime 的值可改变播放位置，并定位到媒体文件的特定播放位置。 （ 4） controls 显示或隐藏默认的播放控制条。 （ 5） volume 从 到 之间设置音量大小，或者查询返回当前的音量大小。 （ 6） muted 设置或消除静音，或者查询当前是否处于静音状态。 （ 7） autobuffer 设置为 true，代表通知播放器在媒体文件开始播放前，是否进行缓冲加载，如果媒体文件已经设置了 autoplay 则忽略此设置。 （ 8） src 返回当前的媒体文件资源的 URL 地址或设置当前媒体文件资源的 URL （ 9） defaultPlaybackRate 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 15/27 页 15 返回默认的回放速度，也可以重新设置。 （ 10） playbackRate 当前播放速度，如果重新设置，则马上改变。 video比 audio标签增加有如下的成员属性 （ 1） poster 在视频加载完成之前，代表视频内容图片 URL 地址。 类似于电影海报，该 特性可读写。 （ 2） width、 height 可以设置或者获得视频播放的屏幕区域的宽和高等尺寸信息。 （ 3） videoWidth、 videoHeight 返回视频的固有或自适应宽度和高度，此属性为只读属性。 除了这些之外， video标签还有一个 audio标签所不支持的特性：抓取图像帧。 但要与 Canvas 对象一起使用，并使用 drawImage()方法。 编程动态创建和控制 HTML5 的音频示例 通过脚本进行兼容性检测 var hasVideo=!!((39。 vedio39。 ).canPlayType)。 这段脚本会动态创建 vedio 元素，然后检查 canPlayType()函数是否存在。 通过“ !!”将结果转换为布尔值。 示例页面 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 title编程控制 HTML5 的音频示例页面 /title style type=text/css audioSourceInputTagID{ width:150px。 height:20px。 linehe。