uniapp 如何实现播放mp4视频

在uniapp中如何播放本地的mp4视频？我尝试使用video组件，但路径设置后无法正常加载视频文件，控制台也没有报错信息。应该怎样正确引用本地mp4文件？是否需要特殊配置或使用插件？

2 回复

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

<video src="https://example.com/video.mp4" controls></video>

支持本地和网络视频，可添加controls属性显示控制条。


在 UniApp 中播放 MP4 视频，可以使用内置的 video 组件。以下是实现步骤和示例代码：

1. 基本用法

在页面或组件中添加 video 组件，并设置视频源（src）：

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

2. 关键属性说明

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

3. 完整示例代码

<template>
  <view class="container">
    <video 
      :src="videoUrl" 
      :poster="posterUrl" 
      controls 
      autoplay 
      loop 
      @play="onPlay" 
      @pause="onPause"
      style="width: 100%; height: 400rpx;"
    ></video>
  </view>
</template>

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

4. 注意事项

  • 平台差异：iOS 下自动播放可能需设置 autoplay 并手动触发（如用户交互后）。
  • 本地视频：若使用本地文件，需将视频放在 static 目录，路径如 /static/video.mp4。
  • 格式支持：MP4 是通用格式，但建议使用 H.264 编码以确保兼容性。

通过以上步骤即可在 UniApp 中快速实现 MP4 视频播放功能。

回到顶部