javascript - 如何检测视频 Vimeo 何时完成播放反应?
问题描述
我在页面上添加 vimeo 作为链接并尝试使用 onEnded 事件,但它不起作用。我的代码在这里
const iframe = useRef(null)
const myCallback = () => (console.log('Video has ended'));
<iframe
ref={iframe}
src='some-link'
onEnded={() => myCallback()}
/>
请你给我一些可以帮助的建议
解决方案
我认为本地人iframe
无法从嵌入的 Vimeo 视频中检测到事件。你可以在这里参考官方的 Vimeo Player API 。如果您选择基于组件的方法,也有现有的 React 实现。
import React from "react";
import Vimeo from "@u-wave/react-vimeo";
export default function App() {
const myCallback = () => console.log("Video has ended");
return (
<div className="App">
<Vimeo video="347119375" autoplay onEnd={() => myCallback()} />
</div>
);
}
CodeSandBox:https
://codesandbox.io/s/so-react-vimeo-embed-6xt25
参考:https ://github.com/u-wave/react-vimeo
推荐阅读
- unity3d - 禁止用户在输入字段、下拉菜单和统一切换中进行交互
- node.js - 自动前缀在 node-sass-middleware 上不起作用
- python - 为什么我可以从子类中的父级访问一些参数(而有些则不能)?
- python - 在特定条件下连接两个数组?
- javascript - CSS / JS - 计算 div 的角度和间距
- php - 地址更改后 AmazonPay 更新验证金额
- python - 使用烧瓶在 Web 应用程序中显示保留优化可交互图
- android - 如何在 Activity 中使用 navGraphViewModels(不在 Fragment 中)
- elasticsearch - 如何在 Kibana 的可用字段列中获取 json 数据
- javascript - 为什么我得到:TypeError:无法解构“对象(...)(...)”的属性“患者”,因为它是未定义的?