ReactJs меняют время видео html5 - PullRequest
Новая
       8

ReactJs меняют время видео html5

1 голос
/ 04 мая 2019

Я разрабатываю сайт, где я использую ReactJs, я использую HTML5 <video атрибут, чтобы иметь возможность просматривать видео, я должен убедиться, что я могу изменить метку времени видео.

Как мне это сделать, любой совет?

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>
       )
    }
}

1 Ответ

0 голосов
/ 04 мая 2019 
handleVideoMounted = element => {
  if (element !== null) {
    element.currentTime = 30;
  }
};

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

HTMLMediaElement имеет атрибут currentTime, который позволяет изменять время источника.Это определяется в секундах.https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

Используя Ref Callback, после монтирования видеоэлемента вам будет передан элемент, который позволяет установить его currentTime.

Проверка null происходит потому, чтокогда видео отключено, например, компонент не подключен, этот Ref Refback также вызывается, но на этот раз параметр имеет значение null.

Рабочий пример здесь https://codesandbox.io/s/3vyjo04xqp

...