视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]html5视频事件的实例

时间:2017-08-17 09:18酷播
[html5]html5视频事件的实例

[html5]html5视频事件的实例

  1. <!DOCTYPE html > 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <meta name="author" content="boloog" /> 
  6. <meta name="format-detection" content="telephone=no" /> 
  7. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" name="viewport" /> 
  8. <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"> 
  9. <title>视频事件的例子</title> 
  10. <!--页面制作 boloog | 创建:2015-04-01 | 博客：http://boloog.com/--> 
  11. </head> 
  12. <body>    
  13. <p>粘贴视频URL地址：</p> 
  14. <input type="text" id="videoFile" style="width: 600px;" value="http://gdzhcdn.vxinyou.com/down/video/vxinyou/ios_640x480.MP4" /> 
  15. <button id="loadVideo">点击开始加载视频</button><br/> 
  16. <video id="Video1" controls height="480" width="640" title="video element" poster="http://gdzhcdn.vxinyou.com/down/video/vxinyou/mlsd-a.jpg">       
  17.     HTML5 Video is required for this example 
  18. </video> 
  19. <div id="buttonbar" style="display: none; font-size:larger;")> 
  20.     <button id="restart">重新开始</button>  
  21.     <button id="slower">播放减慢</button> 
  22.     <button id="rew">倒回</button> 
  23.     <button id="play" title="Play button">播放</button> 
  24.     <button id="fwd">快进</button> 
  25.     <button id="faster">播放加快</button> 
  26.     <button id="mute">禁音</button>      
  27.     <br /> 
  28.     <label>复位回放速度: </label><button id="normal" title="Reset playback rate button">=</button>            
  29.     <br /> 
  30.     <label>  音量: </label> 
  31.     <button id="volDn"  title="Volume down button">-</button> 
  32.     <button id="volUp"  title="Volume up button">+</button> 
  33.     <div id="status">总时长（秒）: <span id="vLen"></span> <br /> 
  34.     当前时间:  <span id="curTime" title="Current time"></span><br /> 
  35.     剩余的时间: <span id="vRemaining" title="Remaining time"></span></div> 
  36. </div>    
  37. <div id="errorMsg" style="color:Red;"></div>   
  38. <div title="事件状态区域" > 
  39.     <label>oncanplaythrough: </label><span class="stats" id="cpt"></span><br /> 
  40.     <label>onloadstart: </label><span class="stats"  id="ls"></span><br /> 
  41.     <label>onprogress: </label><span class="stats"  id="pg"></span><br /> 
  42.     <label>onloadeddata: </label><span class="stats" id="ld"></span><br /> 
  43.     <label>onended: </label><span class="stats" id="ndd"></span><br /> 
  44.     <label>onemptied: </label><span class="stats" id="mt"></span><br /> 
  45.     <label>onstalled: </label><span class="stats" id="stall"></span><br /> 
  46.     <label>onwaiting: </label><span class="stats" id="waiting"></span><br /> 
  47.     <label>ondurationchange: </label><span class="stats" id="dc"></span><br />     
  48. </div> 
  49.  
  50. <h3>默认添加视频</h3> 
  51. <video id="Video2" controls height="480" width="640" 
    src    ='http://gdzhcdn.vxinyou.com/down/video/vxinyou/ios_640x480.MP4' 
    poster="http://gdzhcdn.vxinyou.com/down/video/vxinyou/mlsd-a.jpg">       
  52.     HTML5 Video is required for this example 
  53. </video> 
  54. <script> 
  55. var video = document.getElementById("Video1"); 
  56. var vLength; 
  57. var pgFlag = ""; // 用于进度跟踪 
  58. if (video.canPlayType) { // 支持HTML5视频测试 
  59.     // 视频的按钮的辅助函数    播放视频 
  60.     function vidplay(evt) { 
  61.         if (video.src == "") { // 初始源负载 
  62.             getVideo(); 
  63.         } 
  64.         if (video.paused) { // 播放文件，并显示暂停符号 
  65.             video.play(); 
  66.         } else { // 暂停其他文件，显示播放符号 
  67.             video.pause(); 
  68.         } 
  69.     } 
  70.  
  71.     // 从输入的表单地址获取视频文件 
  72.     function getVideo() { 
  73.         var fileURL = document.getElementById("videoFile").value; // 得到输入字段                     
  74.         if (fileURL != "") { 
  75.             video.src = fileURL; 
  76.             video.load(); // 如果HTML源元素的应用 
  77.             document.getElementById("play").click(); // 开始使用 
  78.         } else { 
  79.             errMessage("请输入有效的视频网址"); // 网址失败 
  80.         } 
  81.     } 
  82.  
  83.  
  84.     // 按钮帮助函数  跳过向前，向后，或重新启动 
  85.     function setTime(tValue) { 
  86.         // 如果没有视频加载，这将抛出一个异常 
  87.         try { 
  88.             if (tValue == 0) { 
  89.                 video.currentTime = tValue; 
  90.             } else { 
  91.                 video.currentTime += tValue; 
  92.             } 
  93.         } catch (err) { 
  94.             // 错误消息（ERR） 显示异常 
  95.             errMessage("视频内容可能无法加载"); 
  96.         } 
  97.     } 
  98.  
  99.     // 体积变化根据传入的值  
  100.     function setVol(value) { 
  101.         var vol = video.volume; 
  102.         vol += value; 
  103.         // 测试范围0 - 1避免异常 
  104.         if (vol >= 0 && vol <= 1) { 
  105.             // 如果有效的值，使用它 
  106.             video.volume = vol; 
  107.         } else { 
  108.             // 在其他替代的0或1 
  109.             video.volume = (vol < 0) ? 0 : 1; 
  110.         } 
  111.     } 
  112.     // 按钮事件  播放 
  113.     document.getElementById("play").addEventListener("click", vidplay, false); 
  114.     // 重新启动 
  115.     document.getElementById("restart").addEventListener("click", function() { 
  116.         setTime(0); 
  117.     }, false); 
  118.     // 向后跳过10秒钟 
  119.     document.getElementById("rew").addEventListener("click", function() { 
  120.         setTime(-10); 
  121.     }, false); 
  122.     // 向前跳过了10秒钟 
  123.     document.getElementById("fwd").addEventListener("click", function() { 
  124.         setTime(10); 
  125.     }, false); 
  126.     // 设置 src == 最新视频文件的URL 
  127.     document.getElementById("loadVideo").addEventListener("click", getVideo, false); 
  128.  
  129.     // 音量按钮 
  130.     document.getElementById("volDn").addEventListener("click", function() { 
  131.         setVol(-.1); // 下降10% 
  132.     }, false); 
  133.     document.getElementById("volUp").addEventListener("click", function() { 
  134.         setVol(.1); // 上升10% 
  135.     }, false); 
  136.  
  137.     // 播放速度按钮 
  138.     document.getElementById("slower").addEventListener("click", function() { 
  139.         video.playbackRate -= .25; 
  140.     }, false); 
  141.     document.getElementById("faster").addEventListener("click", function() { 
  142.         video.playbackRate += .25; 
  143.     }, false); 
  144.     document.getElementById("normal").addEventListener("click", function() { 
  145.         video.playbackRate = 1; 
  146.     }, false); 
  147.     document.getElementById("mute").addEventListener("click", function(evt) { 
  148.         if (video.muted) { 
  149.             video.muted = false; 
  150.         } else { 
  151.             video.muted = true; 
  152.         } 
  153.     }, false); 
  154.  
  155.     // 任何视频错误会失败的消息 
  156.     video.addEventListener("error", function(err) { 
  157.         errMessage(err); 
  158.     }, true); 
  159.     // 内容加载，显示按钮和设置的事件 
  160.     video.addEventListener("canplay", function() { 
  161.         document.getElementById("buttonbar").style.display = "block"; 
  162.     }, false); 
  163.  
  164.     // 显示视频时长时可用 
  165.     video.addEventListener("loadedmetadata", function() { 
  166.         vLength = video.duration.toFixed(1); 
  167.         document.getElementById("vLen").textContent = vLength; // 全局变量 
  168.     }, false); 
  169.  
  170.     // 显示当前剩余时间 
  171.     video.addEventListener("timeupdate", function() { 
  172.         // 当前时间 
  173.         var vTime = video.currentTime; 
  174.         document.getElementById("curTime").textContent = vTime.toFixed(1); 
  175.         document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1); 
  176.     }, false); 
  177.     // 停下来打事件控制按钮 
  178.     video.addEventListener("pause", function() { 
  179.         document.getElementById("play").textContent = "播放"; 
  180.     }, false); 
  181.  
  182.     video.addEventListener("playing", function() { 
  183.         document.getElementById("play").textContent = "暂停"; 
  184.     }, false); 
  185.  
  186.     video.addEventListener("volumechange", function() { 
  187.         if (video.muted) { 
  188.             // 如果静音，静音imageif显示没有静音，静音的图像显示不 
  189.             document.getElementById("mute").innerHTML = "打开"; 
  190.         } else { 
  191.             // 如果没有静音，静音的图像显示不 
  192.             document.getElementById("mute").innerHTML = "禁音"; 
  193.         } 
  194.     }, false); 
  195.     // 下载和播放状态事件。 
  196.     video.addEventListener("loadstart", function() { 
  197.         document.getElementById("ls").textContent = "开始"; 
  198.     }, false); 
  199.     video.addEventListener("loadeddata", function() { 
  200.         document.getElementById("ld").textContent = "数据加载"; 
  201.     }, false); 
  202.  
  203.     video.addEventListener("ended", function() { 
  204.         document.getElementById("ndd").textContent = "播放结束"; 
  205.     }, false); 
  206.  
  207.     video.addEventListener("emptied", function() { 
  208.         document.getElementById("mt").textContent = "视频复位"; 
  209.     }, false); 
  210.  
  211.     video.addEventListener("stalled", function() { 
  212.         document.getElementById("stall").textContent = "下载了"; 
  213.     }, false); 
  214.     video.addEventListener("waiting", function() { 
  215.         document.getElementById("waiting").textContent = "播放器等内容"; 
  216.     }, false); 
  217.     video.addEventListener("progress", function() { 
  218.         pgFlag += "+"; 
  219.         if (pgFlag.length > 10) { 
  220.             pgFlag = "+"; 
  221.         } 
  222.         document.getElementById("pg").textContent = pgFlag; 
  223.  
  224.     }, false); 
  225.     video.addEventListener("durationchange", function() { 
  226.         document.getElementById("dc").textContent = "时间改变"; 
  227.     }, false); 
  228.     video.addEventListener("canplaythrough", function() { 
  229.         document.getElementById("cpt").textContent = "准备好了整个视频"; 
  230.     }, false); 
  231. } else { 
  232.     errMessage("HTML5 Video is required for this example"); 
  233.     // 结束运行 
  234. } 
  235. // 显示一个错误信息 
  236.  
  237. function errMessage(msg) { 
  238.     // 显示一个5秒错误消息，然后清除它 
  239.     document.getElementById("errorMsg").textContent = msg; 
  240.     setTimeout("document.getElementById('errorMsg').textContent=''", 5000); 
  241. } 
  242. </script> 
  243.  
  244. </body> 
  245. </html> 

 来源：http://boloog.com/demo/html5video/

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器