rtmp播放流媒体
程序员文章站
2022-09-26 14:30:35
开始接触不太清楚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>
上一篇： Python实现定时备份mysql数据库并把备份数据库邮件发送
下一篇： HDU 1086