video.js播放rtmp直播源和hls直播源
阿新 • • 發佈：2018-12-06
看了很多網上的坑，都是無法播放的，這次自己親測能播放
注意如果是自己製作的源的話，在推流之後要先等一小會才可以播放
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/ 至於怎麼製作源可以參考我的另外的部落格
https://blog.csdn.net/qq_40816360/article/details/84037877