转自https://blog.csdn.net/qq_40816360/article/details/84071977
看了很多网上的坑,都是无法播放的,这次自己亲测能播放
注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放
video.js播放rtmp源
- 一定要注意你的Chrome浏览器允许播放flash,因为rtmp是基于flash的,设置可以从百度查询如何设置chrome浏览器允许播放flash
- 要放在服务器下,打开此html页面才可以播放,最简单就是自己搭个本地服务器进行
- 自己测试的时候,把source的src修改成自己的源就好了
- type是 rtmp/flv
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>video.js</title> <link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet"> <script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script> <script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> </head> <body> <video id="my-player" class="video-js" controls> <source src="rtmp://localhost:1935/myapp/pc" type="rtmp/flv"> <p class="vjs-no-js"> not support </p> </video> <script type="text/javascript"> var player = videojs('my-player',{ width:400, heigh:200 }); </script> </body> </html>
video.js播放hls源
- 这个不一定要放在服务器上,如果直接打开不可以的话,也可以放在服务器上测试一下
- type是 application/x-mpegURL
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>video.js</title> <link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet"> <script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script> <script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> </head> <body> <video id="my-player" class="video-js" controls> <source src="http://localhost:8765/hls/movie.m3u8" type="application/x-mpegURL"> <p class="vjs-no-js"> not support </p> </video> <script type="text/javascript"> var player = videojs('my-player',{ width:400, heigh:200 }); </script> </body> </html>
至于怎么制作源可以参考我的另外的博客
https://blog.csdn.net/qq285679784/article/details/85762736