利用H5实现RTMP流的WEB移动端直播



主要实现方式:使用H5的video 元素结合H5的网络频播放器(video.js)实现rtmp流的直播播放

video.js 介绍
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。
优点:
  1.它是开源免费的,你可以在github很容易的获取它的最新代码。
      2.使用它非常的容易,只要花几秒钟就可以架起一个视频播放页面。
      3.它几乎兼容所有的浏览器,并且优先使用html5,在不支持的浏览器中,会自动使用flash进行播放。
      4. 界面可以定制,纯javascript和css打造。说明文档也非常的详细。
注:html5的video标签只支持mp4、webm、ogg三种格式,不支持flv,flash格式, flv格式是flash专用的,rtmp流为flv格式的,必须使用flash播放器,在video.js内部可以检测浏览器是否支持html5播放器直接播放,如果不支持内部会自动调用浏览器的flash播放器播放视频。Edge、谷歌浏览器中网站默认是禁用flash的,手动设置为允许flash即可



代码示例
 1 DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>使用video.js实现rtmp流的直播播放title>
 6     
 7     <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
 8     
 9     <script src="http://vjs.zencdn.net/5.19/video.min.js">script>
10     <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js">script>
11 head>
12 <body>
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
24        poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
25     
26     <source src='rtmp://221.222.249.140/springmvc/hello1' type='rtmp/flv'/>
27 video>
28 <script type="text/javascript">
29     // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
30     videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
31     var player = videojs('my-player'); //my-player为页面video元素的id
32     player.play(); //播放
33 //    1. 播放   player.play()
34 //    2. 停止   player.pause()
35 //    3. 暂停   player.pause()
36 script>
37 body>
38 html>

 


  

转载于:https://www.cnblogs.com/chen1994li/p/9496113.html

你可能感兴趣的:(利用H5实现RTMP流的WEB移动端直播)