视频源
cctv1
1
| rtmp://58.200.131.2:1935/livetv/cctv1
|
湖南卫视
1
| rtmp://58.200.131.2:1935/livetv/hunantv
|
香港财经
1
| rtmp://202.69.69.180:443/webcast/bshdlive-pc
|
问题
1935 端口 rtmp 能播放，非 1935 端口 rtmp 视频无法播放
视频源端口缺少处理
TCPlayer「腾讯出品-支持 rtmp|flv|m3u8等」
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>TCPlayer 播放 RTMP 视频流</title>
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-tap-highlight" content="no">
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="video-container" style="margin: 50px auto;width:80%; height: 500px;">
</div>
<!--Polyfill-->
<!--[if lt IE 9]>
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-shim.js"></script>
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-sham.js"></script>
<![endif]-->
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js"></script>
<script>
(function () {
var TCPlayer = new TcPlayer("video-container", {
// m3u8: self.roomDetail.streamPlayUrlHls, //m3u8连路
// flv: self.roomDetail.streamPlayUrlFlv,//flv连路
rtmp: 'rtmp://rtmp01open.ys7.com/openlive/ab96409e80af42d8a7becba03d2ea97b',
autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
poster: { style: "cover", src: ''},
flash:false,//优先h5播放器 如果是true则是优先flash播放
x5_player:false,//启用TBS
controls:"default",//不显示控件
x5_type:"h5",//启用同层播放器
volume:0,//测试初始音量[0-1] 设置为0 静音 大多浏览器会恢复自动播放功能
live:true,//是否为直播
width: "100%", //视频的显示宽度，请尽量使用视频分辨率宽度
height: "100%", //视频的显示高度，请尽量使用视频分辨率高度
wording: {//定义错误提示语
2032: "请求视频失败，请检查网络",
2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
},
listener: function(msg) {
// console.log(msg);
if (msg.type == "error") {
switch(msg.detail.code){
case 1:
console.log("网络错误，请检查网络配置或者播放链接是否正确。");
break;
case 2:
console.log("视频格式 Web 播放器无法解码。");
break;
case 3:
console.log("视频解码错误。");
break;
case 4:
console.log("当前系统环境不支持播放该视频格式。");
break;
case 5:
console.log("播放器判断当前浏览器环境不支持播放传入的视频，可能是当前浏览器不支持 MSE 或者 Flash 插件未启用。");
break;
case 13:
console.log("直播已结束，请稍后再来。");
break;
case 1001:
console.log("断网了");
break;
case 1002:
console.log("获取视频失败，请检查播放链接是否有效。");
break;
case 2048:
console.log("无法加载视频文件，跨域访问被拒绝。");
break;
default:
console.log("出错了");
break;
}
}
if (msg.type == "load") {
console.log("load执行")
self.TCPlayer.volume(0)
}
if (msg.type == "timeupdate") {
console.log("timeupdate")
}
if (msg.type == "loadeddata") {
console.log("loadeddata")
}
if (msg.type == "progress") {
console.log("progress")
}
if (msg.type == "play") {
console.log("play")
}
if (msg.type == "playing") {
console.log("playing")
}
if (msg.type == "pause") {
console.log("pause")
}
if (msg.type == "ended") {
console.log("ended")
}
if (msg.type == "seeking") {
console.log("seeking")
}
if (msg.type == "seeked") {
console.log("seeked")
}
if (msg.type == "resize") {
console.log("resize")
}
if (msg.type == "volumechange") {
console.log("volumechange")
}
}
});
})();
</script>
</body>
</html>
|
Videojs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
<!-- 引入播放器 js-->
<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
<script type="text/javascript">
// 设置 flash 路径，用于在 videojs 发现浏览器不支持 HTML5 播放器的时候自动唤起 flash 播放器
videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
var player = videojs('my-player'); //my-player 为页面 video 元素的 id
player.play(); // 播放
// 1. 播放 player.play ()
// 2. 停止 player.pause ()
// 3. 暂停 player.pause ()
</script>
</head>
<body>
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
autoplay="autoplay" poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
<!--src: 规定媒体文件的 URL type: 规定媒体资源的类型 -->
<source src='rtmp://rtmp01open.ys7.com/openlive/ab96409e80af42d8a7becba03d2ea97b' type='rtmp/flv'/>
</video>
</body>
</html>
|
Videojs+Flash
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
<!-- 引入播放器 js-->
<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
<script type="text/javascript">
// 设置 flash 路径，用于在 videojs 发现浏览器不支持 HTML5 播放器的时候自动唤起 flash 播放器
videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
var player = videojs('my-player'); //my-player 为页面 video 元素的 id
player.play(); // 播放
// 1. 播放 player.play ()
// 2. 停止 player.pause ()
// 3. 暂停 player.pause ()
</script>
</head>
<body>
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
autoplay="autoplay" poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
<!--src: 规定媒体文件的 URL type: 规定媒体资源的类型 -->
<source src='rtmp://58.200.131.2:1935/livetv/hunantv' type='rtmp/flv'/>
</video>
</body>
</html>
|
EZuikit「萤石云」
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>EZUIPlayer RTMP</title>
<style>
body {
margin: 0;
}
#myPlayer {
width: 650px;
height: 400px;
margin: 50px auto;
}
</style>
</head>
<body>
<script src="https://open.ys7.com/sdk/js/2.0/ezuikit.js"></script>
<video id="myPlayer" controls playsInline webkit-playsinline autoplay>
<source src="rtmp://rtmp01open.ys7.com/openlive/ab96409e80af42d8a7becba03d2ea97b" type="rtmp/flv" />
</video>
<script>
var player = new EZuikit.EZUIPlayer('myPlayer');
player.play(); //播放
//player.pause(); //暂停
//player.stop(); //停止
</script>
</body>
</html>
|
EZuikit+VLC
首选浏览器页面播放，也可以调起本地 VLC 客户端软件播放「Windows」
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 60%;
margin: 50px auto;
background-color: #191919;
}
#myPlayer {
height: 500px;
width: 100%;
}
#tips {
font-size: 13px;
color: #ccc;
padding: 20px;
}
.problem {
font-size: 13px;
color: #ccc;
padding: 10px;
}
</style>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="https://open.ys7.com/sdk/js/2.0/ezuikit.js"></script>
</head>
<body>
<div class="content">
<video id="myPlayer" controls playsInline webkit-playsinline autoplay>
<source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/flv"/>
</video>
<div class="problem"><button type="button" class="btn btn-warning">播放存在问题 ?</button></div>
<div id="tips" style="display: none;">
<p>1. 窗口上方提示：您没有安装flash插件，无法播放视频。请根据提示点击，开启 flash 支持</p>
<p>2. 如果画面一直无法正常出现，请点击下面播放按钮进行播放。如果点击后没有反应，请先点击「下载播放器」，下载并默认安装</p>
<p><a style="color: #ac8989;" href="${pageContext.request.contextPath}/app/rtmp.exe" download="rtmp.exe">下载播放器</a>
</p>
<p><a href="rtmp://58.200.131.2:1935/livetv/hunantv"><button type="button" class="btn btn-small btn-primary">播放</button></a></p>
</div>
</div>
<script>
var player = new EZuikit.EZUIPlayer('myPlayer');
player.play(); //播放
//player.pause(); //暂停
//player.stop(); //停止
$(".problem").click(function() {
$('#tips').toggle();
});
</script>
</body>
</html>
|
rtmp.exe
使用 winrar 打包 run.bat、rtmp.reg、vlc.exe 而成，双击安装后，即可完成 VLC 客户软件安装和 rtmp 注册，在页面中可通过 a 标签调起 VLC 播放器播放
test.html
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调用本地 VLC 客户端软件播放 rtsp</title>
</head>
<body>
<a href="rtmp://58.200.131.2:1935/livetv/hunantv">播放</a>
</body>
</html>
|
