rtmp播放流媒体

2018-06-24 01:44:14来源：未知阅读 ()

开始接触不太清楚rtmp协议的流，后来折腾了一番采用了videojs的插件下面是案例

videojs案例

 1 <html>
 2 <head>
 3     <title></title>
 4    
 5     <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6     <meta name="apple-mobile-web-app-capable" content="yes" />
 7   
 8     <script type="text/javascript" src="./src/jquery-1.7.2.min.js"></script>
 9     <script src="./src/video_5.19.min.js"></script>
10     <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
11 </head>
12 <body>
13 
14     <div class="page">
15       <div class="pinch-zoom">
16         <input type="hidden" value="" name="">
17         <div id="firstShow0" class="fl bgc_green pos_rel" style="width:100%; height:100%;"></div>
18       </div>
19     </div>
20     <div class="page">
21       <div class="pinch-zoom">
22         <div id="firstShow1" class="fl bgc_green pos_rel" style="width:100%; height:100%;"></div>
23       </div>
24     </div>
25 
26 
27   
28   
29   <script type="text/javascript">
30 
31       //初始化播放
32       function startPlay(id){
33         var myPlayer = videojs(id);
34         videojs(
35           id
36           ,{
37             controlBar: {
38               captionsButton: false,
39               chaptersButton: false,
40               playbackRateMenuButton: true,
41               LiveDisplay: true,
42               subtitlesButton: false,
43               remainingTimeDisplay: true,
44 
45               progressControl: true,
46 
47               volumeMenuButton: {
48                 inline: true,
49                 vertical: false
50               },//竖着的音量条
51               fullscreenToggle: true
52             }
53           },function onPlayerReady() {
54           this.play();
55         });
56         
57       }
58       
59       var data = new Array();
60       data[0] = "rtsp://192.168.1.168/0";
61       data[1] = "rtmp://live.hkstv.hk.lxdns.com/live/hks";
62 
63       for(var i in data){
64         
65         $('#firstShow'+i).html('<video id="my-player'+i+'" class="video-js" controls="true" preload="auto" data-setup="{}"><source src="'+data[i]+'" type="rtmp/flv"/></video>').attr("data-playId",1);
66         
67         startPlay("my-player"+i);
68       }
69       $(".video-js").css({
70         "width":"100%",
71         "height":"100%"
72       });
73     
74         
75     </script>
76 </body>
77 </html>

刚开始采用的是videojs的形式展示rtmp流媒体视频的，后面发win10的谷歌不兼容然后采用了flowplayer的插件播放

flowplayer案例

 1 <!DOCTYPE html>  
 2 <html>  
 3 <head>  
 4 <script type="text/javascript" src="flowplayer-3.2.8.min.js"></script>  
 5 <title>RTMP Sample Player FlowPlayer</title>  
 6 </head>  
 7   
 8   
 9 <body>      
10 
11     <a href="#" style="display:block;width:520px;height:330px" id="player"></a>   
12 
13     <script>
14     flowplayer("player", "flowplayer-3.2.8.swf",{   
15         clip: {   
16           url: 'hks',  
17           provider: 'rtmp',  
18           live: true,   
19         },    
20         plugins: {    
21            rtmp: {    
22              url: 'flowplayer.rtmp-3.2.8.swf',    
23              netConnectionUrl: 'rtmp://live.hkstv.hk.lxdns.com/live'  
24            },
25            controls: {
26                         bottom: 0,//功能条距底部的距离
27                         height: 0, //功能条高度
28                         zIndex: 1,
29                         fontColor: '#ffffff',
30                         timeFontColor: '#333333',
31                         play:false, //开始按钮
32                         volume: false, //音量按钮
33                         mute: false, //静音按钮
34                         stop: false,//停止按钮
35                         fullscreen: false, //全屏按钮
36                         scrubber: false,//进度条
37                         //url: "flowplayer.controls-3.2.12.swf", //决定功能条的显示样式（功能条swf文件,根据项目定亦可引用:http://releases.flowplayer.org/swf/flowplayer.controls-3.2.12.swf）
38                         time: false, //是否显示时间信息
39                         autoHide: false, //功能条是否自动隐藏
40                         backgroundColor: '#aedaff', //背景颜色
41                         backgroundGradient: [0.1, 0.1, 1.0], //背景颜色渐变度（等分的点渐变）
42                         opacity: 0.5, //功能条的透明度
43                         borderRadius: '30',//功能条边角
44                         tooltips: {
45                             buttons: true,//是否显示
46                             fullscreen: '全屏',//全屏按钮，鼠标指上时显示的文本
47                             stop:'停止',
48                             play:'开始',
49                             volume:'音量',
50                             mute: '静音',
51                             next:'下一个',
52                             previous:'上一个'
53                         }
54                     }
55        }    
56 
57      });  
58     </script>  
59 
60 </body>  
61 </html>