网页中播放rtmp视频流(实现远程监控)

网页中播放rtmp视频流、亲测~~~

        • 使用的是videojs播放rtmp视频流
            • !!!注意:videojs的引入地址一定不要错
            • 引入播放器js地址
            • 引入播放器样式的地址
            • 这两个地址要和使用的版本对应,反正我写的版本不对应,播放不了
      • 效果图~~~
            • 这些rtmp视频源都是可用的,今天全部试了一遍~~~

使用的是videojs播放rtmp视频流

(可实现远程监控、、、可在Chrome上播放)
我这人喜欢直接上代码~~~


<html>
	<head>
		<meta charset="UTF-8">
		<title>使用video.js实现rtmp流的直播播放title>
		
		<link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
		
		<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>
	head>
	<body>

		<div class="div1">
			
			
			
			
			

			<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png"
			 width="700" height="400" data-setup='{}'>
				
				<source src='rtmp://58.200.131.2:1935/livetv/hunantv' type='rtmp/flv' />
			video>
		div>

	<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>
	body>
html>

!!!注意:videojs的引入地址一定不要错
引入播放器js地址

http://vjs.zencdn.net/5.19/video.min.js
https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js

引入播放器样式的地址

href=“http://vjs.zencdn.net/5.19/video-js.min.css” rel=“stylesheet”

这两个地址要和使用的版本对应,反正我写的版本不对应,播放不了

网页中播放rtmp视频流(实现远程监控)_第1张图片
浏览器加载结束主要实现代码就是上图的这个

效果图~~~

网页中播放rtmp视频流(实现远程监控)_第2张图片

这些rtmp视频源都是可用的,今天全部试了一遍~~~

香港卫视,rtmp://live.hkstv.hk.lxdns.com/live/hks
香港财经,rtmp://202.69.69.180:443/webcast/bshdlive-pc
韩国GoodTV,rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
韩国朝鲜日报,rtmp://live.chosun.gscdn.com/live/tvchosun1.stream
美国1,rtmp://ns8.indexforce.com/home/mystream
美国2,rtmp://media3.scctv.net/live/scctv_800
美国中文电视,rtmp://media3.sinovision.net:1935/live/livestream
湖南卫视,rtmp://58.200.131.2:1935/livetv/hunantv

你可能感兴趣的:(网页中播放rtmp视频流(实现远程监控))