uni-app video标签视频本地播放正常，打包h5后手机访问失败

uni-app video标签视频本地播放正常，打包h5后手机访问失败

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

最新

HBuilderX类型：

正式

HBuilderX版本号：

3.1.21

手机系统：

iOS

手机系统版本号：

IOS 14

手机厂商：

苹果

手机机型：

xr

页面类型：

vue

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

video标签视频，本地播放正常，打包h5后手机访问就访问失败

操作步骤：

video标签视频，本地播放正常，打包h5后手机访问就访问失败

预期结果：

video标签视频，本地播放正常，打包h5后手机访问就访问失败

实际结果：

video标签视频，本地播放正常，打包h5后手机访问就访问失败

bug描述：

video标签视频，本地播放正常，打包h5后手机访问就访问失败

更多关于uni-app video标签视频本地播放正常，打包h5后手机访问失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

同样的问题，解决了吗

更多关于uni-app video标签视频本地播放正常，打包h5后手机访问失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的H5视频播放路径问题。本地开发时视频路径指向本地服务器，但打包后路径未正确映射到静态资源目录。

检查并修正以下配置：

  1. 视频文件位置：确保视频文件放在static目录下，打包后该目录内容会原样输出。

  2. 视频路径引用：

    <!-- 正确方式 -->
<video :src="videoSrc"></video>

    // 静态资源使用相对路径
data() {
  return {
    videoSrc: '/static/video/demo.mp4'
  }
}

  3. iOS兼容性：iOS对视频格式有严格要求，建议使用MP4格式（H.264编码）。

  4. 网络请求检查：在手机浏览器中打开开发者工具，查看视频资源的网络请求状态码，确认是否404。

  5. 服务器配置：确保服务器正确配置了MP4文件的MIME类型：

    video/mp4
回到顶部