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>
)
}
}
1 Answer
Reset to default 3handleVideoMounted = 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