如何解决将HTML Video元素的开始位置设置为特定时间时出现问题
我正在构建使用HTML Video的视频播放器的原型。我的项目使用的是React打字稿,但这与从HTML Video元素触发的事件无关。
我正在尝试对其进行编码,以使视频加载并从特定位置开始播放(例如+ 10秒),而尚未播放的视频中显示的帧反射了10秒。
我的问题是事件如何触发。我设置了以下事件侦听器,以输出到控制台,以便了解发生了什么。 loadMetadata,loadedData,canplay和canplaythrough。我希望这些事件将按此顺序触发。无论我是通过http请求还是本地存储文件加载mp4视频,都只会触发metaload事件。但是,如果我对触发videoElement.currentTime = 10的元数据加载事件进行了回调,则会触发其他事件。
问题是,当我然后播放视频时,currentTime并没有改变(尽管在loadMetdata回调中调用了videoElement.currentTime = 10),视频仍然从头开始播放(0秒),并且显示的帧确认也(这是视频的第一帧)。 我已经计算出是否将videoElement.currentTime = 10放在loadedmetadata回调中以触发其他事件,然后将另一个videoElement.currentTime = 10放在任何其他事件回调中,然后它会更新开始时间和帧更新以反映这一点。 有谁知道为什么会这样,以及实现我想要的结果的最佳方法是什么?
为了更清晰,我在下面的代码中进行复制。
const [videoElement] = useVideoElement()
React.useEffect(() => {
if (videoElement) {
videoElement.addEventListener(
"loadedmetadata",handleLoadedMetaData
)
videoElement.addEventListener("loadeddata",handleLoadedData)
videoElement.addEventListener("canplay",handleCanPlay)
videoElement.addEventListener(
"canplaythrough",handleCanPlayThrough
)
}
function handleLoadedMetaData(event) {
console.log("loadedmetadata event received")
videoElement.currentTime = 10
}
function handleLoadedData(event) {
console.log("loaded data event received")
videoElement.currentTime = 10
}
function handleCanPlay(event) {
console.log("canPlay event received")
}
function handleCanPlayThrough(event) {
console.log("canPlayThrough event received")
}
return () => {
if (videoElement) {
videoElement.removeEventListener(
"loadedmetadata",handleLoadedMetaData
)
videoElement.removeEventListener("loadeddata",handleLoadedData)
videoElement.removeEventListener("canplay",handleCanPlay)
videoElement.removeEventListener(
"canplaythrough",handleCanPlayThrough
)
}
}
},[videoElement])
}```
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。