Fork me on GitHub

Video.js

Video.js

官网: https://videojs.com/
开源HTML5播放器框架

优点

支持多种格式,可以支持MP4、WebM、HLS、RTSP等。
可以自定义主题样式。
插件丰富。
支持广泛,可支持PC端各种浏览器和移动端的浏览器。

插件列表

https://videojs.com/plugins

使用

原生代码,未使用主题样式

<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可以播放
image

问题

No compatible source was found for this media

播放rtmp时遇到问题,显示如下
image
后查询发现,flash在video.js 6.0以前是内置的,大于6.0版本需要手动引入videojs-flash插件
image

<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>

引入后刷新效果如下
image
点击后发现无反应,点击长按看到如下提示,浏览器(Chrome 90.0)已经不支持Flash了,需要换老的浏览器才可以。
image

解决方案:将推流的rtmp地址换成HLS.m3u8,可以在video标签中使用,只是需要浏览器支持。
其他只有低版本的IE不支持h5的还是换成flash吧。

其他播放器插件

ckplayer

https://www.ckplayer.com/

posted @ 2021-06-01 11:07  秋夜雨巷  阅读(1140)  评论(0编辑  收藏  举报