change source url not work

[jobn123]

i want to change player url ,i use setState to change source url but player still play old url

• version # 0.3.3

here is my code

import React from 'react';

import "../../../node_modules/video-react/dist/video-react.css";
import './index.css'
import { Player, ControlBar, ReplayControl,
  ForwardControl, CurrentTimeDisplay,
  TimeDivider, PlaybackRate
} from 'video-react';

import Selections from './Selections'

export default class VideoPlayer extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      playUrl: "http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4"
    }
    this.changeUrl = this.changeUrl.bind(this)
  }
  handleClick(){
    this.props.navigator.pushPage({component: Main, key: "Main_page"});
  }
  changeUrl(url) {
    this.setState({playUrl: url})
  }
  render() {
    return (
      <Page>
        <div style={styles.videoTitle}>{this.props.title}</div>
        <Player poster="/assets/poster.png" >
          <source
           src={this.state.playUrl}/>
          <ControlBar>
            <ReplayControl disabled />
            <ForwardControl seconds={30} />
            <CurrentTimeDisplay order={4.1} />
            <TimeDivider order={4.2} />
            <PlaybackRate rates={[1, 1.25, 1.5, 2]} order={7.1} />
          </ControlBar>
        </Player>
        <Selections changeUrl={this.changeUrl}/>
      </Page>
    );
  }
}

VideoPlayer.defaultProps = {
  title: 'test',
}

when i fire changeUrl event , url changed but player still play previous url

Expected behaviour

when i fire changeUrl event , url changed and player play new url

[JimLiu]

Fixed it in 0.4.2, and you need to call player.load() after you changed your source. FYI: http://www.w3schools.com/tags/av_met_load.asp

I added an example for this case:
https://video-react.github.io/components/player/

BTW: we added redux as peerDependencies, so you need to add redux to your project if you have not.

[jobn123]

thanks, it works

[kenanchristian]

Hi, I can't seem to get it working. This is my code snippet

Got this error

Where do I do wrong?

[JimLiu]

@kenanchristian
Could you use two players? one for HLS, one for mp4

[kenanchristian]

@JimLiu Yup it's working now. Thanks! 👍

[kenanchristian]

Does player.load() also reload the HLSSource ? It works fine when I change from MP4 to HLS or the other way around. But it doesn't load when I change the source from HLS to HLS, is there any additional steps to do this?

[JimLiu]

No, you need to call hls api again.

[tranvanthuc]

player.load()

I fixed it, thank you so much