react中可使用的video插件_react video-程序员宅基地

技术标签: react  javascript  

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语法特别注意,

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45315794/article/details/119875159

智能推荐

自定义MediaController来实现修改底部布局作以及实现vedioview半屏与全屏的切换-程序员宅基地

文章浏览阅读1.4w次,点赞5次,收藏17次。因为直接使用系统vedioview,底部的MediaController布局有点不好看,尤其是进度条,不能实现办半屏与全屏的切换,自己网上看了下别人的资料,整理了下,做以笔记;初学者,勉强才实现这些功能,还有许多地方不明白。1,MediaController.java.直接复制下系统源码的MediaController,来进行修改,就两个地方,一个布局相关的修改,以及进度条Progress_自定义mediacontroller

mysql 配置 suse 11_MySQL SUSE SLES11安装与配置笔记实操-程序员宅基地

文章浏览阅读167次。以下的文章主要介绍的是MySQL SUSE SLES11安装与配置笔记的实际操作过程,我们是在Linux下两个不同的版本MySQL安装实战(MySQL5和MySQL4)演示,以下就是文章的而具体内容描述。 Redhat9.2 安装MySQL5.0 fedora7安装MySQL (1) 下载 从MySQL官网 下载到最新的以下的文章主要介绍的是MySQL SUSE SLES11安装与配置笔记的实际操..._sles11安装

SVPWM调制的simulink仿真_svpwmsimulink-程序员宅基地

文章浏览阅读6.2k次,点赞8次,收藏65次。1、SVPWM的生成在FOC矢量控制中,Id、Iq 经过PID输出Vd、Vq。Vd、Vq经过反park变换成Vα、Vβ。再经过Vα、Vβ合成空间参考矢量Uref。那么怎么根据Vα、Vβ确定Uref所在扇区,然后确定所在扇区两个基础非零矢量的作用时间呢。1.1、传统的计算方法把Uref转换为虚数形式Uref=Va+jVβ。..._svpwmsimulink

C++ 调用windows系统DOS命令的函数 system(char* command)_c++调用windows系统自带的文字处理程序-程序员宅基地

文章浏览阅读3.9k次,点赞5次,收藏17次。E:\>color /?设置默认的控制台前景和背景颜色。COLOR [attr] attr 指定控制台输出的颜色属性颜色属性由两个十六进制数字指定 -- 第一个为背景,第二个则为前景。每个数字可以为以下任何值之一: 0 = 黑色 8 = 灰色 1 = 蓝色 9 = 淡蓝色 2 = 绿色 A = 淡绿色 3 = 浅绿色 B = 淡浅绿色 4 = 红色 C ..._c++调用windows系统自带的文字处理程序

Ubuntu terminator 无法打开解决方案_ctrl alt t打开不是terminator-程序员宅基地

文章浏览阅读5k次,点赞26次,收藏24次。在使用Ubuntu的过程中,突然发现Ctrl + Alt + T无法打开terminator,但是Ubuntu本身的终端是可以打开的。我因此重启了电脑两次,重装terminator,都无效。结果原因是因为我更改了默认的Python版本,就是把/usr/bin/python连接到了Python3,但是terminator是基于Python2的。解决方案sudo gedit /usr/bin/te..._ctrl alt t打开不是terminator

C#延时程序_c#等待10毫秒怎么写-程序员宅基地

文章浏览阅读2.4w次,点赞12次,收藏46次。在C#窗口程序中,如果在主线程里调用Sleep,在Sleep完成之前, 界面呈现出假死状态,不能响应任何操作! 下边实现的是非独占性延时函数,延时过时中界面仍可响应消息:public static void Delay(int milliSecond){ int start = Environment.TickCount; while (Math.Abs(Environment._c#等待10毫秒怎么写

随便推点

10 react表单操作(未封装版) 喜欢点赞加关注!谢谢_react form.create with 2 elements with non-unique-程序员宅基地

文章浏览阅读83次。import React, { Component } from "react"import { log } from "util";export default class Form extends Component { constructor() { super() this.state = { user: {//要提交给后端的数据 起名字后端叫什么我们也叫什么 username: '', _react form.create with 2 elements with non-unique

springboot2.1.1开启druid数据库连接池并开启监控_开启连接追踪和连接池-程序员宅基地

文章浏览阅读2.8k次。首先大家先确定自己使用的是2.1.1版本的springboot,我试过其他版本的用此方法会抱各种各样的错误出来springboot pom依赖,如果版本确定没错的话,这个依赖可不加&lt;parent&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-b..._开启连接追踪和连接池

L4_fiasco中FPU虚拟化实现介绍_cptr_el2-程序员宅基地

文章浏览阅读1k次。1.硬件方面:Armv8提供了两个寄存器用于控制“FPU虚拟化”——CPTR_EL2、CPACR_EL1。我们截取手册上关键位置。CPTR_EL2当CPTR_EL2寄存器的bit10为0时,FPU相关操作不被trapped,相反为1,则所有意欲访问FPU部件的指令(不管是EL0、EL1还是EL2)都会被trap到EL2。CPACR_EL1CPACR_EL1寄存器..._cptr_el2

解决java.lang.ClassNotFoundException: “com.mysql.cj.jdbc.Driver“ at java.net.URLClassLoader.findClass_com.hkd.charpter03.testmybatis2 at java.net.urlcla-程序员宅基地

文章浏览阅读1.2k次。1.检查自己的mysql-connector-java驱动包有没有导入,如果是maven项目,则检查你项目下的pom.xml文件中是否引入mysql-connector-java驱动依赖:javaweb一般项目:Maven项目的pom.xml文件: <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> _com.hkd.charpter03.testmybatis2 at java.net.urlclassloader.findclass(unknow

树莓派常用软件及服务-程序员宅基地

文章浏览阅读98次。内什么,系统装好了,还要装一些软件才能吃pi哦更新 vim树莓派自带的 vim 不是很好用,比如默认不支持小键盘及方向键等,我们可以更新一下sudo apt-get install vim使用远程桌面通过 Windows 自带的远程桌面软件,可以远程访问树莓派桌面应用sudo apt-get install xrdpsshssh 服务默认已经安装完毕, ..._树莓派包含的软件

进化算法Topic推荐-AMiner_aminer算法-程序员宅基地

文章浏览阅读231次。AMiner平台(https://www.aminer.cn)由清华大学计算机系研发,拥有我国完全自主知识产权。平台包含了超过2.3亿学术论文/专利和1.36亿学者的科技图谱,提供学者评价、专家发现、智能指派、学术地图等科技情报专业化服务。系统2006年上线,吸引了全球220个国家/地区1000多万独立IP访问,数据下载量230万次,年度访问量超过1100万,成为学术搜索和社会网络挖掘研究的重要数据和实验平台。必读论文:https://www.aminer.cn/topic进化算法,或称“演化算法”._aminer算法

推荐文章

热门文章

相关标签