react中可使用的video插件

最新推荐文章于 2024-10-18 11:53:55 发布

行致

最新推荐文章于 2024-10-18 11:53:55 发布

阅读量9.3k

点赞数

分类专栏： react 文章标签： react javascript

本文链接：https://blog.csdn.net/weixin_45315794/article/details/119875159

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了在React中使用video元素时，为实现更好的浏览器兼容性，尤其是针对IE，可以选用的几个插件。推荐使用video-react，它简单易用，只需通过npm安装并引入组件即可。另外，还提到了videojs，它支持自定义样式且兼容IE11，可以通过cdn链接引入或本地安装使用。最后，提及了使用jQuery组件库作为另一种选择，虽然较旧，但提供了多样化的样式和良好的浏览器适配性。

摘要由CSDN通过智能技术生成

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>