代码之家 › 专栏 › 技术社区 › GÊá´á´á´ÊCá´á´

如何预加载或检测CDN承载的视频何时加载到盖茨比的折叠上方?

gatsby iframe video

GÊá´á´á´ÊCá´á´ · 技术社区 · 3 年前

希望在我的手机中的导航和折叠上方实现一个16:9的视频 指数js 但我想知道如何在呈现页面之前预装视频。在我的研究中,我读过 Working with Video 这显示了如何使用iframe实现:

import React from "react"
const Video = ({ videoSrcURL, videoTitle, ...props }) => (
  <div className="video">
    <iframe
      src={videoSrcURL}
      title={videoTitle}
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      frameBorder="0"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
      allowFullScreen
    />
  </div>
)
export default Video

为了获得最佳效果,我们提到了使用CDN和Vimeo插件 gatsby-source-vimeo-all :

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'

const query = graphql`
  {
    vimeo(link: { eq: "https://vimeo.com/315401283/dfd80bf8c1" }) {
      name
      description
      duration
      link
      aspectRatio
      width
      height
      srcset {
        ...GatsbyVimeoSrcSet
      }
      pictures {
        uri
      }
      user {
        name
      }
    }
  }
`

const Video = () => {
  const { vimeo } = useStaticQuery(query)
  return <video src={vimeo.srcset[0].link} controls autoPlay loop />
}

export default Video

我已经在删除带有React组件的小型设备的视频,React组件可以检测浏览器大小。我的想法是使用 盖茨比浏览器。js 通过访问位置数据来实现 location.pathname 但我找不到任何关于如何做到这一点的文件。当我研究预加载视频时,我读到:

盖茨比研究:

在《盖茨比》中,视频应该如何处理 指数js 位于折叠上方,或者在盖茨比中是否有方法检测何时加载iframe,以便我可以使用条件渲染?

0 回复 | 直到 3 年前

Ferran Buireu 3 年前

盖茨比有没有办法检测iframe何时加载可以使用条件渲染吗?

确实有,而且我认为这将是最简单、最自然的解决方案,使用 onLoad 事件

<iframe
  src={videoSrcURL}
  title={videoTitle}
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  frameBorder="0"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
  allowFullScreen
  onLoad={someOnLoadFunction}
/>

在这种情况下,可以使用 someOnLoadFunction 有条件地呈现。

总的来说,我不确定这个解决方案是否是您想要的,因为如果不通过浏览器请求,就无法预加载(或延迟加载)iframe。但是,根据您的规格,您可以尝试使用 loading 财产 is not fully supported 但也许你想要的是 装载 事件回调。

<iframe
  src={videoSrcURL}
  title={videoTitle}
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  frameBorder="0"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
  allowFullScreen
  onLoad={someOnLoadFunction}
  loading="lazy"
/>