英文:
How can I seamlessly change a playing video on a website?
问题
我正在开发一个网络应用程序，其主要功能是具有同一事件的不同角度录音，当您播放视频时，可以立即切换到另一个录音，同时保持视频中的位置。实际上，这个网络应用程序已经可以工作了，我可以从JS代码中加载另一个视频并定位它，但是之间存在轻微的延迟。我希望实现的目标是使切换完全无缝，完全即时。您有任何想法如何实现这一点？
代码是在React中编写的，目前相关部分如下所示：
const videoRef = useRef<HTMLVideoElement>(null);
const setTrackUrl = (url: string) => {
const video = videoRef.current!;
const currentTime = video.currentTime || 0;
video.addEventListener("loadeddata", () => {
video.currentTime = currentTime;
})
video.setAttribute('src', url);
video.load();
video.play();
}
因此，我需要指示浏览器在新视频加载完成之前继续播放视频，但我找不到任何相关的API调用。
英文:
I'm developing a webapp whose main feature is that it has different angle recordings of the same event and as you play a video, you can immediately change to another recording, keeping also the position in your video. Actually, the webapp already works, I can load another video and position it from JS code but there is a small lag in between. What I would like to achieve is to make the change totally seamless, completely immediate. Do you have any idea how I could achieve that?
The code is in React, this is how the relevant part looks like at the moment:
const videoRef = useRef<HTMLVideoElement>(null);
const setTrackUrl = (url: string) => {
const video = videoRef.current!;
const currentTime = video.currentTime || 0;
video.addEventListener("loadeddata", () => {
video.currentTime = currentTime;
})
video.setAttribute('src', url);
video.load();
video.play();
}
So I would need to instruct the browser to keep playing the video until the new one is loaded but I don't find any API call for that.
答案1
得分: 0
一种常见的实现在浏览器中立即切换视频的方式是在页面中拥有多个视频元素，并根据需要隐藏和显示它们。
例如，你可以在你的代码中拥有当前的视频，视频引用为videoRef，播放并可见，然后创建一个新的视频，例如videoRef2，加载它并开始播放，但在准备好切换之前将其隐藏。当你想要切换时，显示新的视频并隐藏原始的视频。
如果你的应用程序中只有一两个角度，那么你可能可以一直流式传输所有视频。但如果你有更多的视频角度，那么浏览器的处理和流式传输开销可能会变得过高，以至于无法同时流式传输所有视频，因此你可能需要在你的应用程序中添加一些逻辑来尝试预测用户最有可能选择的下一个角度。
英文:
One common way to achieve this type of immediate switch between videos on a browser is to have multiple video elements in your page and to hide and show them as needed.
For example, you could have your current video, videoRef in your code, playing and visible and create a new video, e.g. videoRef2, load it and start playing but hide it until you are ready to switch. When you want to switch you show the new video and hide the original one.
If you have only one or two angles in your application then you can probably have all the videos streaming all the time. If you have more than that then the browser processing and streaming overhead will likely become too high to stream them all simultaneously so you may want some logic in your app to try to predict the most likely next angle the user will choose.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论