CODEWITHSUNDEEP
javascripthtmlreactjsvideohtml5-video
Paul
Paul

Reputation: 4430

ReactJs change time video html5

I'm developing a site where I use ReactJs, I use the html5 <video attribute to be able to view a video, I have to make sure I can change the timestamp of the video.

How can I do, any advice?

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SubTitle</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min2.css" />
    <style>
    a {
        cursor: pointer;
    }

    .help-block {
        font-size: 12px;
    }
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #222222;
        color: #fff;
    }
    textarea {
      resize: none;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
        outline: none !important;
    }

    textarea::-webkit-input-placeholder {
        color: black !important;
    }

    textarea:-moz-placeholder { /* Firefox 18- */
        color: black !important;
    }

    textarea::-moz-placeholder {  /* Firefox 19+ */
        color: black !important;
    }

    textarea:-ms-input-placeholder {
        color: black !important;
    }
    </style>
</head>

<body>
    <div id="app"></div>
</body>

</html>

SubPage.js

import React from 'react';
import styles from '../Css/Styles.module.css';

class SubPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

  }

    render() {
      return (
        <div className={styles.video}>
        <video controls autoPlay="true">
          <source src="https://www89.uptostream.com/9kanocdc72/360/0/video.mp4" type="video/mp4" />
          <track label="English" kind="subtitles" srcLang="en" src="life.vtt" default />
        </video>
        </div>
       )
    }
}

Upvotes: 6

Views: 10048

Answers (1)

user2340824
user2340824

Reputation: 2152

handleVideoMounted = element => {
  if (element !== null) {
    element.currentTime = 30;
  }
};

render() {
  return (
    <video controls autoPlay={true} ref={this.handleVideoMounted}> 
.....

An HTMLMediaElement has a currentTime attribute which allows you to change the time of a source. It is defined in seconds. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

By using Ref Callback, once the Video Element has mounted, you will be passed the element which allows you to set its currentTime.

The null check is because, when the Video is unmounted e.g. the component is unmounted, this Ref Callback is also called, but this time the parameter is null.

A working example here https://codesandbox.io/s/3vyjo04xqp

Upvotes: 3

Related Questions