开始接触不太清楚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="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="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;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>