利用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 <!--引入播放器js--> 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 <!--vjs-big-play-centered 播放按钮居中--> 16 <!--poster默认的显示界面，就是还没点播放，给你显示的界面--> 17 <!--controls 规定浏览器应该为视频提供播放控件--> 18 <!--preload="auto" 是否提前加载--> 19 <!--autoplay 自动播放--> 20 <!--loop=true 自动循环--> 21 <!--data-setup=\'{"example_option":true}\' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}--> 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 <!--src: 规定媒体文件的 URL type:规定媒体资源的类型--> 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>
版权声明：本文为chen1994li原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。