admin管理员组

文章数量:1394217

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=".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=".mp4" type="video/mp4" />
          <track label="English" kind="subtitles" srcLang="en" src="life.vtt" default />
        </video>
        </div>
       )
    }
}

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./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./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
Share Improve this question asked May 3, 2019 at 21:12 PaulPaul 4,51215 gold badges69 silver badges156 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 3 
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/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 ponent is unmounted, this Ref Callback is also called, but this time the parameter is null.

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

本文标签： javascriptReactJs change time video html5Stack Overflow

版权声明：本文标题：javascript - ReactJs change time video html5 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744575067a2613572.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。