uniapp 视频播放如何实现

在uniapp中如何实现视频播放功能？需要支持哪些格式？有没有推荐的插件或组件？能否自定义控制条和全屏播放？在不同平台上表现是否一致？求具体代码示例和实现步骤。

2 回复

在uniapp中，使用<video>组件即可实现视频播放。例如：

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

也可使用官方插件如uni.createVideoContext控制播放。


在 UniApp 中实现视频播放，可以使用内置的 <video> 组件或第三方插件。以下是实现方法：

1. 使用内置 <video> 组件

在页面中添加 <video> 标签，设置视频源和其他属性。

示例代码：

<template>
  <view>
    <video 
      :src="videoUrl" 
      controls 
      autoplay 
      style="width: 100%;"
      @play="onPlay"
      @pause="onPause"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/sample.mp4' // 替换为实际视频地址
    };
  },
  methods: {
    onPlay() {
      console.log('视频开始播放');
    },
    onPause() {
      console.log('视频暂停');
    }
  }
};
</script>

关键属性说明：

  • src：视频资源地址，支持网络链接或本地路径。
  • controls：显示默认播放控件（播放/暂停、进度条等）。
  • autoplay：是否自动播放（部分平台可能受限）。
  • loop：是否循环播放。
  • muted：是否静音。

2. 使用第三方插件（如：uni-app-video）

若需更强大功能（如弹幕、清晰度切换），可集成第三方插件：

  1. 在插件市场搜索“视频播放器”并导入项目。
  2. 按照插件文档配置和使用。

注意事项：

  • 平台差异：H5 和 App 端支持较好，小程序端可能受平台限制（如自动播放需用户触发）。
  • 性能优化：长视频建议分段加载或使用流媒体服务（如 HLS）。
  • 路径格式：
    • 网络地址：https://example.com/video.mp4
    • 本地地址：/static/video.mp4（文件放在 static 目录）

扩展功能建议：

  • 自定义控件：通过覆盖 controls 并监听事件实现 UI 定制。
  • 全屏播放：使用 videoContext.requestFullScreen() 方法。

以上方法可满足大部分场景需求，具体可根据项目复杂度选择方案。

回到顶部