videojs集成--播放rtmp流

Posted DoubleLi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了videojs集成--播放rtmp流相关的知识，希望对你有一定的参考价值。

之前说到已经把流推送过来了，这时候就可以使用videojs来进行显示播放。

 

首先要先有一个文件，那就是video-js.swf

因为，这种播放方式html已经不能很好的进行播放了，需要用到flash来播放，videojs在这个地方就用到了这个。

代码就是下面这样。

里面一些细节注释都有。

重点就是看<video>标签里面的内容

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta http-equiv="Access-Control-Allow-Origin" content="*">  
  5.     <meta charset="utf-8">  
  6.     <meta name="description" content="Opencast Media Player">  
  7.     <meta name="author" content="Opencast">  
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
  9.     <title>RTMP播放</title>  
  10.     <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">  
  11.     <link rel="stylesheet" type="text/css" href="css/core_global_style.css">  
  12.     <script src="videojs/jquery.js"></script>  
  13.     <script src="videojs/video.js"></script>  
  14.     <link href="videojs/video-js.css" rel="stylesheet">  
  15.     <script>  
  16.         videojs.options.flash.swf = "videojs/video-js.swf";//flash路径，有一些html播放不了的视频，就需要用到flash播放。这一句话要加在在videojs.js引入之后使用  
  17.     </script>  
  18. </head>  
  19. <body >  
  20. <div id="engage_view" style="display: block;">  
  21.     <div id="engage_content">  
  22.         <div id="engage_resize_container">  
  23.   
  24.             <div id="engage_video">  
  25.                 <!-- theodul video videojs plugin desktop mode  controls preload="auto"  
  26.                         vjs-big-play-centered 播放按钮居中  
  27.                         poster默认的显示界面，就是还没点播放，给你显示的界面  
  28.                         controls  
  29.                         preload="auto" 是否提前加载  
  30.                         autoplay 自动播放  
  31.                         loop=true 自动循环  
  32.                         data-setup=‘{"example_option":true}‘ 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}  
  33.                 -->  
  34.                 <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"  
  35.                        poster="videojs/eguidlogo.png" width="800" height="600"  
  36.                 >  
  37.                     <!--  
  38.                         <source src="../output.mp4" type=‘video/mp4‘>  mp4格式  
  39.                         <source src=‘rtmp://127.0.0.1/hls/test‘ type=‘rtmp/flv‘/> rtmp格式  
  40.                         <source src=‘http://127.0.0.1/hls/test.m3u8‘ type=‘application/x-mpegURL‘/>  m3u8格式  
  41.                         <source src=‘http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8‘ type=‘application/x-mpegURL‘/> m3u8格式，可用  
  42.                     -->  
  43.                     <source src=‘rtmp://live.hkstv.hk.lxdns.com/live/hks‘ type=‘rtmp/flv‘/>  
  44.                 </video>  
  45.   
  46.                 <!-- http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8 可用的m3u8地址    -->  
  47.                 <!-- rtmp://live.hkstv.hk.lxdns.com/live/hks  可用的rtmp地址-->  
  48.             </div>  
  49.         </div>  
  50.         <!-- timeline plugin container -->  
  51.     </div>  
  52. </div>  
  53. <div class="clear"></div>  
  54. <div id="information_wrapper">  
  55.     <!-- description plugin container -->  
  56.     <div id="engage_description"><!-- theodul description plugin desktop mode -->  
  57.   
  58.         <div id="engage_basic_description"></div>  
  59.   
  60.     </div>  
  61. </div>  
  62. <div class="tab-pane" id="engage_Slide_text_tab"><!-- theodul tab slidetext plugin embed mode -->  
  63. </div>  
  64.   
  65. <script src="videojs/videojs-media-sources.min.js"></script>  
  66. <!-- <script src="videojs/videojs-contrib-hls.min.js"></script>-->  
  67. <script src="videojs/videojs.hls.min.js"></script>  
  68. <script>  
  69.   
  70.     //播放的话，就直接使用下面2行  
  71.     //后面注释的那些其实也是可用用的，不过刚开始集成，越简单越好  
  72.     var player = videojs(‘my-video‘);  
  73.     player.play();  
  74.     /*  
  75.     (function ($) {  
  76.   
  77.         var resetVideoSize = function (myPlayer) {  
  78.             var videoJsBoxWidth = $(".video-js").width();  
  79.             var ratio = 1440 / 900;  
  80.             var videoJsBoxHeight = videoJsBoxWidth / ratio;  
  81.             myPlayer.height(videoJsBoxHeight);  
  82.         }  
  83.   
  84.         $(window).on("resize", function () {  
  85.             resetVideoSize(myPlayer);  
  86.         });  
  87.         myPlayer.play();  
  88.     })(jQuery)  
  89.   
  90.     function changeSrc() {  
  91.         var src = "http://127.0.0.1/hls/test.m3u8";  
  92.         var myPlayera = videojs("my-video");  
  93.         $("#my-video").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")  
  94.         myPlayera.src("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新初始化视频地址  
  95.         myPlayera.load("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新加载  
  96.     }  
  97.     */  
  98.     function changeSrc(src) {  
  99.   
  100.         var myPlayera = videojs("my-video");  
  101.         //$("#videojs_videodisplay_presentation_html5_api").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")  
  102.         myPlayera.src(src); //重新初始化视频地址  
  103.         myPlayera.load(src); //重新加载  
  104.     }  
  105. </script>  
  106.   
  107. </body>  
  108. </html>  

以上是关于videojs集成--播放rtmp流的主要内容，如果未能解决你的问题，请参考以下文章

暂停 RTMP 直播后 VideoJS 不播放

videojs修改播放器样式并实现四路动态播放rtmp流视频

搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmphls直播流及普通视频)

videojs踩过的坑

在Vue组件中使用Video播放rtmp视频流

带直播的 VideoJs