OvenPlayer icon indicating copy to clipboard operation
OvenPlayer copied to clipboard
verified publisher icon AirenSoft

OvenPlayer in React.js component

Open Ramy-Ab opened this issue 4 years ago • 7 comments

i need help about using OvenPlayer in React.js component couldn't find any way to do that , is it possible ? if yes can you please add here a code snippet ?

Ramy-Ab avatar Jan 02 '22 15:01 Ramy-Ab

I've started work on a Vue wrapper for OvenPlayer, so I may soon be able to offer some tips, as Vue's component lifecycle is similar. I'll keep you posted.

command-tab avatar Jan 06 '22 00:01 command-tab

@command-tab okay bro thank you when you make it work just inform me please

Ramy-Ab avatar Jan 06 '22 08:01 Ramy-Ab

With the release of OvenPlayer 0.10.15, it's pretty straightforward to wrap OvenPlayer in a Vue or React component:

  1. Add ovenplayer to your package.json and install it
  2. Create a new component file and import the library with import OvenPlayer from 'ovenplayer'
  3. Make the component accept an options prop
  4. In React's equivalent of mounted (i.e. when the DOM node for the component is actually applied to the DOM), instantiate OvenPlayer and pass in a reference to the target DOM node and the options prop: OvenPlayer.create(this.$refs.player, this.options)
  5. (Maybe Vue-specific?) Bind OvenPlayer events to component events so OvenPlayer events trigger component-level events that consumers of your component can act upon
  6. In the component's teardown/deconstructor method, clean up OvenPlayer: this.player.remove()

Here's a minimal but working Vue component example: https://gist.github.com/command-tab/e8809b0857fbf6a223eb4bbf7e236751

command-tab avatar Jan 08 '22 04:01 command-tab

thank you so much bro im gonna try it and i will ask you if i have any questions about it

Ramy-Ab avatar Jan 09 '22 20:01 Ramy-Ab

According to document when playing llhls it require hls.js how can I load that to oven player? Screenshot 2023-05-10 at 11 36 11 AM

un-hongly avatar May 10 '23 04:05 un-hongly

While I haven't tried it, it appears you need to include hls.js in your <head> to make it available:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>

Then, wherever you invoke OvenPlayer, tell it to use a source that's type: 'hls' and ensure you pass a .m3u8 HLS playlist URL to the file option.

command-tab avatar May 10 '23 21:05 command-tab

With the release of OvenPlayer 0.10.15, it's pretty straightforward to wrap OvenPlayer in a Vue or React component:

  1. Add ovenplayer to your package.json and install it
  2. Create a new component file and import the library with import OvenPlayer from 'ovenplayer'
  3. Make the component accept an options prop
  4. In React's equivalent of mounted (i.e. when the DOM node for the component is actually applied to the DOM), instantiate OvenPlayer and pass in a reference to the target DOM node and the options prop: OvenPlayer.create(this.$refs.player, this.options)
  5. (Maybe Vue-specific?) Bind OvenPlayer events to component events so OvenPlayer events trigger component-level events that consumers of your component can act upon
  6. In the component's teardown/deconstructor method, clean up OvenPlayer: this.player.remove()

Here's a minimal but working Vue component example: https://gist.github.com/command-tab/e8809b0857fbf6a223eb4bbf7e236751

in es modules and vue 3 error

Error initializing HLS.

zdimaz avatar Nov 29 '23 11:11 zdimaz