ReactJs 换时间视频html5答案

【问题标题】：ReactJs change time video html5ReactJs 换时间视频html5
【发布时间】：2019-09-22 10:26:56
【问题描述】：

我正在开发一个使用 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>
       )
    }
}

【问题讨论】：

标签： javascript html reactjs video html5-video

【解决方案1】：

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 回调，一旦视频元素已挂载，您将获得允许您设置其 currentTime 的元素。

null 检查是因为在卸载视频时，例如组件卸载了，这个Ref Callback也被调用了，但是这次参数为null。

这里是一个工作示例https://codesandbox.io/s/3vyjo04xqp

【讨论】：

我看到了这个例子，现在它似乎不再可用了。我要做的是单击一系列按钮，我必须确保更改视频的时间。所以我不知道如何使用您的视频参考示例。
我看到了链接，但是只有一个按钮，如果单击该按钮，则会调用作为道具传递的函数。我不明白这是什么中心？
关于如何保存当前时间的任何提示？