微信小程序本地视频播放失败问题分析

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

微信小程序本地视频播放失败问题分析

        微信小程序中直接播放本地视频资源可能失败，但播放线上视频通常正常。

        播放本地视频的代码示例

        video.wxml

<view class="w">
  <video 
    src="../../videos/course.mp4"
    binderror="binderror"  
  ></video>
</view>

        video.js

Page({
  binderror(err){
    console.log(err)
  }
})

        运行结果，截图如下

        播放线上视频的代码示例

        若把 src 换成线上视频地址，代码如下：

        video.wxml

<view class="w">
  <video 
    src="http://127.0.0.1:5500/data/videos/course.mp4"
    bindplay="bindplay"
    bindpause="bindpause"
    bindended="bindended"
  ></video>
</view>

        video.js

Page({
  bindplay(e){
    console.log(e)
  },
  bindpause(e){
    console.log(e)
  },
  bindended(e){
    console.log(e)
  }
})

        通过把 src 替换成线上视频地址，通常能解决本地视频无法播放的问题。

        运行结果，截图如下：

        属性介绍：

属性	描述
src	视频资源地址（支持网络/本地路径）
binderror	视频播放出错时触发
bindplay	当开始/继续播放时触发play事件
bindpause	当暂停播放时触发pause事件
bindended	当播放到末尾时触发ended事件