Menu
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.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>
)
}
}
826
document. getElementById("video1"). currentTime = 10; The Javascript statement sets the video1 video's current time to the 10-second mark.
You may add a loadedmetadata event handler to the video element. When the event is fired, the duration and dimensions of the media and tracks are known.
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.org/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 component is unmounted, this Ref Callback is also called, but this time the parameter is null.
A working example here https://codesandbox.io/s/3vyjo04xqp
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
