视频嵌入

文档版本：1.1.0

组件名：BhtVideoEmbed

描述

视频嵌入组件，用于播放外部视频文件。

效果

示例

<bht-video-embed></bht-video-embed>

代码

<bht-video-embed :ref="item.id" :item="item"></bht-video-embed>

或

<BhtVideoEmbed :ref="item.id" :item="item"></BhtVideoEmbed>

参数

该组件未声明外部 props。

组件配置项

key	名称	类型	默认值	说明
sourceUrl	视频地址	string	https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4	支持 mp4、webm、ogg 或外部视频文件 URL
poster	封面地址	string	-	可选，视频封面图片 URL
title	标题	string	-	可选，用于无障碍说明
height	显示高度	string	360px	例如 360px、56vw
objectFit	填充方式	string	cover	选择视频填充方式
controls	播放控制	string	true	是否显示播放控制
autoplay	自动播放	string	false	浏览器通常要求同时静音
muted	静音	string	false	自动播放建议开启静音
loop	循环播放	string	false	是否循环播放

通用布局配置

key	名称	类型	默认值	说明
componentWidth	组件宽度	string	100%	支持 100%、320px、50vw
componentHeight	组件高度	string	-	可选，例如 360px、50vh
componentPositionMode	布局模式	select	flow	flow、absolute、fixed
componentPositionX	X 位置	string	-	自由/固定模式，例如 120px
componentPositionY	Y 位置	string	-	自由/固定模式，例如 80px
componentZIndex	层级	string	-	例如 10
componentHorizontalAlign	水平对齐	select	center	left、center、right、stretch
componentVerticalAlign	垂直对齐	select	top	top、middle、bottom、stretch
componentLocked	锁定位置	select	false	true、false
componentRelativeTo	参照组件 ID	select	-	可选择其他已有组件的 id 和名称
componentRelativePlacement	相对位置	select	-	right、left、bottom、top
componentRelativeGap	相对间距	string	12px	例如 12px

通用样式配置

key	名称	类型	默认值	说明
componentMargin	外边距	string	-	例如 16px 或 12px 24px
componentPadding	内边距	string	-	例如 16px 或 12px 24px
componentMinWidth	最小宽度	string	-	例如 240px
componentMaxWidth	最大宽度	string	-	例如 1200px 或 none
componentMinHeight	最小高度	string	-	例如 120px
componentMaxHeight	最大高度	string	-	例如 720px 或 none
componentBackgroundColor	背景颜色	color	-	例如 #ffffff 或 rgba(255,255,255,.9)
componentBackgroundImage	背景图片	string	-	例如 url(https://...) 或 linear-gradient(...)
componentBackgroundSize	背景尺寸	string	-	例如 cover、contain、100% 100%
componentBackgroundPosition	背景位置	string	-	例如 center、left top
componentBackgroundRepeat	背景重复	select	-	no-repeat、repeat、repeat-x、repeat-y
componentBorderColor	边框颜色	color	-	请选择边框颜色
componentBorderWidth	边框宽度	string	-	例如 1px 或 1px 0 0
componentBorderStyle	边框样式	select	-	solid、dashed、dotted、none
componentBorderRadius	圆角	string	-	例如 8px 或 12px 12px 0 0
componentBoxShadow	阴影	string	-	例如 0 12px 32px rgba(15,23,42,.12)
componentOpacity	透明度	string	-	0 到 1，例如 .95
componentOverflow	溢出处理	select	-	visible、hidden、auto、clip
componentTextAlign	文本对齐	select	-	left、center、right、justify
componentColor	文字颜色	color	-	请选择文字颜色
componentBoxSizing	盒模型	select	border-box	border-box、content-box
componentFilter	滤镜	string	-	例如 blur(2px)、grayscale(1)
componentBackdropFilter	背景滤镜	string	-	例如 blur(12px)
componentCustomStyle	自定义 CSS	textarea	-	例如 transform: translateY(8px);

媒体嵌入样式配置

key	名称	类型	默认值	说明
width	内容宽度	string	100%	例如 100%、640px、80vw
minHeight	最小高度	string	-	例如 160px
margin	外边距	string	0	例如 0、16px、12px auto
padding	内边距	string	0	例如 0、16px
backgroundColor	背景颜色	color	#ffffff	例如 transparent、#ffffff
borderColor	边框颜色	color	#d7dee8	例如 transparent、#e5e7eb
borderWidth	边框宽度	string	0	例如 0、1px
borderStyle	边框样式	select	solid	solid、dashed、dotted、none
borderRadius	圆角	string	0	例如 0、8px、18px
boxShadow	阴影	string	none	例如 none、0 18px 40px rgba(...)
opacity	透明度	string	1	例如 .85、1
overflow	溢出处理	select	hidden	hidden、visible、auto
mediaBackgroundColor	媒体背景色	color	#000000	播放器或 iframe 背景色
mediaBorderColor	媒体边框色	color	#d7dee8	播放器或 iframe 边框颜色
mediaBorderWidth	媒体边框宽度	string	0	例如 0、1px
mediaBorderStyle	媒体边框样式	select	solid	solid、dashed、dotted、none
mediaBorderRadius	媒体圆角	string	8px	例如 8px、12px、16px
mediaBoxShadow	媒体阴影	string	none	例如 none、0 16px 36px rgba(...)
mediaMinHeight	媒体最小高度	string	-	例如 120px、180px
customStyle	自定义样式	string	-	例如 backdrop-filter: blur(12px);

引入

import { BhtVideoEmbed } from '@behappyto/cms-ui-vue3'