video-react

video-react 使用指南

安装

npm install --save video-react react react-dom redux

使用

import React from 'react';
import { Player } from 'video-react';export default props => {return (<PlayerplaysInlineposter="/assets/poster.png"src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"/>);
};

栗子：

react函数组件监听视频播放状态

import React, { useState, useEffect, useCallback,useRef } from 'react';
import { debounce } from 'lodash';const Player = () => {const [playerState, setPlayerState] = useState({}); //视频实时动态信息const player = useRef(null);function handleStateChange(state) {setPlayerState({playerInfo: state,});}
// 定义一个防抖函数--优化监听过于频繁const debounceFn = useCallback(debounce(handleStateChange.bind(this), 30),[],);const listener = player?.current?.subscribeToStateChange(debounceFn,);const {playerInfo} = playerState;useEffect(() => {//视频播放状态监听console.log('vidoeINfo:::::======', playerState);}, [listener]);return (<Playerref={player}preload="metadata"poster={poster}src={src}><BigPlayButton position="center" /><ControlBar disableCompletely={true} className="my-class" /></Player>);};
export default Player;

类组件：

import React, { Component } from 'react';
import { PrismCode } from 'react-prism';
import { Player, ControlBar } from 'video-react';
import { Button } from 'reactstrap';const sources = {sintelTrailer: 'http://media.w3.org/2010/05/sintel/trailer.mp4',bunnyTrailer: 'http://media.w3.org/2010/05/bunny/trailer.mp4',bunnyMovie: 'http://media.w3.org/2010/05/bunny/movie.mp4',test: 'http://media.w3.org/2010/05/video/movie_300.webm'
};export default class PlayerControlExample extends Component {constructor(props, context) {super(props, context);this.state = {source: sources.bunnyMovie};this.play = this.play.bind(this);this.pause = this.pause.bind(this);this.load = this.load.bind(this);this.changeCurrentTime = this.changeCurrentTime.bind(this);this.seek = this.seek.bind(this);this.changePlaybackRateRate = this.changePlaybackRateRate.bind(this);this.changeVolume = this.changeVolume.bind(this);this.setMuted = this.setMuted.bind(this);}componentDidMount() {// subscribe state changethis.player.subscribeToStateChange(this.handleStateChange.bind(this));}setMuted(muted) {return () => {this.player.muted = muted;};}handleStateChange(state) {// copy player state to this component's statethis.setState({player: state});}play() {this.player.play();}pause() {this.player.pause();}load() {this.player.load();}changeCurrentTime(seconds) {return () => {const { player } = this.player.getState();this.player.seek(player.currentTime + seconds);};}seek(seconds) {return () => {this.player.seek(seconds);};}changePlaybackRateRate(steps) {return () => {const { player } = this.player.getState();this.player.playbackRate = player.playbackRate + steps;};}changeVolume(steps) {return () => {const { player } = this.player.getState();this.player.volume = player.volume + steps;};}changeSource(name) {return () => {this.setState({source: sources[name]});this.player.load();};}render() {return (<div><Playerref={player => {this.player = player;}}autoPlay><source src={this.state.source} /><ControlBar autoHide={false} /></Player><div className="py-3"><Button onClick={this.play} className="mr-3">play()</Button><Button onClick={this.pause} className="mr-3">pause()</Button><Button onClick={this.load} className="mr-3">load()</Button></div><div className="pb-3"><Button onClick={this.changeCurrentTime(10)} className="mr-3">currentTime += 10</Button><Button onClick={this.changeCurrentTime(-10)} className="mr-3">currentTime -= 10</Button><Button onClick={this.seek(50)} className="mr-3">currentTime = 50</Button></div><div className="pb-3"><Button onClick={this.changePlaybackRateRate(1)} className="mr-3">playbackRate++</Button><Button onClick={this.changePlaybackRateRate(-1)} className="mr-3">playbackRate--</Button><Button onClick={this.changePlaybackRateRate(0.1)} className="mr-3">playbackRate+=0.1</Button><Button onClick={this.changePlaybackRateRate(-0.1)} className="mr-3">playbackRate-=0.1</Button></div><div className="pb-3"><Button onClick={this.changeVolume(0.1)} className="mr-3">volume+=0.1</Button><Button onClick={this.changeVolume(-0.1)} className="mr-3">volume-=0.1</Button><Button onClick={this.setMuted(true)} className="mr-3">muted=true</Button><Button onClick={this.setMuted(false)} className="mr-3">muted=false</Button></div><div className="pb-3"><Button onClick={this.changeSource('sintelTrailer')} className="mr-3">Sintel teaser</Button><Button onClick={this.changeSource('bunnyTrailer')} className="mr-3">Bunny trailer</Button><Button onClick={this.changeSource('bunnyMovie')} className="mr-3">Bunny movie</Button><Button onClick={this.changeSource('test')} className="mr-3">Test movie</Button></div><div>State</div><pre><PrismCode className="language-json">{JSON.stringify(this.state.player, null, 2)}</PrismCode></pre></div>);}
}

api见官网：https://video-react.js.org/components/player/

video-react相关推荐

React Native之React速学教程
本文出自<React Native学习笔记>系列文章. React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识.虽然官方也有相 ...
react-native ES5与ES6写法对照表
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-es5-and-es6-writing-tabl ...
前端面试之ES5与ES6的区别
首先我们来看一下ES是什么?全称为ECMAScript,是JavaScript语言的核心,它规定了js的组成部分:语法.类型.语句.关键字.保留字.操作符.对象.下面直奔两者不同: 1. 系统库的引用 ...
使用Python和Twilio通过短信通知主持视频办公时间。
当你想到"办公时间"时,你会想到什么?也许你会想象一位教授会留出时间让学生去他们的办公室寻求建议或接受指导.或者,你可以想象一位企业领导在日历上为同事和直接下属留出空间,让他们提问 ...
基于 React video 视频打点
HTML <video> 元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放. currentTime:读取 CurentTime 返回一个双精度浮点值,指示以 ...
React使用Video.js播放rtmp，hls视频
公司最近项目需要实时播放摄像头传入的视频,支持rtmp,hls,rtsp格式视频.于是开始封装了一个简单的视视频播放器,刚开始使用的React-palyer但是React-player好像不支持rtm ...
react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
react 监听组合键_投资组合中需要的5个React项目
react 监听组合键 You've put in the work and now you have a solid understanding of the React library. 您已经完 ...
todoist 无法登陆_通过构建Todoist克隆将您的React技能提升到一个新的水平
todoist 无法登陆 In this intermediate React course from Karl Hadwen, you will learn how to create the po ...
react中使用构建缓存_通过构建海滩度假胜地网站，了解如何使用React，Contentful和Netlify...
react中使用构建缓存 In this full course from John Smilga you will learn React by building a beach resort we ...

video-react

video-react 使用指南

安装

使用

栗子：

video-react相关推荐

最新文章

热门文章