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

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 如何获取程序运行时的相对路径
评论
发表评论

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

相关推荐

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