我可以预加载多个视频资源以加载到同一个 HTML5
我正在研究一个 Web 应用程序的详细信息，该应用程序涉及顺序加载一长串（非常短的）视频剪辑，一个接一个，偶尔由用户输入建立视频剪辑加载的新方向。
我希望能够让浏览器一次预加载五个视频剪辑。然而，我们目前使网站工作的方式是通过单个视频元素，该元素的 src 属性通过 JavaScript 不断更新。
有没有一种简单的方法可以让浏览器预加载多个视频剪辑，即使我最终将它们全部加载（一次一个）到同一个视频元素中？
I'm working out details on a web application which involves the sequential loading of a long series of (very short) video clips, one after the other, with occasional input from the user establishing new directions for which video clips to load.
I would like to be able to have the browser preload the video clips five at a time. However, the way that we currently have the site working is by means of a single video element which is having its src attribute continually updated through JavaScript.
Is there a straightforward way I can get the browser to preload multiple video clips even though I am ultimately loading them all (one at a time) into the same video element?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以通过在 JavaScript 中创建
![]()
src属性来在浏览器中预加载图像。尽管任何规范都没有要求，但所有浏览器都会下载图像并缓存它（假设它们的缓存尚未禁用）。我不知道这是否适用于 HTML5 中的
元素，但可能可以。你能尝试一下吗？You can preload images in browsers by creating an
<img>tag in JavaScript, and setting itssrcattribute. Although it’s not required by any spec, all browsers then download the image and cache it (assuming their caches haven’t been disabled).I’ve no idea if that works with the
<video>element in HTML5, but it might do. Could you give it a go?我很好奇你是否碰巧完成了你正在做的项目？我正在尝试带有播放列表的 html5 视频播放器，想知道您是否遇到了任何大问题。加载/播放多个视频文件是否存在性能问题？你能在 iPad 上运行这个程序吗？你有IE的后备方案吗？
我的方法是：有一个
元素和多个隐藏的元素，并使用 canvas drawImage() 函数在之间显示和交叉淡入淡出视频。I was curious if you happened to finish the project you were working on? I am experimenting with an html5 video player with a playlist and was wondering if you ran into any big problems. Were there performance issues with loading/playing multiple video files? Were you able to run this on an iPad? Did you have a fallback for IE?
My approach was going to be: have a single
<canvas>element with multiple hidden<video>elements and use the canvas drawImage() function to display and crossfade between videos.