react中可使用的video插件

react中可使用的video插件在react中使用video，并且兼容不同浏览器（特别是ie），那就不得不借助插件来实现自己的目的，下面有几个插件使用：一、使用 video-react （在react中推荐使用）1、直接下video-react插件$ npm i video-react2、在所需的插件出导入import { Player } from "video-react";...retur

行致

9395人浏览 · 2021-08-23 18:58:51

行致 · 2021-08-23 18:58:51 发布

react中可使用的video插件

在react中使用video，并且兼容不同浏览器（特别是ie），那就不得不借助插件来实现自己的目的，下面有几个插件使用：

一、使用 video-react （在react中推荐使用）

1、直接下video-react插件

$ npm i video-react

2、在所需的插件出导入

import { Player } from "video-react";

...

return (
	 <Player ref={player} videoId="video-1">
          <source src="url.mp4" />
     </Player>
)

简单好用，

二、使用videojs

网址：https://videojs.com/
这个插件，是比较好用的，它能够定制自己的样式，也兼容ie浏览器，第七版本只兼容ie11，简单的使用方法：

// html文件中
<head>
  <link href="https://vjs.zencdn.net/7.14.3/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="MY_VIDEO.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.14.3/video.min.js"></script>
</body>