切换播放/暂停背景视频

背景视频可以吸引网站访问者，或为你的网站添加电影风格——但它们也可能分散注意力，甚至对有认知障碍、前庭神经障碍或晕动病的人有害。可访问性的最佳实践是为用户提供暂停、停止或隐藏任何开始自动移动并移动超过5秒的内容的控件(WCAG成功标准2.2.2:暂停，停止，隐藏）.

Webflow为背景视频提供了一个内置的播放/暂停按钮设置，这样你就可以让你的网站访问者控制他们需要暂停或播放你的背景视频内容。

很高兴知道:自动播放的视频没有明确的暂停方式，这是网站访问者没有完成他们在网站上的任务就离开的十大原因之一。给访问者清晰的视频控制将降低网站的跳出率。

在这节课中:

1. 如何添加播放/暂停按钮
2. 如何样式播放/暂停按钮

如何添加播放/暂停按钮

的包括播放/暂停按钮设置在默认情况下为所有启用新2022年6月之后增加了背景视频。对于2022年6月之前添加的背景视频，您需要手动启用此设置。

为已有的背景视频添加播放/暂停按钮:

1. 选择背景视频在画布上
2. 双击背景视频或按输入/返回打开背景视频设置
3. 检查包括播放/暂停按钮复选框

重要的:我们强烈建议离开包括播放/暂停按钮设置已启用，以满足可访问性标准，并确保为站点访问者提供更好的体验。此外，如果您已禁用此设置，则站点访问者将使用喜欢运动减少在他们的操作系统设置中启用将不能播放你的背景视频。

如何样式播放/暂停按钮

一旦包括播放/暂停按钮设置已启用，您可以根据自己的喜好自定义播放/暂停按钮。

定位按钮

默认情况下,播放/暂停按钮被设置为位置:绝对的，相对于第一个非静态的父元素(在本例中是背景视频元素)。这意味着它将停留在背景视频元素内嵌套，并出现在任何未设置的元素之上位置:绝对的．了解关于position: absolute的更多信息．

以确保播放/暂停按钮总是出现在顶部背景视频，您可以选择播放/暂停按钮元素，给它一个z - index价值．任何元素的默认z索引值都是0，所以任何大于0的值都将把一个元素放在最上面。你可以随意使用一个非常高的z指数值，比如9999。了解更多关于z索引值的信息．

定制按钮状态图标

播放/暂停按钮有两种状态:玩而且暂停．

播放/暂停按钮还带有默认图标和内置的alt文本玩而且暂停但你可以上传任何你想上传的图片。

重要的:如果你要替换默认的图标，请确保在你自己的图片中添加alt文本，以便任何浏览你的网站的人都知道这些按钮的用途。控件中的图像可以添加“播放视频”作为替换文本暂停 状态，以及“暂停视频”作为替换文本的图像播放状态．

使用实例替换默认图标。

1. 打开资产面板然后点击云图标上传你想要使用的图像
2. 选择播放/暂停按钮在画布上或在导航器面板
3. 单击您想要样式的状态(例如，玩或暂停)设置面板>播放/暂停按钮设置
4. 中选择要使用的图像资产面板并将其拖动到与当前状态匹配的元素中(例如，播放状态或暂停状态）
5. 从state元素中删除默认图像

您可以使用与默认图像大小不同的图像或图标。你可以根据父元素(例如…,播放/暂停按钮）.

根据父元素调整图片的大小:

1. 选择播放/暂停按钮在画布上或在导航器面板
2. 单击您想要样式的状态(例如，玩或暂停)设置面板>播放/暂停按钮设置
3. 选择元素中与当前状态相匹配的图像(例如，播放状态或暂停状态）
4. 开放风格面板>大小并设置图像的宽度而且高度到100%，以确保图像占据了父元素的100%(例如播放/暂停按钮）
5. 选择播放/暂停按钮
6. 开放风格的面板>大小并设置宽度而且高度你想要什么尺寸都行
7. 开放风格的面板>间距和调整填充根据需要

请注意:如果你使用SVG文件制作按钮图标，你需要使用像素值来明确定义图像的宽度和高度尺寸，而不是基于百分比的相对单位。否则，您的图像将收缩到0像素，因为图像的父元素(例如，播放状态或暂停状态)没有使用绝对单位作为其尺寸。

样式按钮了

的播放/暂停按钮有一个默认的集中(键盘)用偏移蓝色轮廓样式，但您可以按您的意愿样式此轮廓。

对于使用键盘浏览网站的网站访问者，这个大纲可以清楚地说明播放/暂停按钮有焦点(例如，当他们与按钮交互时)。当网站访问者使用鼠标或手指轻触与播放/暂停按钮．了解更多关于大纲的知识．

在播放/暂停按钮上自定义大纲:

1. 选择播放/暂停按钮在画布上或在导航器面板
2. 开放风格的面板并给出了播放/暂停按钮一个类
3. 中单击下拉列表选择器字段以打开州菜单
4. 选择集中(键盘)状态
5. 向下滚动到风格的面板>影响和编辑大纲，宽度，抵消和/或颜色根据需要的属性

您还可以对按钮进行任何其他样式的更改(例如，边境，背景，背景筛选等)。

专家提示:将类添加到您的图像和播放/暂停按钮为了一致性，跨州重用您的样式。了解关于使用类跨元素保存样式信息的更多信息．