问题标签 [video-reactjs]

视频以视频反应结束时是否有回调？我需要这样做，以便只有当用户到达视频末尾时，另一个组件才可用（出现在页面上）。

这是我的播放器组件：

视频反应

捕获帧

我正在尝试使用捕获帧从视频反应中获取快照，但是当我调用函数 captureFrame(video) 时，它会触发下一个。

错误：未捕获的 DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

我的代码如下：

我创建了一个包含视频的小部件部分（例如https://developers.zomato.com/widgets ），并且可以选择复制此小部件代码，因此我复制代码并将此代码粘贴到任何 html 页面，但适用于所有屏幕尺寸iframe 视频无响应。

当我们最初将播放器开始时间寻找到 00:00:00 以外的任何其他秒时，播放器在 00:00:00 秒开始，在播放到 00:00:01 秒或更短时间后，它会寻找我们提供的适当秒数开始播放视频。它发生在 safari 浏览器中。我们为此使用了video-react包。

播放器代码

当点击播放按钮 startIntro() 以下函数调用时，

每当用户播放/暂停使用Video-React实现的视频时，我都会尝试执行一些逻辑：

因此用户可以通过三种方式播放/暂停视频：

1. 使用BigPlayButton他可以播放视频：
   
2. 使用控制栏中的播放/暂停按钮：
   
3. 单击视频本身将播放/暂停它。

因此，我需要检测这三个事件中的任何一个事件何时发生。

对于第一个事件，“使用BigPlayButton他可以播放视频”，有人建议我自定义按钮本身。

对于第二个事件，“使用控制栏中的播放/暂停按钮”，我没有找到任何显示当用户单击控制栏按钮之一时如何检测 onClick 事件的内容。

对于第三个事件，“单击视频本身将播放/暂停它。” ，我什么也没找到。

我认为使用文档中提到的状态可以轻松解决所有三个问题：

State 我们使用 redux 来管理玩家状态。使用 getState 方法可以获取状态对象。这是所有州的列表。

这部分解决了暂停的问题：

paused：返回播放器是否已经暂停

但是，我没有找到在播放视频时改变的状态属性。最接近这个的是hasStarted：

hasStarted：返回视频是否已经开始

hasStarted 的问题在于它在第一次播放视频时被设置为 true。
因此，后续播放将不会被检测到。
我发现自己处于一种模棱两可的状态，其中this.player.paused&this.player.hasStarted都是true。
欢迎任何建议。

我正在使用Video-React在我的项目中实现视频播放功能：

我正在以这种方式跟踪状态变化：

问题：handleStateChange当我暂停/播放视频时被多次调用，它遵循这种模式。
换句话说， state 属性paused从 true 到 false 或从 false 到 true 转换，并且对于那个ONE STATE TRANSITITON，handleStateChange被称为MORE THAN ONCE并且递增（参见下面的评论）。

我只需要在这里执行一次逻辑：

但是，对于当前的实现，该逻辑将被执行多次。

知道我做错了什么吗？

我尝试了 subscribeToStateChange，但TypeError: playerRef.subscribeToStateChange is not a function 由于我使用的是功能组件，所以一直不确定我做错了什么。

这是 useEffect 钩子 - 尝试同时订阅和设置状态

有谁知道如何解决这个问题

我试图节省用户观看视频的时间。
我偶然发现了播放的视频属性：

值得一提的是played 属性——它告诉我们在媒体中播放了哪些时间范围。例如：

这对于建立媒体中最受聆听或观看的部分可能很有用。

在我的 React 应用程序中，我尝试像这样使用它：

handleStateChanged用于订阅视频播放器状态变化：

如果我在 [0..8] 和 [347..357] 秒之间播放视频，该函数会handleStateChange记录如下内容：

~ 文件：VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ begin_of_play_segment 0

~ 文件：VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 8

~ 文件：VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ begin_of_play_segment 347

~ 文件：VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 357

beginning_of_played_segment然后我想我可以计算所有和end_of_played_segment值之间的差异。

这种方法的问题在于，如果我在之前播放的片段中重播视频，例如，如果我在第 4 秒重新播放片段 [0..8] 中的视频，played则不会创建新片段，而是会继续计数在同一段。

例如，如果我在 4 点重新开始，并继续播放到 13 点，则段 [0..8] 将变为 [0..13]。

这是有道理的，因为该played属性告诉我们在媒体中播放了哪些时间范围。

但是，我想知道是否有一个属性可以让我实现我的目标，即每次用户在任何地方播放视频时创建一个新片段，以便我可以准确记录他观看视频所花费的时间。

当我转到控制台时出现错误。在 reactjs 中记录这个对象

json对象 {"title":"Rtv","length":-1,"params":{"tvg-logo":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Rtv_bangladesh.PNG/120px-Rtv_bangladesh.PNG","group-title":"America"},"file":"https://example.m3u8"}

错误：

TypeError：无法读取未定义的属性“tvg-logo”

（匿名函数）

src/App.js:88

85 | 86 | 返回 ( 87 | items.map((data,key)=>{

88 | console.log(数据['params']['tvg-logo']) | ^ 89 | 常量 {title,params} = 数据；90 | return(91 | 查看编译