度量快速开发平台-专业、快速的软件定制快开平台

标题: HTML5 多媒体video，autio使用示例 [打印本页]
作者: 张兴康    时间: 2020-2-28 14:00
作者: fteair    时间: 2020-2-28 17:40
作者: fteair    时间: 2020-2-28 17:41
作者: fteair    时间: 2020-2-28 17:55
标题: HTML5 多媒体video，autio使用示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AV</title>
  6. </head>
  7. <body>
  8.     <div class="content">
  9.         <p>注意:audio标签设置controls="controls"才可以再页面中显示</p>
  10.         <p>IE9开始支持</p>
  11.         <div class="audio">
  12.             <audio src="./other/audio.mp3" type="audio/mpeg" controls="controls" autoplay preload="auto" loop>
  13.                 不支持audio
  14.             </audio>
  15.         </div>
  16.         <div class="video">
  17.             <video src="./other/video.mp4" class="video" controls="controls" autoplay preload="metadata" poster="./other/img.jpg" width="500" id="videoElement">
  18.                 不支持video
  19.             </video>
  20.         </div>
  21.         <div class="networkState"></div>
  22.         <button id="getVideoURL">getVideoURL</button>
  23.         <button id="palyVideo">palyVideo</button>
  24.         <button id="pauseVideo">pauseVideo</button>
  25.     </div>
  26.     <script>
  27.         var page = {
  28.             init : function(){
  29.                 this.listener();
  30.             },
  31.             listener : function(){
  32.                 var video = document.getElementById('videoElement');

  34.                 //error属性：不能正常读取，使用媒体数据
  35.                 video.addEventListener('error', function(){
  36.                     var error = video.error;
  37.                     switch(error.code){
  38.                         case 1 :
  39.                             alert("视频的下载过程被中止");
  40.                             break;
  41.                         case 2 :
  42.                             alert("网络发生故障，视频的下载过程被中止");
  43.                             break;
  44.                         case 3 :
  45.                             alert('解码失败');
  46.                             break;
  47.                         case 4 :
  48.                             alert("媒体资源不可用或是媒体格式不被支持");
  49.                     }
  50.                 },false);


  53.                 //networkState属性:加载过程使用networkState属性读取当前网络状态
  54.                 video.addEventListener('progress',function(e){
  55.                     var networkStateDisplay = document.getElementById('networkState');
  56.                     if(video.networkState === 2){
  57.                         //计算已加载的字节数与总字节数
  58.                         networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "byte]";
  59.                     }
  60.                     else if(video.networkState === 3){
  61.                         networkStateDisplay.innerHTML = "加载失败";
  62.                     }
  63.                 },false);

  65.                 //使用currentSrc属性：读取媒体数据的URL地址(只读)
  66.                 var videoURL    = video.currentSrc,
  67.                     videoURLBtn = document.getElementById('getVideoURL');
  68.                 videoURLBtn.onclick = function(){
  69.                     //这里是空的，还不知道为什么???
  70.                     console.log(videoURL);
  71.                 }
  72.                 //buffered属性

  74.                 //readState属性

  76.                 //seeking属性与seekable属性

  78.                 //currenTime属性
  79.                 //startTime属性

  81.                 //duration属性

  83.                 //play属性(开始时间,结束时间)
  84.                 //paused属性(true_暂停，false_播放)
  85.                 //ended属性(true_播放完毕，false_未完毕)

  87.                 //defaultPlaybackRate,playbackRate属性

  89.                 //volume,muted属性

  91.                 /*
  92.                     方法：
  93.                     play(),播放
  94.                     pause(),暂停
  95.                     load(),重新载入
  96.                 */

  98.                 //监听视频播放结束事件
  99.                 //注意这里不设置loop循环播放
  100.                 video.addEventListener('ended',function(){
  101.                     alert("播放结束");
  102.                 },true)

  104.                 var palyVideoBtn    = document.getElementById('palyVideo'),
  105.                     pauseVideoBtn   = document.getElementById('pauseVideo');
  106.                 //播放视频play()
  107.                 palyVideoBtn.onclick = function(){
  108.                     video.play();
  109.                 }
  110.                 //暂停视频pause()
  111.                 pauseVideoBtn.onclick = function(){
  112.                     video.pause();
  113.                 }

  115.                 /*
  116.                     canPlayType方法:
  117.                     空字符串——不支持
  118.                     maybe——可能支持
  119.                     probably：支持
  120.                 */
  121.                 var support = video.canPlayType("video/mp4");
  122.                 console.log(support);//maybe

  124.                 /*
  125.                     在媒体读取和播放的过程中，还有一系列的事件。
  126.                     对这些事件的捕捉：
  127.                     (1)监听的方式
  128.                     (2)获取事件句柄
  129.                 */

  131.             }
  132.         }
  133.         window.onload = page.init();
  134.     </script>
  135. </body>
  136. </html>
复制代码






欢迎光临 度量快速开发平台-专业、快速的软件定制快开平台 (http://bbs.delit.cn/) Powered by Discuz! X3.2