视频

要添加视频元素，只需搜索“视频”在元素搜索在您的基石或任何建设者在Pro(内容，页眉，全局块，页脚)和拖动视频元素。

一旦你添加了元素，你会在设置窗格中看到:

在Setup下，您将看到嵌入而且球员．让我们讨论一下嵌入第一。

视频嵌入设置

在嵌入安装，您将看到一个名为嵌入代码．像Youtube和Vimeo(仅举几个例子)这样的网站允许你在你的网站上显示他们的视频。所以让我们说你想把这个视频从Youtube上添加到你的网站上，只需点击分享按钮:

然后按嵌入模式按钮:

复制嵌入代码:

然后将该代码粘贴到视频元素的嵌入代码字段:

然后你会看到视频已经与Youtube上的设计和控制一起添加。

请注意:不同的网站有自己的嵌入代码。

视频播放器设置

现在第二个设置选项是播放器。

基本上，你必须输入实际视频文件的URL，而不是使用视频托管网站的嵌入代码。如果您托管您的视频文件，无论是在您的网站上还是在CDN提供商上，这是您将选择的选项。

您只需在Sources字段中输入文件的URL(例如example.com/videos/my-video.mp4)。

现在您将注意到，在Sources字段的圆括号内，有一个文本显示“每行1个”。我来解释一下。因为有这么多的设备和浏览器可以浏览你的网站，并想要观看你的视频，所以建议你提供多个文件源。基本上,一个源是同一视频文件以不同的文件格式提供。所以如果你有一个MP4文件格式，建议你放一个OGG，MOV而且WEBM还有版本。

这样做的目的是，如果某个浏览器不能播放某一种视频格式(例如MP4)，你就可以使用该浏览器支持的备份格式。

下面是你如何实现它:

最后，还有海报字段。

这是在播放视频之前将显示的图像。这是可选的。

视频控制设置

如果选择播放器设置，则会添加一组额外选项，允许您自定义视频播放器控件。它们是:

控制设置

有一个标签为Preload Content的下拉菜单，有三个选项:

• 没有一个—请求浏览器不预加载视频文件。
• 汽车-请求浏览器在页面加载时立即下载视频文件的元数据。
• 元数据-请求浏览器下载整个视频文件，不管用户是否要播放它。

注意:并不能100%保证浏览器会遵循这个规则。有些浏览器会忽略这个选项。您还将看到

显示＆函数带有五个复选框的选项:

• 没有控制—选中该选项，将不会显示整个控制栏。用户仍然可以通过点击视频本身来播放和暂停视频。* * * *
• 先进的—勾选，显示时间、音量和全屏控制。
• 播放—选中后，页面加载后视频文件将自动播放。
• 循环—如果勾选，视频文件播放完毕后会重新播放。
• 柔和的-如果勾选，视频会播放，但没有声音。

控制颜色

控件颜色控件组让您能够微调视频控件的各个部分的颜色:

• 按钮-设置播放/悬停按钮在正常和悬停模式下的颜色。
• 时间进度-使用此选项可设置进度条的总颜色和已加载部分。
• 当前时间—使用此选项可在进度条中设置运行时间标记的颜色。
• 文本-使用此选项设置控件的文本颜色。
• 背景-使用此选项设置控件的背景颜色。

控制保证金

使用此选项可设置控件的边距。您可以更改控件所有侧面的设置，也可以单独修改它们。

控制填充

使用此选项可设置控件的填充。您可以更改控件所有侧面的设置，也可以单独修改它们。

控制边界

使用此选项可设置控件的边框。您可以设置风格，宽度而且颜色边境线的所有边或每边的边境线。

控制边界半径

使用此选项可设置控件的边界半径。你可以在所有边都设置曲线，也可以单独设置。

控制框阴影

可以使用box-shadow控件组在控件上设置阴影。

• x-使用此选项设置控件中阴影的X偏移量。
• y-使用此选项设置控件中阴影的Y偏移量。
• 模糊-使用此选项在控件中设置模糊效果的强度。
• 传播和定位-使用此选项设置项目部分阴影的扩散量，并决定您希望阴影位于控件内部还是外部。
• 颜色-使用此选项设置控件阴影的颜色。

时间轨道边界半径

使用此选项可设置时间轨道的边界半径。你可以在所有边都设置曲线，也可以单独设置。

时间轨道箱影

您可以使用盒影控制组在时间轨道上设置阴影。

• x-使用此选项设置阴影在时间轨道中的X偏移量。
• y-使用此选项设置阴影在时间轨道中的Y偏移量。
• 模糊-使用此选项设置时间轨道中的模糊效果的强度。
• 传播和定位-使用此选项可以设置项目部分阴影的扩散量，并决定您希望阴影位于时间轨道内还是外部。
• 颜色—使用此选项设置时间轨道阴影的颜色。

帧设置

您不仅可以配置播放器控件的外观，还可以配置视频的外观框架的样子。不管你是否选择了嵌入或球员视频类型，您可以配置帧的设置。要做到这一点，请单击框架选项卡。

设置

• 内容大小-任选其一纵横比或固定的高度．如果你愿意纵横比，您可以输入视频帧的宽度和高度之比。如果你愿意固定的高度，顾名思义，框架的高度将是“固定的”。属性上输入的值将设置宽度宽度＆最大宽度字段。
• 宽度＆最大宽度- Width将是帧的实际宽度，最大宽度是它的限制。
• 背景颜色-有时视频不覆盖整个帧，如如果你添加帧填充。您可以选择设置背景颜色，使背景不是白色的。

框架边缘

使用此选项可设置帧的边距。您可以更改框架的所有边的设置或单独修改它们。

框架填充

使用此选项设置帧的填充。您可以更改框架的所有边的设置或单独修改它们。

帧边界

使用此选项可设置框架的边框。您可以设置风格，宽度而且颜色边境线的所有边或每边的边境线。

边框半径

使用此选项可设置框架的边界半径。你可以在所有边都设置曲线，也可以单独设置。

框框阴影

您可以使用框阴影控制组在框架上设置阴影。

• x-使用此选项设置阴影在框架中的X偏移量。
• y-使用此选项设置阴影在框架中的Y偏移量。
• 模糊-使用此选项设置帧中模糊效果的强度。
• 传播和定位-使用此选项设置项目部分阴影的扩散量，并决定您希望阴影位于框架内部还是外部。
• 颜色-使用此选项设置框架阴影的颜色。

影响

效果模块允许您通过利用CSS对元素创建惊人的静态和交互式更改不透明度，变换，过滤器，以及更多。点击在这里有关更详细的信息。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)。点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")。这在与各种脚本和库集成时尤其有用。

演示

要查看视频元素的现场演示，请单击在这里．

总结

在本文中，您学习了如何使用Video Element添加视频。你学习了两种视频类型，即“嵌入式”和“播放器”。最后，您学习了如何配置每种类型，使您可以灵活地设置您的视频。