> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 如何在 LanderLab 中将视频上传到落地页

> 将视频上传到 LanderLab 的 File Manager（文件管理器），复制其文件 URL，并通过 Video 元素和 HTML Video 提供方在落地页上播放。

将视频上传到编辑器的 **File Manager**（文件管理器），即可让它与你的落地页一起托管，然后通过 Video 元素播放。当你想使用自己的视频文件、而不是从 YouTube、Vimeo、Wistia 或 Loom 嵌入视频时，可以采用这种方式。

<Note>
  File Manager 支持上传最大 **20 MB** 的文件。对于更长或体积更大的视频，请将其托管在视频平台上，然后嵌入链接。
</Note>

## 如何将视频上传到 File Manager

<Steps>
  <Step title="打开 File Manager">
    在编辑器中打开你的落地页，点击左侧边栏中的 **File Manager** 图标。该面板会按类型列出页面文件，例如 **Index File** 和 **Images**。

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/LcJgB6EWNVGBwadB/images/upload-video-file-manager-panel.png?fit=max&auto=format&n=LcJgB6EWNVGBwadB&q=85&s=8001015fd595a651df144db192df54d0" alt="LanderLab 编辑器中的 File Manager 面板，列出了 index 文件和页面图片，并显示 Upload File 按钮" width="1921" height="963" data-path="images/upload-video-file-manager-panel.png" />
    </Frame>
  </Step>

  <Step title="选择视频">
    点击 **Upload File**。在 **Upload new file** 窗口中，点击 **Click to Select File**，然后从电脑中选择视频。
  </Step>

  <Step title="选择目录并上传">
    打开 **Select Directory** 下拉菜单，选择 **/**，将视频上传到根文件夹。点击 **Upload**。

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/LcJgB6EWNVGBwadB/images/upload-video-upload-dialog.png?fit=max&auto=format&n=LcJgB6EWNVGBwadB&q=85&s=bcd97e09304b42010beb5f708a703a26" alt="Upload new file 窗口，显示 Click to Select File 按钮和已选择 / 选项的 Select Directory 下拉菜单" width="831" height="332" data-path="images/upload-video-upload-dialog.png" />
    </Frame>
  </Step>
</Steps>

## 如何复制视频的文件 URL

上传的视频会显示在 File Manager 的 **Other Files** 下。将鼠标悬停在该文件上，然后点击 **Copy File Url** 图标即可复制其链接。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/LcJgB6EWNVGBwadB/images/upload-video-copy-file-url.png?fit=max&auto=format&n=LcJgB6EWNVGBwadB&q=85&s=e0e9af978b4fb3f1caad9b8e7e686d02" alt="File Manager 中 Other Files 下已上传的视频，Copy File Url 按钮已高亮显示" width="1919" height="958" data-path="images/upload-video-copy-file-url.png" />
</Frame>

## 如何将视频添加到页面

<Steps>
  <Step title="添加 Video 元素">
    点击左侧边栏顶部的 **+** 图标打开元素面板。将 **Content** 中的 **Video** 元素拖到页面的某个区域中。

    如果要替换页面上已有的视频，请直接选中那个 Video 元素。
  </Step>

  <Step title="选择 HTML Video">
    选中 Video 元素后，在右侧面板中打开 **Provider** 下拉菜单，选择 **HTML Video**。

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/LcJgB6EWNVGBwadB/images/upload-video-provider-dropdown.png?fit=max&auto=format&n=LcJgB6EWNVGBwadB&q=85&s=7cea96f13abfc31f8d9b8895c271ab7f" alt="Video 元素的 Provider 下拉菜单，列出了 YouTube、Vimeo、Wistia、Loom 和 HTML Video" width="291" height="378" data-path="images/upload-video-provider-dropdown.png" />
    </Frame>
  </Step>

  <Step title="粘贴文件 URL">
    将你复制的链接粘贴到 **URL** 字段中。

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/LcJgB6EWNVGBwadB/images/upload-video-url-field.png?fit=max&auto=format&n=LcJgB6EWNVGBwadB&q=85&s=e20b523480dd23b916ed6ca5585c63ad" alt="已选中的 Video 元素，Provider 为 HTML Video，URL 字段中填入了复制的文件 URL" width="1033" height="804" data-path="images/upload-video-url-field.png" />
    </Frame>
  </Step>

  <Step title="设置播放选项">
    在 **Playback** 下，选择视频是否要 **Autoplay**（自动播放）、显示 **Controls**（控件）、以 **Muted**（静音）状态开始播放，或 **Loop**（循环播放）。如果要在视频播放前显示一张图片，请添加 **Video Thumbnail**（视频缩略图）。

    <Warning>
      大多数浏览器只会自动播放静音的视频。如果你开启了 **Autoplay**，请将 **Muted** 设为 **Yes**。
    </Warning>
  </Step>

  <Step title="保存并重新发布">
    点击 **Save**，然后[重新发布](/zh/features/landing-pages/operations/republish)页面，使视频上线。
  </Step>
</Steps>

## 相关内容

<CardGroup cols={2}>
  <Card title="Video 元素" icon="video" href="/zh/features/editor/elements/video">
    嵌入来自 YouTube、Vimeo、Wistia、Loom 或你自己文件的视频。
  </Card>

  <Card title="复制图片 URL" icon="image" href="/zh/community/landing-page/copy-image-url">
    获取页面上任意图片的直接链接。
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.