非 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事件

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐