嵌入式视频在什么时候开始下载流数据？是直接渲染它还是我们尝试播放它？

发布于 2025-02-05 19:58:16 字数 2659 浏览 3 评论 0原文

我知道这是一个奇怪的问题，但是当我的朋友问我这个问题时，我会感到非常困惑，因为这对我们的着陆页绩效很重要，我不太确定这一点。因此，这是我的问题：

可以说，在我的着陆页上，我们通常在构建后的总尺寸约为300kb（这已经包括所有资产，而没有任何嵌入式视频）。但是最近我们想对其进行修改，我们的意见分为两者：

在我看来，当我们嵌入视频时（从YouTube或Local嵌入视频）时，它将在我们打开页面时直接下载，因此这意味着我们的用户需要等待（n * 1MB）尺寸，直到打开并需要大量时间（让我们现在排除懒惰负载，因为我们的主要关注点是用户需要多少数据来打开我们的着陆点页）
，而我的朋友告诉我这只会播放数据时，流传输数据（从服务器下载数据）。除非我们将其自动播放

否则我们对此问题的关注是：

如果1个嵌入式视频的大小为1-5 MB（最小），我们希望嵌入5-10（最小值5）视频）视频中，我们在目标页面中拥有的每个功能（我们可以将其输入本地文件或YouTube），因此请记住，主要情况是围绕这两种嵌入式方法）。因此，这不是会使我们的页面真的很慢，因为它需要围绕300 +（n*1000*5）KB在最低视频条件下打开它，如果我们只在我们只渲染数据时直接下载数据之后才下载它

或者只有在我们单击“播放按钮 ）

<!DOCTYPE html>
<html>
<head>
<title>Embedded Video</title>
</head>
<body>

<h1>List of Features:</h1>

<div>
  <h2>Feature 1</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div>
  <h2>Feature 2</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div>
  <h2>Feature 3</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div>
  <h2>Feature 4</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

... 

<div>
  <h2>Feature N</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

它，？这让我对此感到非常困惑。

PS：哦，如果可以的话，可以解释如果我们使用＆lt; video＆gt;或＆lt; audio＆gt;标签，它也有与上述情况相同的情况吗？

原文

I know this is a strange question, but When my friend ask me regarding this, I become quite confused since this is matter for our landing page performance and I'm not quite sure regarding this. So this is my question:

Let say, in my landing page, we usually have a total size around 300Kb after build (this is already include all of the asset, without any embedded video). But recently we want to revamp it and our opinion split into two:

Where in My opinion when we embedded the video (from youtube or local) it will directly download when we open the page, so it means our user will need to await around (n * 1Mb) size until it open and it will take a lot of time (let us exclude lazy load for now since our main concern is how much data that user will need to open our landing page)
While My friend told me that it will only stream the data (download the data from server) when we play it. Unless we make it auto play

So our concern regarding this problem is that:

What if 1 embedded video have a size of 1-5 Mb (minimum) and we want to embed around 5 - 10 (minimum 5 video) video for our every feature we have in our landing page (we can input it in local files or Youtube, so bear in mind that the major case is around this two embedded method). So, isn't it will make Our page really slow since it need around 300 + (n*1000*5) Kb for open it in minimum video condition if it directly download the data when we only render it, or it will only download it after we click the play button

for example this is our simple embedded method:

<!DOCTYPE html>
<html>
<head>
<title>Embedded Video</title>
</head>
<body>

<h1>List of Features:</h1>

<div>
  <h2>Feature 1</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div>
  <h2>Feature 2</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div>
  <h2>Feature 3</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div>
  <h2>Feature 4</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

... 

<div>
  <h2>Feature N</h2>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

can someone explain it to me regarding this video embedded can affect our landing page performance? it make me quite confused regarding this.

P.S:
Oh if you can, can explain what if we using <video> or <audio> tag too, is it have the same case as above too?

分享到QQ

分享到微博