ReactJs 换时间视频html5
Posted
技术标签:
【中文标题】ReactJs 换时间视频html5【英文标题】：ReactJs change time video 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>
)
【问题讨论】：
【参考方案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
【讨论】：
我看到了这个例子，现在它似乎不再可用了。我要做的是单击一系列按钮，我必须确保更改视频的时间。所以我不知道如何使用您的视频参考示例。 我看到了链接，但是只有一个按钮，如果单击该按钮，则会调用作为道具传递的函数。我不明白这是什么中心？ 关于如何保存当前时间的任何提示？以上是关于ReactJs 换时间视频html5的主要内容，如果未能解决你的问题，请参考以下文章