看了很多网上的坑,都是无法播放的,这次自己亲测能播放
注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放
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/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/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/qq_40816360/article/details/84037877