ReactJs改变时间视频html5

Question

ReactJs改变时间视频html5

Pau*_*aul 6 html javascript video html5-video reactjs

我正在开发一个使用 ReactJs 的网站，我使用 html5 <video属性来观看视频，我必须确保可以更改视频的时间戳。

我该怎么办，有什么建议吗？

索引.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>

Run Code Online (Sandbox Code Playgroud)

子页面.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>
       )
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

use*_*824 3

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

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

Run Code Online (Sandbox Code Playgroud)

HTMLMediaElement 有一个currentTime属性，允许您更改源的时间。它以秒为单位定义。https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

通过使用引用回调，一旦安装了视频元素，您将收到允许您设置其currentTime.

检查null是因为，当Video被卸载时，例如组件被卸载时，这个Ref Callback也会被调用，但这次参数为null。

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

归档时间：	6 年，8 月前
查看次数：	8836 次
最近记录：	6 年，8 月前