媒体 — 视频

使用​ 视频 ​内容类型将托管在YouTubeVimeo上的视频添加到Page Builder 阶段。 将视频嵌入到页面或块或者产品和类别描述中很容易。

店面主页上的 视频 {width="700" modal="regular"}

NOTE
如果您对Page Builder内容进行了重大更改,建议您增加管理员会话生命周期以防止会话在您工作时超时。

视频工具箱

视频工具箱

工具
图标
描述
移动
移动图标 {width="25"}
将视频移动到舞台上的另一个位置。
(标签)
Video
将当前内容容器标识为视频。 将鼠标悬停在图像容器上可查看工具箱。
设置
设置图标 {width="25"}
打开​ Edit Video ​页面,您可以在其中更改视频和容器的属性。
隐藏
隐藏图标 {width="25"}
隐藏当前视频。
显示
显示图标 {width="25"}
显示隐藏的视频。
复制
图标重复 {width="25"}
制作视频的副本。
移除
删除图标 {width="25"}
从舞台上删除视频。
NOTE
隐藏元素存储在数据库中,对客户不可见。 但是,这些元素对搜索引擎和对您的网站爬网的其他机器人可见。 如果通过具有不可见属性的API调用发出请求,则它们也会作为内容的一部分返回,除非您将它们从阶段中删除。

添加视频

  1. 在开始之前,请导航到要嵌入的YouTubeVimeo视频,并复制链接。

    作为替代方法,您还可以将直接链接复制到有效的视频文件。 有关有效链接,请参阅基本视频设置

  2. 在Commerce管理员中,返回到要添加视频的Page Builder工作区。

  3. 在Page Builder面板中,展开​ Media ​并将​ Video ​占位符拖到舞台上。

    将视频占位符拖到舞台上 {width="600" modal="regular"}

  4. 将鼠标悬停在视频容器上以显示工具箱,然后选择​ 设置 设置图标 {width="20"} )图标。

  5. 对于​ Video URL,粘贴您复制的视频的URL。

    此示例中使用的Page Builder视频的URL是: https://www.youtube.com/watch?v=Y0KNS7C5dZA

  6. 要限制视频的​ Maximum Width,请输入最大宽度(以像素为单位)。

    如果留为空白,则视频宽度与容器允许的宽度一样宽,允许使用边距和边距。

  7. 单击右上角的​ Save ​以应用设置并返回到Page Builder工作区。

更改视频设置

  1. 将鼠标悬停在视频容器上以显示工具箱,然后选择​ 设置 设置图标 {width="20"} )图标。

  2. 根据以下部分修改设置:

  3. 单击右上角的​ Save ​以应用设置并返回到Page Builder工作区。

基本视频设置

  1. 若要更改当前视频,请更新​ Video URL

    请输入有效的视频URL。 有效的视频URL可以是指向的链接:

    • YouTube视频: https://youtu.be/CoDhMRUUjeI
    • Vimeo视频: https://vimeo.com/190156113
    • 有效的视频文件(建议使用.mp4): https://myvideos.com/spiral.mp4
  2. 要更改店面中视频允许的宽度,请输入新的​ Maximum Width ​像素。

    如果留为空白,视频会扩展容器的完整宽度,并减小边距和边距的容差。

  3. 要在页面加载后自动启动视频,请将​ Autoplay ​设置为Yes

    如果自动播放设置为Yes,则根据策略在播放时将视频静音。 但是,即使使用此设置,移动设备也无法自动播放您的视频。 有关这些策略的更多信息,请参阅以下开发人员资源:

    如果自动播放设置为No,则视频仅按用户要求播放。

Advanced

  1. 要控制视频在容器中的水平位置,请选择​ Alignment

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    选项 描述
    Default 应用在当前主题的样式表中指定的对齐默认设置。
    Left 沿视频容器的左边框对齐内容,并允许使用指定的任何边距。
    Center 将内容与视频容器的中心对齐,并允许指定的任何边距。
    Right 沿视频容器的右边框对齐内容,并允许指定的任何边距。
  • 设置应用于视频容器所有四个侧面的​ Border ​样式:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    选项 描述
    Default 应用关联样式表指定的默认边框样式。
    None 不提供任何容器边框的可见指示。
    Dotted 容器边框显示为虚线。
    Dashed 容器边框显示为虚线。
    Solid 容器边框显示为实线。
    Double 容器边框显示为双线。
    Groove 容器边框显示为一条开槽线。
    Ridge 容器边框显示为脊线。
    Inset 容器边框显示为内嵌行。
    Outset 容器边框显示为外线。
  • 如果设置了除None之外的边框样式,请完成边框显示选项:

    边框颜色 {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    选项 描述
    Border Color 通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。
    Border Width 输入边框线条宽度的像素数。
    Border Radius 输入像素数,以定义用于使边框每个角倒圆角的半径大小。
  • (可选)从当前样式表中指定要应用于视频容器的​ CSS classes ​的名称。

    用空格分隔多个类名。

  • 输入​ Margins and Padding ​的值(以像素为单位)以指定视频容器的外边距和内边距。

    在视频容器图表中输入每个相应的值。

    table 0-row-2 1-row-2 2-row-2 layout-auto
    容器区域 描述
    Margins 应用于容器所有边的外边缘的空白空间量。
    Padding 应用于容器所有边的内边缘的空白空间量。

移动视频

  1. 将鼠标悬停在视频容器上以显示工具箱,然后选择​ 移动 移动图标 {width="20"} )图标。

    移动视频 {width="500" modal="regular"}

  2. 选择视频并将其拖动到新位置,它正好位于红色指南的下方。

    使用红色指南放置视频 {width="500" modal="regular"}

从舞台上删除视频

  1. 将鼠标悬停在视频容器上以显示工具箱,然后选择​ 删除 删除图标 )图标。

  2. 提示确认时,单击​ OK

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d