Video.js
官網: https://videojs.com/
開源HTML5播放器框架
優點
支持多種格式，可以支持MP4、WebM、HLS、RTSP等。
可以自定義主題樣式。
插件豐富。
支持廣泛，可支持PC端各種瀏覽器和移動端的瀏覽器。
插件列表
使用
原生代碼,未使用主題樣式
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src='rtmp://58.200.131.2:1935/livetv/hunantv' type='rtmp/flv' />
<!--
<source src="C:\Users\Administrator\Videos\trailer.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
-->
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<!-- video.js > 6.0后需要手動引入videojs-flash插件才能使用flash -->
<!--
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"> </script>
-->
</body>
效果
mp4可以播放
問題
No compatible source was found for this media
播放rtmp時遇到問題,顯示如下
后查詢發現,flash在video.js 6.0以前是內置的,大於6.0版本需要手動引入videojs-flash插件
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
引入后刷新效果如下
點擊后發現無反應，點擊長按看到如下提示，瀏覽器(Chrome 90.0)已經不支持Flash了，需要換老的瀏覽器才可以。
解決方案：將推流的rtmp地址換成HLS.m3u8，可以在video標簽中使用，只是需要瀏覽器支持。
其他只有低版本的IE不支持h5的還是換成flash吧。