preloadVideo()
此函数是 @remotion/preload
包的一部分。
此函数在 DOM 中预加载视频,以便在挂载视频标签时可以立即播放。
虽然预加载对于渲染并非必需,但它可以帮助在 <Player />
和 Studio 中实现无缝播放。
preloadVideo()
的替代方案是 prefetch()
API。请参阅 @remotion/preload
vs prefetch()
来决定哪个更适合您的用例。
用法
tsx
import {preloadVideo } from "@remotion/preload";constunpreload =preloadVideo ("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");// If you want to un-preload the video laterunpreload ();
tsx
import {preloadVideo } from "@remotion/preload";constunpreload =preloadVideo ("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");// If you want to un-preload the video laterunpreload ();
工作原理
- 在 Firefox 上,它会在文档的 head 元素中附加一个
<link rel="preload" as="video">
标签。 - 在其他浏览器上,它会在文档的 body 元素中附加一个
<video preload="auto">
标签。
处理重定向
如果视频 URL 重定向到另一个 URL,则无法预加载原始 URL。
如果您包含的 URL 是未知的,请使用 resolveRedirect()
来以编程方式获取遵循潜在重定向的最终 URL。
如果资源不支持 CORS,resolveRedirect()
将失败。如果资源重定向,并且不支持 CORS,则无法预加载该资产。
此代码片段尝试尽最大努力预加载视频。如果无法解析重定向,则尝试预加载原始 URL。
tsx
import {preloadVideo ,resolveRedirect } from "@remotion/preload";import {Video } from "remotion";// This code gets executed immediately once the page loadsleturlToLoad ="https://player.vimeo.com/external/291648067.hd.mp4?s=94998971682c6a3267e4cbd19d16a7b6c720f345&profile_id=175&oauth2_token_id=57447761";resolveRedirect (urlToLoad ).then ((resolved ) => {// Was able to resolve a redirect, setting this as the video to loadurlToLoad =resolved ;}).catch ((err ) => {// Was unable to resolve redirect e.g. due to no CORS supportconsole .log ("Could not resolve redirect",err );}).finally (() => {// In either case, we try to preload the original or resolved URLpreloadVideo (urlToLoad );});// This code only executes once the component gets mountedconstMyComp :React .FC = () => {// If the component did not mount immediately, this will be the resolved URL.// If the component mounted immediately, this will be the original URL.// In that case preloading is ineffective anyway.return <Video src ={urlToLoad }></Video >;};
tsx
import {preloadVideo ,resolveRedirect } from "@remotion/preload";import {Video } from "remotion";// This code gets executed immediately once the page loadsleturlToLoad ="https://player.vimeo.com/external/291648067.hd.mp4?s=94998971682c6a3267e4cbd19d16a7b6c720f345&profile_id=175&oauth2_token_id=57447761";resolveRedirect (urlToLoad ).then ((resolved ) => {// Was able to resolve a redirect, setting this as the video to loadurlToLoad =resolved ;}).catch ((err ) => {// Was unable to resolve redirect e.g. due to no CORS supportconsole .log ("Could not resolve redirect",err );}).finally (() => {// In either case, we try to preload the original or resolved URLpreloadVideo (urlToLoad );});// This code only executes once the component gets mountedconstMyComp :React .FC = () => {// If the component did not mount immediately, this will be the resolved URL.// If the component mounted immediately, this will be the original URL.// In that case preloading is ineffective anyway.return <Video src ={urlToLoad }></Video >;};