videojs集成--播放rtmp流

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

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

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

代码就是下面这样。

里面一些细节注释都有。

重点就是看

[html]  view plain  copy
  1. >  
  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.                   
  26.                   
  27.             div>  
  28.         div>  
  29.           
  30.     div>  
  31. div>  
  32. <div class="clear">div>  
  33. <div id="information_wrapper">  
  34.       
  35.     <div id="engage_description">  
  36.   
  37.         <div id="engage_basic_description">div>  
  38.   
  39.     div>  
  40. div>  
  41. <div class="tab-pane" id="engage_Slide_text_tab">  
  42. div>  
  43.   
  44. <script src="videojs/videojs-media-sources.min.js">script>  
  45.   
  46. <script src="videojs/videojs.hls.min.js">script>  
  47. <script>  
  48.   
  49.     //播放的话,就直接使用下面2行  
  50.     //后面注释的那些其实也是可用用的,不过刚开始集成,越简单越好  
  51.     var player = videojs('my-video');  
  52.     player.play();  
  53.     /*  
  54.     (function ($) {  
  55.   
  56.         var resetVideoSize = function (myPlayer) {  
  57.             var videoJsBoxWidth = $(".video-js").width();  
  58.             var ratio = 1440 / 900;  
  59.             var videoJsBoxHeight = videoJsBoxWidth / ratio;  
  60.             myPlayer.height(videoJsBoxHeight);  
  61.         }  
  62.   
  63.         $(window).on("resize", function () {  
  64.             resetVideoSize(myPlayer);  
  65.         });  
  66.         myPlayer.play();  
  67.     })(jQuery)  
  68.   
  69.     function changeSrc() {  
  70.         var src = "http://127.0.0.1/hls/test.m3u8";  
  71.         var myPlayera = videojs("my-video");  
  72.         $("#my-video").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")  
  73.         myPlayera.src("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新初始化视频地址  
  74.         myPlayera.load("rtmp://live.hkstv.hk.lxdns.com/live/hks"); //重新加载  
  75.     }  
  76.     */  
  77.     function changeSrc(src) {  
  78.   
  79.         var myPlayera = videojs("my-video");  
  80.         //$("#videojs_videodisplay_presentation_html5_api").attr("src", "rtmp://live.hkstv.hk.lxdns.com/live/hks")  
  81.         myPlayera.src(src); //重新初始化视频地址  
  82.         myPlayera.load(src); //重新加载  
  83.     }  
  84. script>  
  85.   
  86. body>  
  87. html>  

你可能感兴趣的:(html)