组件：视频播放器

视频播放器组件用于播放视频文件，支持多种视频格式（如 MP4、WebM、AVI 等），提供了丰富的控制属性和事件回调，包括播放/暂停、音量调节、播放速度、循环播放、静音等。它适用于视频展示、视频教程、视频会议、监控回放等场景。该组件基于 HTML5 <video> 元素封装，具有良好的跨平台兼容性。

典型使用场景：

在线视频播放（产品演示、宣传视频）
视频教程（课程讲解、操作演示）
视频会议/直播（配合摄像头使用）
监控录像回放（安防系统、行车记录）
视频内容预览（社交应用、视频平台）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置视频源地址	`视频地址`	`视频播放器1.视频地址 = "static/demo.mp4"`
设置视频尺寸	`视频宽度` / `视频高度`	`视频播放器1.视频宽度 = 640`
设置自动播放	`自动播放`	`视频播放器1.自动播放 = 真`
设置循环播放	`循环播放`	`视频播放器1.循环播放 = 真`
设置静音	`静音`	`视频播放器1.静音 = 真`
设置音量（0~1）	`音量`	`视频播放器1.音量 = 0.8`
设置播放速度（0.5~2）	`播放速度`	`视频播放器1.播放速度 = 1.5`
跳转到指定播放位置（秒）	`播放位置`	`视频播放器1.播放位置 = 30`
开始播放	`开始播放()`	`视频播放器1.开始播放()`
暂停播放	`暂停()`	`视频播放器1.暂停()`
停止播放并重置	`停止播放()`	`视频播放器1.停止播放()`
监听播放完毕	`置视频播放完毕回调(回调)`	`视频播放器1.置视频播放完毕回调((事件) => { ... })`
监听播放错误	`置视频播放出错回调(回调)`	`视频播放器1.置视频播放出错回调((事件) => { ... })`
监听播放进度	`置视频播放进度被改变回调(回调)`	`视频播放器1.置视频播放进度被改变回调((事件) => { ... })`

样式美化参考

视频播放器的外观主要通过继承的视图属性进行调整：

整体容器：通过 宽度、高度（如 640px、360px）设置播放器尺寸；背景颜色、边框（如 "1px solid #d9d9d9"）、边框圆角（建议 "8px"）美化播放器边框。
视频画面：通过 视频宽度 和 视频高度 控制视频内容的显示尺寸（若与容器尺寸不一致，视频会自动适应）。
控制栏：默认由浏览器提供原生控制栏，可通过 CSS 类或 禁用 属性控制是否显示。若要隐藏原生控制栏，可设置 禁用 = 真 并自行构建控制 UI。
暗色背景：建议将播放器背景颜色设置为黑色（"#000"），以便视频画面更突出。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-video-player {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background-color: #000;
}
.my-video-player::-webkit-media-controls {
    filter: brightness(0.8);
}

在代码中应用样式类：视频播放器1.添加样式类("my-video-player")

基础示例

创建一个带有基本属性的视频播放器，加载本地视频，并设置事件监听。

变量 视频播放器1 = 创建 视频播放器()
视频播放器1.左边 = 50
视频播放器1.顶边 = 50
视频播放器1.视频宽度 = 640
视频播放器1.视频高度 = 360
视频播放器1.视频地址 = "static/demo.mp4"
视频播放器1.自动播放 = 假
视频播放器1.循环播放 = 假
视频播放器1.静音 = 假
视频播放器1.音量 = 0.8
视频播放器1.播放速度 = 1
视频播放器1.边框 = "1px solid #d9d9d9"
视频播放器1.边框圆角 = "8px"
视频播放器1.背景颜色 = "#000"

' 设置事件回调
视频播放器1.置视频播放完毕回调((事件对象) => {
    弹出提示("视频播放完毕")
})

视频播放器1.置视频播放出错回调((事件对象) => {
    弹出提示("视频播放出错，请检查文件路径")
})

' 开始播放
视频播放器1.开始播放()

添加组件(视频播放器1)

综合示例：自定义视频播放器控制栏

本示例构建一个带有自定义控制栏的视频播放器，实现播放/暂停、进度条拖动、音量控制、播放速度切换、全屏等功能，并展示各种事件回调的使用。

' ========== 创建视频播放器 ==========
变量 视频播放器1 = 创建 视频播放器()
视频播放器1.左边 = 30
视频播放器1.顶边 = 30
视频播放器1.视频宽度 = 720
视频播放器1.视频高度 = 400
视频播放器1.视频地址 = "https://www.w3schools.com/html/mov_bbb.mp4"
视频播放器1.自动播放 = 假
视频播放器1.循环播放 = 假
视频播放器1.静音 = 假
视频播放器1.音量 = 0.8
视频播放器1.播放速度 = 1
视频播放器1.边框 = "1px solid #d9d9d9"
视频播放器1.边框圆角 = "8px"
视频播放器1.背景颜色 = "#000"
添加组件(视频播放器1)

' ========== 创建自定义控制栏 ==========
变量 控制栏 = 创建 弹性布局()
控制栏.方向 = "row"
控制栏.侧轴对齐 = "center"
控制栏.左边 = 30
控制栏.顶边 = 445
控制栏.宽度 = 720
控制栏.高度 = 40
控制栏.背景颜色 = "rgba(0,0,0,0.7)"
控制栏.边框圆角 = "0px 0px 8px 8px"
控制栏.内边距 = "0 12px"
控制栏.间距 = 8
添加组件(控制栏)

' 播放/暂停按钮
变量 播放按钮 = 创建 按钮()
播放按钮.文本 = "▶"
播放按钮.宽度 = 36
播放按钮.高度 = 30
播放按钮.背景颜色 = "transparent"
播放按钮.文本颜色 = "#ffffff"
播放按钮.字体大小 = "16px"
播放按钮.边框 = "none"
播放按钮.光标样式 = "pointer"
控制栏.添加组件(播放按钮)

' 当前时间标签
变量 当前时间标签 = 创建 标签()
当前时间标签.文本 = "00:00"
当前时间标签.字体大小 = "12px"
当前时间标签.文本颜色 = "#ffffff"
控制栏.添加组件(当前时间标签)

' 进度条（使用滑块条模拟）
变量 进度条 = 创建 滑块条()
进度条.宽度 = 400
进度条.高度 = 4
进度条.最小值 = 0
进度条.最大值 = 100
进度条.步长 = 1
进度条.进度值 = 0
进度条.背景颜色 = "#555"
进度条.颜色 = "#1890ff"
控制栏.添加组件(进度条)

' 总时间标签
变量 总时间标签 = 创建 标签()
总时间标签.文本 = "00:00"
总时间标签.字体大小 = "12px"
总时间标签.文本颜色 = "#ffffff"
控制栏.添加组件(总时间标签)

' 音量控制
变量 音量按钮 = 创建 按钮()
音量按钮.文本 = "🔊"
音量按钮.宽度 = 30
音量按钮.高度 = 30
音量按钮.背景颜色 = "transparent"
音量按钮.文本颜色 = "#ffffff"
音量按钮.字体大小 = "14px"
音量按钮.边框 = "none"
音量按钮.光标样式 = "pointer"
控制栏.添加组件(音量按钮)

变量 音量滑块 = 创建 滑块条()
音量滑块.宽度 = 60
音量滑块.高度 = 4
音量滑块.最小值 = 0
音量滑块.最大值 = 100
音量滑块.步长 = 1
音量滑块.进度值 = 80
音量滑块.背景颜色 = "#555"
音量滑块.颜色 = "#1890ff"
控制栏.添加组件(音量滑块)

' 速度切换按钮
变量 速度按钮 = 创建 按钮()
速度按钮.文本 = "1.0x"
速度按钮.宽度 = 40
速度按钮.高度 = 30
速度按钮.背景颜色 = "transparent"
速度按钮.文本颜色 = "#ffffff"
速度按钮.字体大小 = "12px"
速度按钮.边框 = "none"
速度按钮.光标样式 = "pointer"
控制栏.添加组件(速度按钮)

' 全屏按钮
变量 全屏按钮 = 创建 按钮()
全屏按钮.文本 = "⛶"
全屏按钮.宽度 = 30
全屏按钮.高度 = 30
全屏按钮.背景颜色 = "transparent"
全屏按钮.文本颜色 = "#ffffff"
全屏按钮.字体大小 = "16px"
全屏按钮.边框 = "none"
全屏按钮.光标样式 = "pointer"
控制栏.添加组件(全屏按钮)

' ========== 辅助函数：时间格式化 ==========
函数 格式化时间(秒数)
    变量 分钟 = 向下取整(秒数 / 60)
    变量 秒 = 向下取整(秒数 - 分钟 * 60)
    变量 分钟文本 = 分钟 < 10 ? "0" + 分钟 : "" + 分钟
    变量 秒文本 = 秒 < 10 ? "0" + 秒 : "" + 秒
    返回 分钟文本 + ":" + 秒文本
结束 函数

' ========== 事件绑定 ==========
' 1. 视频加载完成后获取总时长
视频播放器1.置视频被加载回调((事件对象) => {
    总时间标签.文本 = 格式化时间(视频播放器1.取属性值("duration"))
    调试输出("视频加载完成，总时长：" + 总时间标签.文本)
})

' 2. 播放进度更新
视频播放器1.置视频播放进度被改变回调((事件对象) => {
    变量 当前时间 = 视频播放器1.播放位置
    变量 总时长 = 到数值(视频播放器1.取属性值("duration"))
    当前时间标签.文本 = 格式化时间(当前时间)
    如果(总时长 > 0)
        进度条.进度值 = (当前时间 / 总时长) * 100
    结束 如果
})

' 3. 播放完毕
视频播放器1.置视频播放完毕回调((事件对象) => {
    播放按钮.文本 = "▶"
    弹出提示("视频播放完毕")
})

' 4. 播放错误
视频播放器1.置视频播放出错回调((事件对象) => {
    弹出提示("视频播放出错，请检查视频文件")
})

' ========== 控制栏事件 ==========
' 播放/暂停
播放按钮.置被单击回调((源对象, 事件对象) => {
    如果(播放按钮.文本 == "▶")
        视频播放器1.开始播放()
        播放按钮.文本 = "⏸"
    否则
        视频播放器1.暂停()
        播放按钮.文本 = "▶"
    结束 如果
})

' 进度条拖动（用户手动跳转）
进度条.置滑块位置被改变回调((源对象, 当前值) => {
    变量 总时长 = 到数值(视频播放器1.取属性值("duration"))
    如果(总时长 > 0)
        视频播放器1.播放位置 = (当前值 / 100) * 总时长
    结束 如果
})

' 音量控制
音量滑块.置滑块位置被改变回调((源对象, 当前值) => {
    视频播放器1.音量 = 当前值 / 100
    如果(当前值 == 0)
        音量按钮.文本 = "🔇"
    否则 如果(当前值 < 50)
        音量按钮.文本 = "🔉"
    否则
        音量按钮.文本 = "🔊"
    结束 如果
})

' 音量按钮静音切换
音量按钮.置被单击回调((源对象, 事件对象) => {
    变量 当前音量 = 视频播放器1.音量
    如果(当前音量 > 0)
        视频播放器1.静音 = 真
        音量滑块.进度值 = 0
        音量按钮.文本 = "🔇"
    否则
        视频播放器1.静音 = 假
        视频播放器1.音量 = 0.8
        音量滑块.进度值 = 80
        音量按钮.文本 = "🔊"
    结束 如果
})

' 速度切换（循环切换）
变量 速度列表 = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
变量 速度索引 = 2  ' 默认1.0x
速度按钮.置被单击回调((源对象, 事件对象) => {
    速度索引 = (速度索引 + 1) % 取数组成员数(速度列表)
    变量 新速度 = 速度列表[速度索引]
    视频播放器1.播放速度 = 新速度
    速度按钮.文本 = 新速度 + "x"
})

' 全屏切换
全屏按钮.置被单击回调((源对象, 事件对象) => {
    变量 原生视频 = 视频播放器1.取原生对象()
    如果(原生视频.requestFullscreen)
        原生视频.requestFullscreen()
        全屏按钮.文本 = "⛶ 退出"
    否则
        如果(document.exitFullscreen)
            document.exitFullscreen()
            全屏按钮.文本 = "⛶"
        结束 如果
    结束 如果
})

属性详解

视频地址

类型： 文本型
说明： 设置或获取视频文件的 URL 地址。支持相对路径、绝对路径和网络 URL。设置后会自动加载视频元数据（但不一定会开始播放）。

自动播放

类型： 逻辑型
说明： 设置或获取是否在加载完成后自动开始播放。默认为 假。注意： 部分浏览器（尤其是移动端）可能会限制自动播放策略，需要用户交互后才能播放。

循环播放

类型： 逻辑型
说明： 设置或获取是否在视频播放完毕后自动重新开始播放。默认为 假。

静音

类型： 逻辑型
说明： 设置或获取是否将视频静音。默认为 假。在自动播放受限时，设置静音可以绕过部分浏览器的自动播放限制。

视频宽度

类型： 数值型
说明： 设置或获取视频画面的显示宽度（像素）。注意：这是视频画面的显示尺寸，不是容器的尺寸。

视频高度

类型： 数值型
说明： 设置或获取视频画面的显示高度（像素）。

播放位置

类型： 数值型
说明： 设置或获取当前视频的播放位置（秒）。可用于跳转或获取当前进度。设置此属性会跳转到指定时间点。

音量

类型： 数值型
说明： 设置或获取当前音量，取值范围 0（静音）到 1（最大音量），默认 1。

播放速度

类型： 数值型
说明： 设置或获取播放速度倍率，常用取值范围 0.5 到 2.0，默认 1.0。支持的值范围由浏览器决定。

函数详解

开始播放()

功能： 开始或恢复视频播放。如果视频已处于播放状态，则无效果。
返回值： 无。
示例： 视频播放器1.开始播放()

暂停()

功能： 暂停视频播放。如果视频已暂停，则无效果。
返回值： 无。
示例： 视频播放器1.暂停()

停止播放()

功能： 停止视频播放，并将播放位置重置到开头。
返回值： 无。
示例： 视频播放器1.停止播放()

置视频被加载回调(回调函数)

功能： 设置视频元数据加载完成时的回调函数。
参数： 回调函数，格式为 (事件对象) => { ... }。
返回值： 无。

置视频播放完毕回调(回调函数)

功能： 设置视频播放完毕时的回调函数。
参数： 回调函数，格式为 (事件对象) => { ... }。
返回值： 无。

置视频播放出错回调(回调函数)

功能： 设置视频播放出错时的回调函数。
参数： 回调函数，格式为 (事件对象) => { ... }。
返回值： 无。

置视频被暂停回调(回调函数)

功能： 设置视频暂停时的回调函数。
参数： 回调函数，格式为 (事件对象) => { ... }。
返回值： 无。

置视频开始被播放回调(回调函数)

功能： 设置视频开始播放时的回调函数。
参数： 回调函数，格式为 (事件对象) => { ... }。
返回值： 无。

置视频播放进度被改变回调(回调函数)

功能： 设置视频播放进度改变时的回调函数（在播放过程中持续触发）。
参数： 回调函数，格式为 (事件对象) => { ... }。
返回值： 无。

置视频音量被改变回调(回调函数)

功能： 设置音量改变时的回调函数。
参数： 回调函数，格式为 (事件对象) => { ... }。
返回值： 无。

置视频播放速度被改变回调(回调函数)

功能： 设置播放速度改变时的回调函数。
参数： 回调函数，格式为 (事件对象) => { ... }。
返回值： 无。

事件说明

以下事件与对应的回调函数等效，适用于设计文件（.spldg）中定义的组件：

事件	对应回调函数	触发时机
`视频被加载(事件对象)`	`置视频被加载回调`	视频元数据加载完成
`视频播放完毕(事件对象)`	`置视频播放完毕回调`	视频播放到结尾
`视频播放出错(事件对象)`	`置视频播放出错回调`	播放过程中发生错误
`视频被暂停(事件对象)`	`置视频被暂停回调`	视频被暂停
`视频开始被播放(事件对象)`	`置视频开始被播放回调`	视频开始播放
`视频播放进度被改变(事件对象)`	`置视频播放进度被改变回调`	播放进度变化
`视频音量被改变(事件对象)`	`置视频音量被改变回调`	音量变化
`视频播放速度被改变(事件对象)`	`置视频播放速度被改变回调`	播放速度变化

⚠️ 注意事项

视频格式兼容性：不同浏览器支持的视频格式不同，建议使用 MP4（H.264/AAC）格式以获得最佳兼容性。
自动播放策略：大多数现代浏览器（尤其是移动端）要求用户在点击播放前不能自动播放有声音的视频。若需自动播放，建议设置 静音 = 真。
跨域资源：如果视频地址是跨域的，服务器需要配置 CORS 头，否则可能无法正常播放。
播放位置精度：播放位置 属性可设置任意数值，但实际跳转精度取决于视频编码和浏览器实现。
事件回调参数：所有视频事件回调都返回一个 事件对象 参数，其中包含事件的详细信息（如时间戳、错误代码等），可通过 取属性值 获取具体字段。
原生控制栏：默认视频播放器会显示浏览器原生控制栏（播放/暂停、进度条、音量等），如需隐藏可设置 禁用 = 真，但会同时禁用交互。
视频尺寸与容器尺寸：视频宽度 和 视频高度 控制视频画面的显示尺寸，而容器的 宽度/高度 控制播放器区域大小。两者可以不同，视频会自动适应容器（默认保持比例）。
资源释放：在页面关闭或组件销毁时，视频播放器会自动释放资源，无需手动处理。
静音与音量：设置 静音 = 真 会将音量强制设为 0，且 音量 属性会被覆盖。取消静音时，音量恢复之前的值。
取属性值("duration")：视频总时长可通过 取属性值("duration") 获取，但需要在 视频被加载 事件触发后才能获取到有效值。

轻语言网站开发SDK文档