Comments (4)
import React, { useEffect, useState } from "react";
import WFPlayer from "wfplayer";
export default () => {
const [waveform, setWaveform] = useState(null);
const $waveform = React.createRef();
const $video = React.createRef();
useEffect(() => {
const waveform = new WFPlayer({
container: $waveform.current,
mediaElement: $video.current,
});
setWaveform(waveform);
}, []);
return (
<div>
<video src="test.mp4" ref={$video} />
<div ref={$waveform} />
</div>
);
};
from wfplayer.
Lol - thanks :). This would clean up much of what I had done. Although...
-
I'm using it for audio and the file path needs to be dynamic, so I'm assuming I'd update the 3rd line (export default) to include a path parameter and pass to video src? And obviously I'd make the video tag an audio tag...
-
This wrapping doesn't make it obvious how I'd use the rest of the WFPlayer controls - e.g. the events, etc.. seek, setOptions, adding click handlers, etc... Seems like that wouldn't really work unless waveform is exposed externally, and then it gets messy, no?
from wfplayer.
If your file path is dynamic, it is recommended to destroy the waveform and re instantiate it every time the path changes
from wfplayer.
Thanks - that helps...although...I'm new to React...not sure how I would do that, right? Because React controls the lifecycle of the included component you created above that I would be including into my page?
from wfplayer.
Related Issues (20)
- Need help with making the scrolling smoother HOT 16
- Using WFPlayer with ArtPlayer HOT 1
- Delete this issue, Accidently created from wrong account.
- Need help with setting up the subtitles on the waveform HOT 1
- Large file issue HOT 15
- Browser crash on loading video/audio of duration around 2 hours HOT 6
- with window.OffscreenCanvas to undefined, options will never be dispatched to drawer.config HOT 6
- Add option for cursor position HOT 2
- +1h audio file destroys the ram HOT 4
- am getting undefinde error first time when i refresh the page HOT 2
- getting audio infinity HOT 1
- Could you please add a speed-changing function? HOT 2
- can you guide me how to create multiple instance of wfplayer at run time? HOT 5
- Add `waveBorder`, `waveBorderColor`, and `waveBorderWidth` Options
- adding grab_start and grab_end events HOT 2
- decodeAudioData crash HOT 1
- loader模块load函数执行错误
- Appending custom headers HOT 1
- Region support HOT 3
- Control audio without audio tag HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wfplayer.