App Inventor 2 视频播放器教程 - VideoPlayer组件与WebView嵌入播放

« 返回首页

一、VideoPlayer 组件概述

VideoPlayer 是 App Inventor 2 内置的多媒体组件，属于 媒体（Media） 分类。它能够在应用界面上显示一个矩形视频区域，并支持视频的播放、暂停、定位跳转等操作。

运行应用时，用户触摸视频区域会出现系统自带的播放控制条，包含播放/暂停、快进、快退按钮。同时，开发者也可以通过积木块代码来控制播放行为。

VideoPlayer 的核心能力

能力 说明
本地视频播放 支持播放打包在应用内的视频文件
网络视频播放 支持通过 URL 播放网络视频流
播放控制 播放、暂停、停止、跳转到指定位置
音量控制 可设置 0-100 的音量值
全屏播放 支持切换全屏模式
播放完成事件 视频播放结束时触发回调

二、添加 VideoPlayer 组件

在 App Inventor 2 设计视图中：

  1. 从左侧组件面板的 媒体（Media） 分类中找到 VideoPlayer 组件
  2. 将其拖放到屏幕上的布局容器中
  3. VideoPlayer 会在界面上显示为一个矩形区域

VideoPlayer 默认宽度为 240 像素，高度为 160 像素。你可以通过设置 Width（宽度）和 Height（高度）属性来调整视频区域的尺寸。

三、支持的视频格式

VideoPlayer 组件支持以下视频格式：

格式 扩展名 说明
3GPP .3gp 移动设备常用格式，体积较小
MPEG-4 .mp4 最通用的视频格式，推荐使用
WebM .webm Android 4.0+ 支持
MKV .mkv 部分设备支持

推荐使用 MP4（H.264 编码）格式，这是 Android 设备兼容性最好的视频格式。

⚠️ 注意文件大小限制：App Inventor 对单个视频文件有 1 MB 大小限制，应用总大小限制为 5 MB（其中可供媒体文件使用的空间更少）。如果视频文件过大，可能导致打包或安装出错。建议使用视频编辑工具压缩视频或缩短时长。

更多格式详情请参考 Android Supported Media Formats。

四、播放本地视频

4.1 上传视频文件

  1. 在设计视图中选中 VideoPlayer 组件
  2. 在右侧属性面板中找到 Source（源） 属性
  3. 点击下拉框，选择”上传文件”，将视频文件添加到项目中

也可以通过 Media 面板上传视频文件。

4.2 代码控制播放

使用积木块控制本地视频播放：

当 Screen1.初始化 时
  执行 VideoPlayer1.开始播放(Start)

播放控制积木块示例：

当 按钮_播放.被点击 时
  执行 VideoPlayer1.开始播放(Start)

当 按钮_暂停.被点击 时
  执行 VideoPlayer1.暂停(Pause)

当 按钮_停止.被点击 时
  执行 VideoPlayer1.停止(Stop)

五、播放网络视频

VideoPlayer 支持通过 URL 播放网络视频。URL 必须直接指向视频文件本身，而不是指向播放器页面。

例如：

  • ✅ 正确：https://example.com/videos/sample.mp4
  • ❌ 错误：https://www.youtube.com/watch?v=xxxxx（这是播放器页面，不是视频文件）

5.1 设置网络视频源 

当 按钮_播放网络视频.被点击 时
  设置 VideoPlayer1.源(Source) 为 "https://example.com/videos/sample.mp4"
  执行 VideoPlayer1.开始播放(Start)

⚠️ 注意：播放网络视频需要设备联网，确保应用有 Internet 权限（VideoPlayer 组件会自动声明 android.permission.INTERNET 权限）。

5.2 使用 TextBox 让用户输入视频地址 

当 按钮_加载.被点击 时
  设置 VideoPlayer1.源(Source) 为 TextBox_地址.文本(Text)
  执行 VideoPlayer1.开始播放(Start)

六、VideoPlayer 属性详解

6.1 属性列表

属性 类型 说明
Source 文本 视频源的路径。可以是文件名（本地视频）或 URL（网络视频）
Volume 数值 (0-100) 音量值，0 为静音，100 为最大音量，默认 50
FullScreen 布尔值 是否全屏播放，true 为全屏，false 为退出全屏
Width 数值 视频区域的宽度（像素）
Height 数值 视频区域的高度（像素）
Visible 布尔值 组件是否可见

6.2 动态修改属性 

当 按钮_静音.被点击 时
  设置 VideoPlayer1.音量(Volume) 为 0

当 按钮_恢复音量.被点击 时
  设置 VideoPlayer1.音量(Volume) 为 50

当 按钮_全屏.被点击 时
  设置 VideoPlayer1.全屏(FullScreen) 为 true

七、VideoPlayer 方法详解

7.1 方法列表

方法 说明
Start() 开始播放视频。如果之前暂停过，从暂停位置继续播放
Pause() 暂停播放。可调用 Start() 恢复
Stop() 停止播放并回到视频开头
SeekTo(ms) 跳转到指定毫秒位置。例如 SeekTo(5000) 跳到第5秒
GetDuration() 获取视频总时长（毫秒）

7.2 进度跳转示例 

当 按钮_前进10秒.被点击 时
  设置 局部_当前位置 为 VideoPlayer1.当前位置 + 10000
  执行 VideoPlayer1.跳转到(SeekTo) 局部_当前位置

当 按钮_后退10秒.被点击 时
  设置 局部_当前位置 为 VideoPlayer1.当前位置 - 10000
  如果 局部_当前位置 < 0
    设置 局部_当前位置 为 0
  执行 VideoPlayer1.跳转到(SeekTo) 局部_当前位置

💡 SeekTo 说明：视频跳转只能跳到关键帧（key frame）位置，如果间隔时间很短，实际跳转位置可能与目标位置略有偏差。

八、VideoPlayer 事件详解

事件 说明
Completed() 视频播放到结尾时触发

8.1 播放完成后循环播放 

当 VideoPlayer1.播放完成(Completed) 时
  执行 VideoPlayer1.跳转到(SeekTo) 0
  执行 VideoPlayer1.开始播放(Start)

8.2 播放完成后提示 

当 VideoPlayer1.播放完成(Completed) 时
  调用 通知器1.显示提示(ShowAlert) "视频播放完毕"

九、全屏播放

VideoPlayer 组件内置了全屏播放功能。设置 FullScreen 属性为 true 即可进入全屏模式。

9.1 全屏切换代码 

当 按钮_全屏.被点击 时
  设置 VideoPlayer1.全屏(FullScreen) 为 true

当 按钮_退出全屏.被点击 时
  设置 VideoPlayer1.全屏(FullScreen) 为 false

9.2 全屏播放的注意事项

  • 全屏功能需要 Android 1.6（Donut）以上版本
  • 进入全屏时，会保存当前播放位置，退出后从该位置继续播放
  • 全屏模式下仍然可以使用 Start()、Pause()、SeekTo() 等方法控制播放
  • 在应用被销毁（如退出应用）时，如果正在全屏播放，系统会自动退出全屏

十、使用 Camcorder 录制后播放

结合 Camcorder（摄像机） 组件，可以实现录制视频后立即播放：

当 按钮_录制.被点击 时
  调用 摄像机1.录制视频(RecordVideo)

当 摄像机1.录制完成(AfterRecording) 时
  设置 VideoPlayer1.源(Source) 为 clip
  执行 VideoPlayer1.开始播放(Start)

十一、WebView 嵌入第三方播放器

VideoPlayer 组件功能较为基础，当需要更高级的功能（如自定义界面、字幕、倍速播放、弹幕等）时，可以使用 WebView（网页浏览器） 组件嵌入第三方 HTML5 播放器。

11.1 WebView 基本设置

  1. 在设计视图中添加 WebView 组件
  2. 设置 WebView 的宽高（建议铺满屏幕或使用 Fill parent）
  3. 取消勾选 FollowLinks 属性（防止用户点击跳转）
  4. 勾选 EnableJavascript 属性（启用 JavaScript）

11.2 使用 Plyr 播放器

Plyr 是一个简洁、可定制的 HTML5 媒体播放器，支持视频和音频播放，具有优美的 UI 和丰富的 API。

Plyr 播放器 HTML 模板

将以下 HTML 代码保存为文件上传到项目媒体资源中，或通过 WebView 的 WebViewString 属性动态设置：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #000;
    }
    .plyr {
      width: 100%;
      max-width: 100%;
    }
    /* 自定义缓冲动画 */
    .plyr--loading .plyr__control--overlaid {
      background: rgba(0, 0, 0, 0.8);
    }
    .plyr__control--overlaid {
      background: rgba(255, 0, 0, 0.8);
      border-radius: 50%;
    }
    .plyr__control--overlaid:hover {
      background: rgba(255, 0, 0, 0.9);
    }
  </style>
</head>
<body>
  <div class="plyr__video-embed" id="player">
    <video
      playsinline
      controls
      data-poster="poster.jpg">
      <source src="VIDEO_URL_HERE" type="video/mp4" />
    </video>
  </div>

  <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
  <script>
    const player = new Plyr('#player', {
      controls: ['play-large', 'play', 'progress', 'current-time', 'mute',
                 'volume', 'settings', 'pip', 'airplay', 'fullscreen'],
      settings: ['speed'],
      i18n: {
        play: '播放',
        pause: '暂停',
        mute: '静音',
        unmute: '取消静音',
        speed: '速度',
        normal: '正常',
        fullscreen: '全屏',
        exitFullscreen: '退出全屏',
        currentTime: '当前时间',
        duration: '时长',
        buffered: '已缓冲',
      },
      loadSprite: true,
      iconUrl: 'https://cdn.plyr.io/3.7.8/plyr.svg',
      blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
    });
  </script>
</body>
</html>

通过 WebView 加载 Plyr

方法一：使用 WebViewString 动态加载

当 Screen1.初始化 时
  设置 WebView1.网页字符串(WebViewString) 为 "<html代码内容>"

方法二：加载本地 HTML 文件

将上面的 HTML 文件上传到项目媒体资源中（例如命名为 player.html），然后：

当 Screen1.初始化 时
  调用 WebView1.访问网页(GoToUrl) "file:///android_asset/player.html"

动态切换视频源

通过 WebViewString 与网页中的 JavaScript 通信，可以动态切换视频：

当 按钮_切换视频.被点击 时
  设置 WebView1.网页字符串(WebViewString) 为 "https://example.com/new-video.mp4"

在 HTML 的 JavaScript 中添加监听：

// 监听来自 App Inventor 的消息
setInterval(function() {
  var newUrl = window.AppInventor ? window.AppInventor.getWebViewString() : '';
  if (newUrl && newUrl !== currentUrl) {
    currentUrl = newUrl;
    player.source = {
      type: 'video',
      sources: [{ src: currentUrl, type: 'video/mp4' }]
    };
    window.AppInventor.setWebViewString('');  // 清除消息
  }
}, 500);

11.3 为 Plyr 添加缓冲动画

Plyr 默认在视频缓冲时会显示加载动画。你可以通过 CSS 自定义缓冲动画效果：

/* 自定义旋转加载动画 */
.plyr--loading .plyr__control--overlaid::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: plyr-spin 0.8s linear infinite;
}

@keyframes plyr-spin {
  to { transform: rotate(360deg); }
}

/* 隐藏默认的大播放按钮图标 */
.plyr--loading .plyr__control--overlayed svg {
  display: none;
}

11.4 WebView 播放器的优势

特性 VideoPlayer 组件 WebView + Plyr
设置难度 简单 中等
自定义 UI 不支持 完全自定义
倍速播放 不支持 支持
字幕 不支持 支持（SRT/VTT）
缓冲动画 系统默认 可自定义
全屏控制 内置支持 需 CSS/JS 处理
画中画 不支持 支持
本地视频 支持 需特殊处理
网络视频 支持 支持

十二、常见问题与解决方案

Q1：视频文件太大无法打包怎么办？

App Inventor 对视频文件有 1 MB 大小限制。解决方案：

  • 方案一：使用视频压缩工具减小文件体积（推荐使用 FFmpeg 或在线压缩工具）
  • 方案二：将视频放在网络服务器上，通过网络 URL 播放
  • 方案三：使用 WebView 嵌入在线视频播放器

Q2：视频播放时出现黑屏或无法播放？

可能的原因及解决方案：

  • 格式不兼容：确保视频为 MP4（H.264 编码）或 3GP 格式
  • 编码问题：使用 FFmpeg 转码：ffmpeg -i input.avi -c:v libx264 -c:a aac output.mp4
  • URL 错误：网络视频 URL 必须直接指向视频文件，不能是网页链接
  • 权限问题：确保应用有 Internet 权限（VideoPlayer 自动声明）

Q3：如何实现视频循环播放？

VideoPlayer 没有内置循环属性，但可以通过 Completed 事件实现：

当 VideoPlayer1.播放完成(Completed) 时
  执行 VideoPlayer1.跳转到(SeekTo) 0
  执行 VideoPlayer1.开始播放(Start)

Q4：如何获取视频播放进度？

可以通过 Timer 组件定时获取当前播放位置：

当 计时器1.计时(Timer) 时
  设置 标签_进度.文本(Text) 为
    "当前: " + Math_除法(VideoPlayer1.当前位置, 1000) + "秒 / " +
    "总时长: " + Math_除法(VideoPlayer1.获取时长(GetDuration), 1000) + "秒"

Q5：播放 YouTube 视频可以吗？

VideoPlayer 组件不能直接播放 YouTube 视频，因为 YouTube 的 URL 是网页链接而非视频文件直链。解决方案：

  • 使用 WebView 组件加载 YouTube 嵌入页面
  • 使用 YouTube Embed URL 格式：https://www.youtube.com/embed/VIDEO_ID
当 按钮_播放YouTube.被点击 时
  调用 WebView1.访问网页(GoToUrl) "https://www.youtube.com/embed/dQw4w9WgXcQ"

Q6：视频画面被拉伸/压缩怎么办？

VideoPlayer 会根据组件的宽高来显示视频，可能导致画面变形。建议：

  • 使用 Fill parent 宽度，高度按视频宽高比计算
  • 或者在 WebView 中使用 Plyr 等播放器，它们会自动处理宽高比

Q7：iOS 上 VideoPlayer 有什么不同？

App Inventor for iOS 同样支持 VideoPlayer 组件，但有以下差异：

  • iOS 对视频格式的要求可能不同，推荐使用 MP4（H.264/AAC）
  • 全屏模式的实现方式略有不同
  • 部分设备可能对特定编码格式支持不完整

Q8：如何实现视频列表播放？

使用 List（列表）存储多个视频源，通过 Index 变量控制当前播放的视频：

当 Screen1.初始化 时
  设置 全局_视频列表 为 [视频列表]
    "https://example.com/video1.mp4",
    "https://example.com/video2.mp4",
    "https://example.com/video3.mp4"
  设置 全局_当前索引 为 1
  设置 VideoPlayer1.源(Source) 为
    从列表中取值(全局_视频列表, 全局_当前索引)

当 VideoPlayer1.播放完成(Completed) 时
  设置 全局_当前索引 为 全局_当前索引 + 1
  如果 全局_当前索引 > 列表长度(全局_视频列表)
    设置 全局_当前索引 为 1
  设置 VideoPlayer1.源(Source) 为
    从列表中取值(全局_视频列表, 全局_当前索引)
  执行 VideoPlayer1.开始播放(Start)

十三、完整示例：简易视频播放器

以下是一个简易视频播放器的完整实现思路：

界面设计

  • 一个 VideoPlayer 组件（宽度 Fill parent，高度 200px）
  • 三个按钮：播放、暂停、停止
  • 一个 Slider（滑动条）用于控制进度
  • 一个 Label（标签）显示播放时间

核心积木块逻辑 

当 Screen1.初始化 时
  设置 VideoPlayer1.源(Source) 为 "sample.mp4"
  设置 计时器1.启用计时(TimerEnabled) 为 false

当 按钮_播放.被点击 时
  执行 VideoPlayer1.开始播放(Start)
  设置 计时器1.启用计时(TimerEnabled) 为 true

当 按钮_暂停.被点击 时
  执行 VideoPlayer1.暂停(Pause)

当 按钮_停止.被点击 时
  执行 VideoPlayer1.停止(Stop)
  设置 计时器1.启用计时(TimerEnabled) 为 false

当 计时器1.计时(Timer) 时
  设置 局部_当前秒 为 Math_四舍五入(VideoPlayer1.当前位置 / 1000)
  设置 局部_总秒 为 Math_四舍五入(VideoPlayer1.获取时长(GetDuration) / 1000)
  设置 标签_时间.文本(Text) 为 局部_当前秒 + "秒 / " + 局部_总秒 + "秒"
  设置 滑动条1.滑动位置(ThumbPosition) 为
    (局部_当前秒 / 局部_总秒) * 100

当 滑动条1.位置改变(PositionChanged) 时
  设置 局部_目标毫秒 为 Math_四舍五入(
    滑动条1.滑动位置(ThumbPosition) / 100 * VideoPlayer1.获取时长(GetDuration))
  执行 VideoPlayer1.跳转到(SeekTo) 局部_目标毫秒

当 VideoPlayer1.播放完成(Completed) 时
  设置 计时器1.启用计时(TimerEnabled) 为 false
  调用 通知器1.显示提示(ShowAlert) "视频播放完毕！"

十四、参考资料

*文档版本：2025.05 更新日期：2025-05-18 作者：App Inventor 2 中文网 www.fun123.cn*

版权声明

本文档基于 MIT App Inventor 开源项目整理编写，遵循 Apache 2.0 授权。 本文档由 ai2claw 🐝 编写整理，仅供学习参考。

文档反馈

在线
客服

扫码添加客服咨询

我要
分享

扫码分享到朋友圈

App Inventor 2 中文网

 MIT同步更新的中文本土化
 积木式在线App开发平台！
关注公众号，
精彩不错过！