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><videoid="my-video"class="video-js"controlspreload="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 aweb 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语法特别注意，

react中可使用的video插件相关推荐

React中CodeMirror插件的使用及封装
目录一.CodeMirror是什么二.React中CodeMirror的基本使用介绍 (一)引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 (二 ...
react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
react中quill插件的使用
##react中quill的使用近期使用由于项目需要一款富文本编辑框,本来打算试着使用drift.js写一款富文本编辑器.但由于时间比较紧急最后选择引用第三方插件,在众多富文本插件中初步选择了Qui ...
React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
jquery 监听td点击事件_React 事件 | 1. React 中的事件委托
说到 React 的事件,也算是 React 的一个非常有亮点的优化,它在原生事件体系的基础上,单独实现了一套事件机制.想要了解这个机制,首先的了解下什么是事件委托以及事件委托的好处. 事件委托假设 ...
mobx在react中应用_借助React Native Elements，Jest和MobX MST可以轻松实现现实世界中的ReactNative应用...
mobx在react中应用 by Qaiser Abbas 由Qaiser Abbas 借助React Native Elements,Jest和MobX MST可以轻松实现现实世界中的ReactNa ...
react中使用构建缓存_通过构建海滩度假胜地网站，了解如何使用React，Contentful和Netlify...
react中使用构建缓存 In this full course from John Smilga you will learn React by building a beach resort we ...
创建react应用程序_通过创建食谱应用程序来学习在React中使用API
创建react应用程序 Learn how to use external APIs with React and React Router in a full tutorial from Hamza ...
如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...
[译] How to NOT React：React 中常见的反模式与陷阱
原文地址:How to NOT React: Common Anti-Patterns and Gotchas in React 原文作者:NeONBRAND 译文出自:掘金翻译计划本文永久链接:g ...

react中可使用的video插件

react中可使用的video插件

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

二、使用videojs

三、使用jQuery组件库

react中可使用的video插件相关推荐

最新文章

热门文章