Mashup Builder > 小组件 > 标准小组件 > 视频播放器小组件 (可应用主题)
视频播放器小组件 (可应用主题)
“视频播放器”小组件 (可应用主题) 用于在混搭中嵌入和播放视频。视频播放器支持多个选项,包括自动播放、添加缩略图图像、控制控件的外观等。它是一个响应式小组件,支持应用主题以实现一致的用户体验。
* 
视频播放器以小组件和 Web 组件的形式提供,可从 ThingWorx Web Component SDK 自定义和导入。
结构
1. 视频播放器标签
2. 视频区
3. 预览缩略图
4. 播放器控件
键盘快捷方式
下表列出了可用来与此小组件进行交互的键盘快捷键,按组件分组。
组件
按钮/控件
说明
导航
用于控制:小组件上不同组件之间的导航。
TAB 键和 SHIFT+TAB 键
在播放器中的子组件之间前后移动。
播放器
播放/停止控件
SPACE 或 ENTER 键
播放或停止视频
时间轴栏
向上键或向右键
快进 10 秒
向下键或向左键
后退 10 秒
PAGE UP
快进 1 分钟
PAGE DOWN
后退 1 分钟
HOME
转到视频开头
END
转到视频结尾
音频
静音按钮
SPACE 或 ENTER 键
将视频静音或取消静音
音量滑块
向上键或向右键
将音量提高 5%
向下键或向左键
将音量降低 5%
HOME
将音量设置为 0%
END
将音量设置为 100%
下载
下载按钮
SPACE 或 ENTER 键
下载视频文件
全屏
全屏按钮
SPACE 或 ENTER 键
进入全屏模式
ESC 键
退出全屏并返回窗口模式
配置播放器控件的布局
使用 OverlayControls 属性配置视频播放器控件的位置。当此属性设置为 true 时,控件将显示在视频内容上。设置为 false 时,控件将显示在视频下方。将控件叠加可减少小组件所占用的垂直空间。
添加缩略图
使用 Thumbnail 属性可在视频开始前显示预览图像。在用户选择播放按钮之前,该图像将显示在视频位置上。此功能可用于提供上下文、品牌或内容预览。开始播放时,缩略图将被替换为视频。
配置播放设置
您可以启用 AutoPlay 属性,以在加载混搭时自动开始视频播放。启用 AutoPlay 后,默认情况下视频会静音。要启用音频,用户必须在视频开始播放后手动取消视频静音。要配置音频,您可以启用或禁用小组件 Mute 属性,也可以创建绑定来动态控制音频。
添加下载按钮
EnableDownload 属性用于在播放器中显示下载按钮。启用后,用户可使用此按钮根据 URL 下载视频。使用此功能可支持离线查看或共享视频内容。
* 
因安全设置 (如 CSP 规则) 而阻止下载时,系统会显示一条消息。
配置 CSP 规则
在 ThingWorx 环境中启用了内容安全策略 (CSP) 规则时,为确保视频播放器小组件正常工作,必须更新 media-src 指令以包括从中加载视频的外部域。例如:
media-src 'self' https://cdn.com https://video-location.com;
有关配置 CSP 规则的详情,请参阅内容安全策略
小组件属性
下表列出了小组件属性:
属性名称
说明
基本类型
默认值
是否可绑定? (Y/N)
是否可本地化? (Y/N)
Label
用于指定:小组件标签的文本。
STRING
Y
Y
LabelAlignment
将标签文本与小组件的左侧、右侧或中心对齐。
STRING
left
N
N
VideoURL
指定要播放的视频的 URL。
NUMBER
Y
N
EnableDownload
将下载按钮添加到播放器控件,以便用户下载视频。
BOOLEAN
False
Y
N
Thumbnail
指定视频的缩略图。
NUMBER
Y
N
AutoPlay
指定小组件加载时是否自动播放视频。启用 AutoPlay 后,视频以静音方式播放。
BOOLEAN
False
N
N
Mute
将视频静音。
BOOLEAN
False
Y
N
OverlayControls
将播放器控件叠加在视频上,以减少播放器在布局中占用的空间。只有将鼠标悬停在视频上时才会显示此控件。禁用后,播放器控件始终可见。
BOOLEAN
False
Y
N
Width
指定视频播放器的宽度。
NUMBER
480
Y
N
Height
指定视频播放器的高度。
NUMBER
314
Y
N
CustomClass
用户定义的 CSS 类,应用于小组件顶层 div。可以输入多个类,以空格作为分隔符。
NUMBER
Y
N
TabSequence
指定小组件的 Tab 键顺序。
NUMBER
0
N
N
验证属性
下面的表格列出了小组件验证属性。
属性名称
说明
基本类型
默认值
是否可绑定? (Y/N)
是否可本地化? (Y/N)
PlaybackErrorMessage
当视频文件因 CSP 规则被阻止时所显示的消息。
STRING
令牌:[[Widgets.VideoPlayer.Validation.PlaybackErrorMessage]]
值:播放错误
Y
Y
PlaybackErrorMessageDetails
当视频文件因 CSP 规则被阻止时,在消息下方显示的详情。
STRING
[[Widgets.VideoPlayer.Validation.PlaybackErrorMessageDetails]]
请确保视频格式受支持,并且您的网络连接正常,然后重试。
Y
Y
NetworkErrorMessage
当视频因网络错误而无法加载时,所显示的消息。
STRING
[[Widgets.VideoPlayer.Validation.NetworkErrorMessage]]
网络问题
Y
Y
NetworkErrorMessageDetails
当视频因网络错误而无法加载时,在消息下方显示的详情。
STRING
[[Widgets.VideoPlayer.Validation.NetworkErrorMessageDetails]]
请检查网络连接,然后重试。
Y
Y
DownloadBlockedMessage
当视频因访问权限问题而无法下载时,所显示的消息。
STRING
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessage]]
下载被阻止
Y
Y
DownloadBlockedMessageDetails
当视频因访问权限问题而无法下载时,在消息下方显示的详情。
STRING
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessageDetails]]
下载被平台阻止。请确保平台 CSP 规则配置正确,然后重试。
Y
Y
PlaybackBlockedMessage
当视频文件因 CSP 规则被阻止时所显示的消息。
STRING
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessage]]
此内容已被阻止
Y
Y
PlaybackBlockedMessageDetails
当视频文件因 CSP 规则被阻止时,在消息下方显示的详情。
STRING
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessageDetails]]
请与网站负责人联系,以解决此问题。
Y
Y
ValidationFailureIcon
用于指定:当验证失败时,所显示的图标。
STRING
cds:icon_error
N
N
这对您有帮助吗?