uniapp如何播放视频

在uniapp中如何实现视频播放功能？我在H5端可以使用video标签，但在App端似乎不兼容。有没有统一的跨平台解决方案？需要支持常见视频格式（如MP4、FLV），最好能自定义控制条和全屏功能。求具体代码示例和兼容性注意事项。

2 回复

在uniapp中，使用video组件即可播放视频。示例：

<video src="视频地址" controls></video>

支持本地和网络视频，可添加控制条、自动播放等属性。


在 UniApp 中播放视频，可以使用内置的 <video> 组件，它支持跨平台（如 H5、小程序、App 等）播放视频文件。以下是基本用法和示例代码：

基本步骤：

  1. 引入视频组件：在页面的 .vue 文件中使用 <video> 标签。
  2. 设置视频源：通过 src 属性指定视频文件路径（支持本地路径或网络 URL）。
  3. 配置属性：可设置自动播放、控制条、循环等属性。

示例代码：

<template>
  <view>
    <video 
      src="https://example.com/sample.mp4" 
      controls 
      autoplay 
      loop 
      style="width: 100%;"
    ></video>
  </view>
</template>

关键属性说明：

  • src：视频资源地址（必填）。
  • controls：是否显示默认控制条（默认为 true）。
  • autoplay：是否自动播放（注意：部分平台需用户交互才能自动播放）。
  • loop：是否循环播放。
  • muted：是否静音播放（可解决部分平台自动播放限制）。

注意事项：

  • 平台差异：自动播放行为可能受平台限制（如 iOS 需用户触发）。
  • 格式支持：常见格式如 MP4、WebM，但具体支持情况因平台而异。
  • 路径问题：网络视频需确保域名在小程序或 H5 的白名单中。

进阶功能：

如需自定义控制条或事件处理，可通过 @play、@pause 等事件监听，并结合 ref 调用组件方法（如 play()、pause()）。

以上方法简单高效，适用于大部分场景。如有复杂需求（如直播流），可结合插件或原生开发。

回到顶部