记录了在html中使用vedio.js6以上版本播放rtmp视频流的方法。

1.背景

最近要做摄像头视频的展示，不想使用硬件方的专用插件，所以计划视频推送到SRS服务器，浏览器再通过rtmp协议显示，类似于直播。

经查询，了解到可以用ckplayer(有许可条款)和video.js在html页面中。尝试了video.js_5.x可以正常播放，而6.x版本不能播放，可目前video.js已经更新到了7.x！

几经折腾，发现6.x版本后需要单独的flash插件，早期版本包含了flash，官方说明如下：

2.示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Live Video 7.X</title>
 7     <link href="./lib/video7.3.0/video-js.min.css" rel="stylesheet">
 8     <script src="./lib/video7.3.0/video.min.js"></script>
 9     <script src="./lib/flash/videojs-flash.min.js"></script>
10 </head>
11 
12 <body>
13     <video id="liveVideo" class="video-js" controls autoplay preload="auto" width="1280"
14         height="720" data-setup="{}">
15         <source src="rtmp://192.168.3.161:1935/live/livestream" type="rtmp/flv">
16     </video>
17 </body>
18 </html>

引入了video.js、video.js和videojs-flash.js，添加video标签，设置autoplay、width、height等属性，data-setup属性必须要，如果不做设置一定写成“{}”，

设置source的src和type属性，可以先通过ffplayer客户端工具查看视频流是否能够播放。

 

3.注意事项及完整示例

不支持文件方式打开页面，必须是http方式访问页面，可以通过nginx或使用编辑器的内置server，如vscode的live server；

video.js的github地址：https://github.com/videojs/video.js

videojs-flash的github地址：https://github.com/videojs/videojs-flash

完整代码参考：https://github.com/shiyuan598/live-video

简单记录一下在html中使用vedio.js6以上版本播放rtmp视频流的方法，欢迎留言交流~

 

版权声明：本文为jyughynj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jyughynj/p/11927661.html