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

最新推荐文章于 2024-09-13 21:56:19 发布

前端学习007

最新推荐文章于 2024-09-13 21:56:19 发布

阅读量1.1w

点赞数 1

文章标签： react

本文链接：https://blog.csdn.net/weixin_44433499/article/details/115194493

版权

本文介绍了在React项目中使用video-react插件插入视频，并解决自动播放问题的方法。当在不同Tab标签间切换时，通过在数据变化时调用load方法确保视频能自动播放。

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

一. 在react中引入

安装插件

npm install –save video-react

2.在文件中引入

import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
  ReplayControl, // 后退按钮
  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(

最低0.47元/天解锁文章