`
bcyy
  • 浏览: 1885769 次
文章分类
社区版块
存档分类
最新评论

HTML5 Video DOM 入门体验

 
阅读更多

HTML5的一个新特性就是内置对多媒体的支持，<video> 元素很好用，也支持了不错的API接口，下面用了一个案例来说明怎么对<video> 元素的控制。

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <title></title>
  6. <scriptsrc="js/jquery-1.7.1.min.js"type="text/javascript"></script>
  8. <scripttype="text/javascript">
  9. $(
  10. function(){
  11. $(":button").click(
  12. function(){
  13. varh;
  14. switch($(":button").index($(this))){
  15. case0:
  16. if($("video")[0].paused){
  17. $("video")[0].play();
  18. $(this).val("暂停");
  19. }
  20. else{
  21. $("video")[0].pause();
  22. $(this).val("播放");
  23. }
  24. break;
  25. case1:
  26. h=document.getElementsByTagName("video")[0].height==0?
  27. document.getElementsByTagName("video")[0].videoHeight-10:
  28. document.getElementsByTagName("video")[0].height-10;;
  29. document.getElementsByTagName("video")[0].height=h;
  30. document.getElementsByTagName("video")[0].videoHeight=h;
  31. break;
  32. case2:
  33. h=document.getElementsByTagName("video")[0].height==0?
  34. document.getElementsByTagName("video")[0].videoHeight+10:
  35. document.getElementsByTagName("video")[0].height+10;;
  36. document.getElementsByTagName("video")[0].height=h;
  37. document.getElementsByTagName("video")[0].videoHeight=h;
  38. break;
  39. }
  40. }
  41. );
  42. }
  43. );
  46. $(
  47. function(){
  48. $("#video1").on(
  49. "canplay",
  50. function(e){
  51. $(":button").removeAttr("disabled");
  52. console.log(e);
  53. }
  54. );
  55. $("#video1").on(
  56. "canplaythrough",
  57. function(e){
  58. $("ol>li:eq(0)").html("全部加载完毕，你可以断网看电影了！");
  59. console.log(e);
  60. }
  61. );
  62. $("#video1").bind(
  63. "playingwaitingendedplaypause",
  64. function(e){
  65. varvObj=document.getElementById("video1");
  66. $("ol>li:eq(1)").html(vObj.duration+":"+vObj.startTime+":"+vObj.currentTime);
  67. console.log(e);
  68. }
  69. );
  70. $("#video1").on(
  71. "stalled",
  72. function(e){
  73. $("ol>li:eq(2)").html("你的网络不给力啊，正在等数据呢");
  74. console.log(e);
  75. }
  76. );
  77. $("#video1").on(
  78. "error",
  79. function(e){
  80. switch(e.target.error.code){
  81. casee.target.error.MEDIA_ERR_ABORTED:
  82. $("ol>li:eq(3)").html("媒体资源获取异常");
  83. break;
  84. casee.target.error.MEDIA_ERR_NETWORK:
  85. $("ol>li:eq(3)").html("网络错误");
  86. break;
  87. casee.target.error.MEDIA_ERR_DECODE:
  88. $("ol>li:eq(3)").html("媒体解码错误");
  89. break;
  90. casee.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
  91. $("ol>li:eq(3)").html("视频格式被不支持");
  92. break;
  93. default:
  94. $("ol>li:eq(3)").html("这个是神马错误啊");
  95. break;
  96. }
  97. console.log(e);
  98. }
  99. );
  100. $("#video1").on(
  101. "suspendabortprogress",
  102. function(e){
  103. varvObj=document.getElementById("video1");
  104. $("ol>li:eq(1)").html(vObj.duration+":"+vObj.startTime+":"+vObj.currentTime);
  105. console.log(e);
  106. }
  107. );
  108. $("#video1").on(
  109. "progresserrorabort",
  110. function(e){
  111. switch(e.target.readyState){
  112. case0:
  113. $("ol>li:eq(3)").html("当前播放位置无有效媒介资源");
  114. break;
  115. case1:
  116. $("ol>li:eq(3)").html("加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放");
  117. break;
  118. case2:
  119. $("ol>li:eq(3)").html("已获取到当前播放数据，但没有足够的数据进行播放");
  120. break;
  121. case3:
  122. $("ol>li:eq(3)").html("已获取到后续播放数据，可以进行播放");
  123. break;
  124. default:
  125. case4:
  126. $("ol>li:eq(3)").html("可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端");
  127. break;
  128. }
  129. console.log(e);
  130. }
  131. );
  132. }
  133. );
  136. </script>
  138. </head>
  139. <body>
  140. <videoid="video1"autobuffer>
  141. <sourcesrc="video-test.mp4"type="video/mp4"/>
  142. 对不起你的浏览器不支持HTML5的新特性，要不你下载一个
  143. <ahref="http://info.msn.com.cn/ie9/">IE9</a>？
  144. </video>
  145. <inputtype="button"value="播放"disabled/>
  146. <inputtype="button"value="缩小"disabled/>
  147. <inputtype="button"value="放大"disabled/>
  148. <ol>
  149. <li></li>
  150. <li></li>
  151. <li></li>
  152. <li></li>
  153. <li></li>
  154. </ol>
  155. </body>
  156. </html>
对Video的控制重要的方法就是play、paused、stop。重要的事件有：

canplay 通知用户可以播放了，但不一定资源全部下载好

canplaythrough 资源都下载完毕了

error 出错时候

事件参数中有一个target对象，他有一个readyState值，可以得到不同的状态信息。具体的值，可以通过开发者工具获得，或看相关文档。

分享到：
| Java 如何获取程序运行时的相对路径
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5入门教程.pdf

    ### HTML5入门教程知识点概述 #### 一、HTML5概览 - **定义与起源**：HTML5被视为HTML、XHTML以及HTML DOM的新标准。它标志着自1999年以来HTML语言的重要更新和发展。 - **合作开发**：HTML5是由W3C（World Wide ...

    html5从入门到精通

    JavaScript是实现HTML5功能的重要工具，通过DOM操作、AJAX异步请求等技术，可实现动态交互和富应用。 七、实战案例 通过实际项目，如制作响应式布局、多媒体播放器、地理定位应用等，加深对HTML5的理解和应用。 本...

    html5入门学习文档

    新特性应该基于HTML、CSS、DOM以及JavaScript这四大基础技术，这意味着HTML5的设计目标是强化这些基础，而非引入全新的编程语言。同时，HTML5减少了对外部插件如Flash的依赖，以提高跨平台的兼容性和网页性能。错误...

    HTML5+CSS3+JS入门教程 + 源代码 pdf

    HTML5、CSS3和JavaScript是现代网页开发的三大核心技术，它们共同构建了互联网上丰富多彩的交互式用户体验。这篇教程结合源代码，旨在帮助初学者快速入门这三门语言，并掌握实际开发技能。 HTML5（HyperText Markup...

    HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】

    这个压缩包文件“HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】”显然包含了丰富的学习资源，旨在帮助初学者快速掌握这三门技术，并通过实例进行实践。 HTML5（HyperText Markup Language 5...

    HTML5_入门

    ### HTML5 入门知识点详解 #### 一、HTML5 的历史与发展 - **HTML (HyperText Markup Language) 的起源**：HTML 是一种用于创建网页的标准标记语言，它由 Tim Berners-Lee 在 1990 年代初发明。 - **HTML2.0**：...

    《HTML5从入门到精通》中文学习教程.zip

    2. **多媒体支持**：HTML5提供了内建的音频和视频元素，和&lt;video&gt;，使得无需Flash或其他插件即可在网页中嵌入多媒体内容。同时，支持多种编码格式如MP4、WebM和Ogg。 3. **Canvas**：HTML5的元素为动态图形和交互式...

    HTML 5 从入门到精通

    Web Components是HTML5的一部分，它允许开发者封装自定义的UI组件，如自定义元素、模板（）、阴影DOM等，实现代码复用和模块化开发。 通过《HTML 5 从入门到精通》这本教程，读者不仅可以了解HTML5的基本语法，还能...

    html5移动开发入门经典教材pdf，包含中文与英文版本

    此外，HTML5的离线存储功能，如`localStorage`和`sessionStorage`，允许应用在用户离线时也能访问一部分数据，提高了用户体验。 HTML5还引入了WebSocket协议，实现了双向通信，使得实时应用（如聊天应用、在线游戏...

    HTML入门小白小游戏代码

    HTML5是现代网页开发的核心语言，它在网页内容结构化、多媒体集成以及增强用户体验方面具有显著优势。"HTML入门小白小游戏代码"是一个非常适合初学者实践的项目，它可以帮助你快速理解HTML5的基本语法和功能。 首先...

    HTML 5入门

    3. JavaScript基础：HTML5的许多新功能需要JavaScript来驱动，因此学习JavaScript语法和DOM操作是必不可少的。 4. 实战项目：通过制作简单的网页、动态效果或者小型应用来实践所学知识，逐步提升技能。 三、学习...

    HTML入门教程

    ### HTML5入门教程知识点 #### 一、HTML5概述 - **HTML5定义**：HTML5是下一代HTML标准，旨在成为HTML、XHTML以及HTML DOM的新标准。 - **历史背景**：HTML的上一个版本发布于1999年，随着网络技术的发展，HTML5...

    HTML5入门视频教程：第二章，工具及资料.rar

    这个“HTML5入门视频教程：第二章，工具及资料”是针对初学者设计的一系列教学资源，旨在帮助学习者快速掌握HTML5的基础知识和实践技巧。 在这一章中，你将学习到以下几个重要的HTML5知识点： 1. **HTML5的基本...

    HTML5大前端从入门到精通配套文档+教材+代码.zip

    这个压缩包“HTML5大前端从入门到精通配套文档+教材+代码.zip”包含了学习HTML5前端开发所需的各种资源，包括教程文档、教材和实际的代码示例。 首先，让我们深入了解HTML5的基础知识。HTML5的主要目标是使互联网...

    最新HTML5新手入门指南.docx

    JavaScript在HTML5中也得到了加强，DOM API使DOM操作更加简便，History API允许改变浏览器历史记录，配合AJAX实现无刷新页面导航。Modernizr是一个JavaScript库，用于检测浏览器对HTML5和CSS3特性的支持，帮助开发者...

    HTML入门教程（exe chm）

    "HTML入门教程（exe chm）"提供了两种格式的学习资料：`.chm` 和 `.exe`。`.chm` 文件是一种Windows平台下的帮助文件，由Microsoft开发，它将多个HTML页面、图片和其他资源打包成一个可搜索的离线文档。`.exe` 文件...

    html5+javascript+jQuery+php5+smarty完全中文手册+ThinkPHP快速入门手册打包下载

    HTML5、JavaScript、jQuery、PHP5和Smarty是Web开发中常用的技术栈，它们各自拥有丰富的功能和广泛的应用。下面将分别介绍这些技术的核心知识点，并结合ThinkPHP框架的快速入门，帮助你理解它们的重要性和实际应用。...

    html5IOS开发

    综上所述，HTML5在iOS开发中的应用为开发者提供了更多选择，降低了入门门槛，但同时也需要注意性能优化和用户体验，以确保应用的成功。通过不断学习和实践，开发者可以充分利用HTML5的特性，创造出既美观又实用的iOS...

    主题介绍网站，基于HTML5+css+js，入门级web开发项目.zip

    3. **多媒体支持**：HTML5的&lt;video&gt;和标签使得内嵌视频和音频变得简单，无需依赖Flash等外部插件。 4. **Canvas绘图**：HTML5的元素提供了一个基于JavaScript的画布，可以进行动态图形绘制和图像处理。 5. **SVG矢量...

Magicbox
Global site tag (gtag.js) - Google Analytics