Updating source URL on HTML5 video with React

I want to update the source tag in a HTML5 video element so that when I click a button, whatever’s playing switches to a new video.

I have a Clip component that returns an HTML5 video element, with the source URL provided via props.

function Clip(props) {
  return (
    <video width="320" height="240" controls autoPlay>
      <source src={props.url} />
    </video>
  )
}

I also have a Movie component, which contains multiple URLs, each corresponding to a section of the movie. It also contains a position attribute, which acts like an iterator by remembering which section is currently playing.

class Movie extends Component {
  constructor() {
    super();
    this.state = {
      sections: [
        'https://my-bucket.s3.amazonaws.com/vid1.mp4',
        'https://my-bucket.s3.amazonaws.com/vid2.mp4'
      ],
      position: 0
    };
  }
  render() {
    const sections = this.state.sections
    const position = this.state.position

    return (
      <div>
        {position}
        <Clip url={sections[position]} />
        <button onClick={() => this.updatePosition()}>Next</button>
      </div>
    )
  }
  updatePosition() {
    const position = this.state.position + 1;
    this.setState({ position: position });
  }
}

The Movie component renders a Clip component and a “Next” button. When the Next button gets clicked, I want to update the position attribute and re-render the HTML5 video element using the next URL from sections.

As of now, when I hit Next the HTML5 video source tag updates, but the element continues playing the video from the previous URL. Can anyone help me figure out how to reset the video element?

Update: I created a JSFiddle, which you can see here.

Update 2: Updating the src attribute on the video element works!

14 thoughts on “Updating source URL on HTML5 video with React”

Leave a Comment