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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 部件 流程 SQL
查看: 198|回复: 3

[分享] HTML5 多媒体video,autio使用示例

[复制链接]

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
发表于 2018-2-28 17:55:37 | 显示全部楼层 |阅读模式
  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');

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


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

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

  69.                 //readState属性

  70.                 //seeking属性与seekable属性

  71.                 //currenTime属性
  72.                 //startTime属性

  73.                 //duration属性

  74.                 //play属性(开始时间,结束时间)
  75.                 //paused属性(true_暂停,false_播放)
  76.                 //ended属性(true_播放完毕,false_未完毕)

  77.                 //defaultPlaybackRate,playbackRate属性

  78.                 //volume,muted属性

  79.                 /*
  80.                     方法:
  81.                     play(),播放
  82.                     pause(),暂停
  83.                     load(),重新载入
  84.                 */

  85.                 //监听视频播放结束事件
  86.                 //注意这里不设置loop循环播放
  87.                 video.addEventListener('ended',function(){
  88.                     alert("播放结束");
  89.                 },true)

  90.                 var palyVideoBtn    = document.getElementById('palyVideo'),
  91.                     pauseVideoBtn   = document.getElementById('pauseVideo');
  92.                 //播放视频play()
  93.                 palyVideoBtn.onclick = function(){
  94.                     video.play();
  95.                 }
  96.                 //暂停视频pause()
  97.                 pauseVideoBtn.onclick = function(){
  98.                     video.pause();
  99.                 }

  100.                 /*
  101.                     canPlayType方法:
  102.                     空字符串——不支持
  103.                     maybe——可能支持
  104.                     probably:支持
  105.                 */
  106.                 var support = video.canPlayType("video/mp4");
  107.                 console.log(support);//maybe

  108.                 /*
  109.                     在媒体读取和播放的过程中,还有一系列的事件。
  110.                     对这些事件的捕捉:
  111.                     (1)监听的方式
  112.                     (2)获取事件句柄
  113.                 */

  114.             }
  115.         }
  116.         window.onload = page.init();
  117.     </script>
  118. </body>
  119. </html>
复制代码


回复

使用道具 举报

542

主题

5919

帖子

1万

积分

作者

Rank: 7Rank: 7Rank: 7

积分
13589
发表于 2018-2-28 14:00:09 | 显示全部楼层
回复 支持 反对

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-2-28 17:40:27 | 显示全部楼层
回复 支持 反对

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-2-28 17:41:00 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|重庆度量科技  本站关键词:快速开发平台

GMT+8, 2018-10-22 15:36 , Processed in 0.312497 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表