HTML5VideoDOM入门体验-创新互联

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

仁化网站建设公司创新互联,仁化网站设计制作，有大型网站制作公司丰富经验。已为仁化1000+提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的仁化做网站的公司定做！
  1. <!DOCTYPE >
  2. <html>
  3. <head>
  4.     <title></title>
  6.     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
  8.     <script type="text/javascript">
  9.         $( 
  10.         function() { 
  11.             $(":button").click( 
  12.             function() { 
  13.                 var h; 
  14.                 switch ($(":button").index($(this))) { 
  15.                     case 0: 
  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.                     case 1: 
  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.                     case 2: 
  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.             "playing waiting ended play pause", 
  64.             function(e) { 
  65.                 var vObj = 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.                     case e.target.error.MEDIA_ERR_ABORTED: 
  82.                         $("ol>li:eq(3)").html("媒体资源获取异常"); 
  83.                         break; 
  84.                     case e.target.error.MEDIA_ERR_NETWORK: 
  85.                         $("ol>li:eq(3)").html("网络错误"); 
  86.                         break; 
  87.                     case e.target.error.MEDIA_ERR_DECODE: 
  88.                         $("ol>li:eq(3)").html("媒体解码错误"); 
  89.                         break; 
  90.                     case e.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.             "suspend abort progress", 
  102.             function(e) { 
  103.                 var vObj = 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.             "progress error abort", 
  110.             function(e) { 
  111.                 switch (e.target.readyState) { 
  112.                     case 0: 
  113.                         $("ol>li:eq(3)").html("当前播放位置无有效媒介资源"); 
  114.                         break; 
  115.                     case 1: 
  116.                         $("ol>li:eq(3)").html("加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放"); 
  117.                         break; 
  118.                     case 2: 
  119.                         $("ol>li:eq(3)").html("已获取到当前播放数据，但没有足够的数据进行播放"); 
  120.                         break; 
  121.                     case 3: 
  122.                         $("ol>li:eq(3)").html("已获取到后续播放数据，可以进行播放"); 
  123.                         break; 
  124.                     default: 
  125.                     case 4: 
  126.                         $("ol>li:eq(3)").html("可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端"); 
  127.                         break; 
  128.                 } 
  129.                 console.log(e); 
  130.             } 
  131.             ); 
  132.         } 
  133.         ); 
  136.     </script>
  138. </head>
  139. <body>
  140.     <video id="video1" autobuffer>
  141.     <source src="video-test.mp4" type="video/mp4" />
  142.     对不起你的浏览器不支持HTML5的新特性，要不你下载一个 
  143.     <a href="http://info.msn.com.cn/ie9/">IE9</a>？
  144.   </video>
  145.     <input type="button" value="播放" disabled />
  146.     <input type="button" value="缩小" disabled />
  147.     <input type="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值，可以得到不同的状态信息。具体的值，可以通过开发者工具获得，或看相关文档。

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前标题：HTML5VideoDOM入门体验-创新互联
本文来源：https://www.cdcxhl.com/article46/dssshg.html

成都网站建设公司_创新互联，为您提供网站收录、品牌网站制作、网站制作、做网站、静态网站、网站维护

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站托管运营

服务器托管知识

同城分类信息