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吧。