react中可使用的video插件

最新推荐文章于 2024-03-21 14:39:56 发布

行致

最新推荐文章于 2024-03-21 14:39:56 发布

阅读量8.8k

点赞数

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

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

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>

可以不用使用链接，下载videojs脚本：

$ npm install --save-dev video.js

上方的video的api可以去官网查看

三、使用jQuery组件库

网址：https://www.jq22.com/jquery-plugins%E9%9F%B3%E9%A2%91%E5%92%8C%E8%A7%86%E9%A2%91-1-jq
可以下载相关的，video视频，有各种不同的样式，且可适配各种不同的浏览器，就是比较老，jQuery语法特别注意，

行致

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react中可使用的video插件

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

扫一扫