时间戳

首页 > 解决方案 > 如何让中型视频在网站上观看无痛？

javascript - 如何让中型视频在网站上观看无痛？

问题描述

我的网站上有一个 63MB 的视频。它应该在打开站点后立即开始播放，但不是它，而是挂断了 20-30 秒。

我选择了最小分辨率 720p，H-264 编码。我还能做些什么来增加用户体验？

您可以在此处查看加载时间：

https://sendmade-portal-vercel.vercel.app/hu/product/zer-jewel-rez-gyertyatarto

这是如何video使用的：

<video
  ref={videoRef}
  width="100%"
  muted
  loop
  playsInline
  controls={props.isControlsVisible == true}
  autoPlay={props.isAutoplay == true}
  style={{
    width: "100%",
    height: "auto",
    zIndex: -1,
  }}

标签： javascripthtmlvideo

解决方案

65 MB 对于使用视频作为背景来说太大了。您必须遵守以下规定：

  1. 您的视频必须是无声的（删除音频）

  2. 使用默认图片（无论你的视频多小，加载和显示都需要几秒钟）

  3. 删除手机大小的视频

  4. 您的视频应该很短（根据经验，最好的报价是 10 - 20 秒）

您可以使用HandBrake程序（它是免费的）以最小的质量降低来减小视频大小。在测试中，您的视频大小减少到 7 MB（我使用非常快的 720p30 选项并在视频选项卡中选择 24FPS）

推荐阅读