開始接觸不太清楚rtmp協議的流，後來折騰了一番採用了videojs的插件下麵是案例 videojs案例 剛開始採用的是videojs的形式展示rtmp流媒體視頻的，後面發win10的谷歌不相容然後採用了flowplayer的插件播放 ...
開始接觸不太清楚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>
