React中插入视频(video-react)，自动播放

一. 在react中引入

安装插件

npm install –save video-react

2.在文件中引入

import {Player,ControlBar,PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabledReplayControl, // 后退按钮ForwardControl,  // 前进按钮CurrentTimeDisplay,TimeDivider,PlaybackRateMenuButton,  // 倍速播放选项VolumeMenuButton
} from 'video-react';
import "video-react/dist/video-react.css"; // import css

二. 插件属性
1.插件属性地址

遇到的问题，视频要求自动播放，设置autoPlay为true。在测试时候发现，切换Tab标签的时候，不会自动播放。
解决方案：在更改数据的时候调用load方法。

 this.player.subscribeToStateChange(this.handleStateChange.bind(this));this.player.load();//  更改视频源并重新加载视频

部分代码：

this.player.subscribeToStateChange(this.handleStateChange.bind(this));this.player.load();handleStateChange(state, prevState) {this.setState({player: state,currentTime: state.currentTime,duration:state.duration,});}

界面

         <Playerref={c => {this.player = c;}}autoPlay='true'playsInline ='true'src={this.state.videoUrl}poster="https://video-react.js.org/assets/poster.png"><ControlBar autoHide={false} disableDefaultControls={source == 0?false :true}><ReplayControl seconds={10} order={1.1} /><PlayToggle /><CurrentTimeDisplay order={4.1} /><TimeDivider order={4.2} /><PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} /><VolumeMenuButton /></ControlBar></Player>

React中插入视频(video-react)，自动播放相关推荐

html插入视频时不自动播放,html5中嵌入视频自动播放的问题解决
在h5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...
解决在IOS系统及微信中audio、video不能自动播放的问题
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" ...
解决微信浏览器video标签自动播放视频失效
正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...
网页中插入视频无法播放解决问题
网页中插入视频: <video controls="controls" width="600" height="400">< ...
java html中引入视频的格式_HTML中插入视频
最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一种是html5中的标签. 前者的兼容性没得说,但是使用起来不太方便,后者使用起来很方便,但是兼容性让人头疼. 虽然后者兼容性存在很多问题, ...
iframe内容适应div大小_使用lt;iframegt;方式在WordPress中插入视频并自适应屏幕尺寸
工作室今天发布了一篇文章,需要插入一段视频,说起来也不是多大的事情,国内很多主题都直接带视频插入功能(比如Kratos),也可以采用插件的方式(比如Smartideo),当然也可以使用今天提到的方法. ...
微信公众号网页 H5 video 标签自动播放
目录微信公众号网页 H5 video 标签自动播放问题描述解决方案微信公众号网页 H5 video 标签自动播放环境:微信公众号网页需求:H5 video 标签自动播放视频 video 标 ...
【在PowerPoint中插入视频的三种方法】
为了能更好地帮助大家合理地在PowerPoint课件中插入和播放视频文件, 在PowerPoint中插入视频的三种方法 ,本文特向大家介绍PowerPoint中插入和处理视频的三种方法. 直接播放视频 ...
两种方法:在 PowerPoint 中插入视频
为追求更完美效果,在Powerpoint中通过shockwave Flash Object控件插入SWF格式动画已是家常便饭.但很多情况下,演示文档还需要视频做辅助,下面我们介绍在PowerPoint ...
12_微信小程序之微信视频号滚动自动播放视频效果实现
12_微信小程序之微信视频号滚动自动播放视频效果实现一.获取视频的分辨率.时长.缩略图微信小程序提供了三种方式可以获取视频的分辨率.时长: wx.getVideoInfo(Object) :只能用 ...

React中插入视频(video-react)，自动播放

React中插入视频(video-react)，自动播放相关推荐

最新文章

热门文章