cycjimmy/jsmpeg-player

Controls

Mrpsousa opened this issue · 4 comments

Hi, gyus, how can i enable básics controls into the player? i am using on react:

import React, { Component } from 'react';
import JSMpeg from '@cycjimmy/jsmpeg-player';

export default class JsmpegPlayer extends Component {
constructor(props) {
super(props);

this.els = {
  videoWrapper: null,
};

};

render() {
return (
<div style={{height:'500px', width:'900px'}}
className={this.props.wrapperClassName}
ref={videoWrapper => this.els.videoWrapper = videoWrapper}>

);
};

componentDidMount() {
this.videoPlayer = new JSMpeg.VideoElement(this.els.videoWrapper, this.props.videoUrl, this.props.options, this.props.overlayOptions);
};

// pause(){
// this.videoPlayer.pause();
// }
};

and call it that:

  <JsmpegPlayer
    wrapperClassName="video-wrapper"
    videoUrl='ws://localhost:9999'
    options={{}}
    overlayOptions={{autoplay: true}}
  />

It seems that your code works. And I just enhance the react jsmpeg player demo. https://github.com/cycjimmy/react-jsmpeg-player-demo

This library does not provide full-screen mode. But I think you can control the styles of the video wrapper and canvas elements to meet your needs.

Sry for re-opening this issue.
I am using this player in my react application which has many components including live video streaming, but i want to use controls like play/pause, skipping, volume control in the player window (Not like play, pause, stop button as given in the demo), so how can i use control options in a player?

@cycjimmy @Mrpsousa if you could help me on this issues.