HTML5入门

《精通HTML5编程》第三章:介绍Audio和Video标签

字号+ 作者: 来源: 2014-11-16 20:49 我要评论( )

这两个标签提供了在浏览器中不使用插件播放视频和音频的特性。书中提到了那场著名的HTML5视频格式大战,最后不同的浏览器还是选择了支持不同的格式。 各浏览器对编码格式的支持

 这两个标签提供了在浏览器中不使用插件播放视频和音频的特性。书中提到了那场著名的HTML5视频格式大战,最后不同的浏览器还是选择了支持不同的格式。

各浏览器对编码格式的支持:

浏览器对媒体格式的支持

浏览器对媒体格式的支持

两个标签的实际使用,请参考w3school的教程。

http://www.w3school.com.cn/html5/html5_audio.asp
http://www.w3school.com.cn/html5/html5_video.asp

检测浏览器支持:
var hasVideo = !!(document.createElement(‘video’).canPlayType);

回退:

XML/HTML Code复制内容到剪贴板
  1. <video src=”video.ogg”>  
  2. <object data=”videoplayer.swf” type=”application/x-shockwave-flash”>  
  3. <param name=”movie” value=”video.swf”/>  
  4. </object>  
  5. </video>  

如果浏览器不支持HTML5的浏览器会载入flash标签,支持的则会优先选择HTML5的video标签。但这样必须准备两套视频格式了。

同样对于audio元素,不同的浏览器支持不同的格式,可以提供两种不同的格式供浏览器选择。

XML/HTML Code复制内容到剪贴板
  1. <audio controls>  
  2. <source src=”johann_sebastian_bach_air.ogg”>  
  3. <source src=”johann_sebastian_bach_air.mp3″>  
  4. An audio clip from Johann Sebastian Bach.  
  5. </audio>  

非常酷的实例:

最后书里面提供了一个canvas和video标签结合的实例:视频时间线浏览器,非常酷。使用video元素播放视频,然后用canvas显示视频的缩略图。在这个程序中作者使用一个特性,使用video标签对应的js对象代替img对象直接将视频的一帧绘制到canvas。

应用示例

应用示例

书中提到的代码可以再这里下载

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 《精通HTML5编程》第十一章:尚未广泛支持的新特

    《精通HTML5编程》第十一章:尚未广泛支持的新特

    2014-11-16 20:49

  • 《精通HTML5编程》第十章:离线应用和尚未广泛支

    《精通HTML5编程》第十章:离线应用和尚未广泛支

    2014-11-16 20:49

  • 《精通HTML5编程》第九章:Web Sotrage API

    《精通HTML5编程》第九章:Web Sotrage API

    2014-11-16 20:49

  • 《精通HTML5编程》第八章:HTML5 Web Worker API

    《精通HTML5编程》第八章:HTML5 Web Worker API

    2014-11-16 20:49

网友点评
/