代码之家  ›  专栏  ›  技术社区  ›  GʀᴜᴍᴘʏCᴀᴛ

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

  •  0
  • 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 年前
        1
  •  0
  •   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"
    />