视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

[html5]h5视频播放及video相关事件

时间:2017-10-12 14:31酷播
[html5]h5视频播放及video相关事件

播放效果截图：

浏览器对h5视频的支持情况》》

  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <meta http-equiv="expires" content="0">   
  6. <title>video播放视频以及相关事件</title>   
  7. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />   
  8. <style type="text/css">   
  9. .playVideo{   
  10.     margin: 100px;   
  11. }   
  12. </style>   
  13. </head>   
  14. <body>   
  15. <div class="playVideo">   
  16.     <video class="news_video" src="fayuan.mp4" controls=""></video>   
  17. </div>   
  18. <script type="text/javascript" src="jquery/jquery.min.js"></script>   
  19. <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>   
  20. <script type="text/javascript">   
  21. $(function(){   
  22.    
  23.     playVideo();   
  24.    
  25.     /*视频播放状态*/   
  26.     $('.news_video').bind('play', function () {   
  27.         alert("正在播放视频");   
  28.     });   
  29.    
  30.     /*视频结束或错误*/   
  31.     $('.news_video').bind('error ended', function(){   
  32.         alert("播放视频结束");   
  33.     })   
  34.    
  35.     /*视频暂停*/   
  36.     $('.news_video').bind('pause', function () {   
  37.         alert("暂停");   
  38.     });   
  39. })   
  40.    
  41. //播放视频   
  42. function playVideo(){   
  43.     var video = $(".news_video");   
  44.     if(video.length>0){   
  45.         video[0].play();   
  46.     }   
  47. }   
  48. </script>   
  49. </body>   
  50. </html>   

来源：http://blog.csdn.net/qq_30337695/article/details/52678112

热门文章推荐

请稍候...

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

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