微信小程序 videocontext 无法播放本地视频

丘上人

1352人浏览 · 2025-01-25 22:07:49

丘上人 · 2025-01-25 22:07:49 发布

微信小程序不支持本地视频播放，必须要将视频上传到腾讯云或者其他支持https视频传输协议的云服务器上，可以测试的视频网址：
http://vjs.zencdn.net/v/oceans.mp4
https://media.w3.org/2010/05/sintel/trailer.mp4
也可以使用自己视频号中的视频。用安装了强力视频下载合并插件的浏览器登录微信视频号。打开视频，点开这个

再复制

这样就能获取到视频号中视频的 https传输协议的网址。这里只能获取到自己视频号账号中的视频。

一个可以播放的小程序

创建

将下面的文件内容替换。小程序播放的视频可以是腾讯云的视频，

// index.js

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
    data: {
        //videoSrc: 'https://www.bilibili.com/video/BV17wfnYuE3f'// 这里替换为你的本地视频文件路径
        //videoSrc: 'http://vjs.zencdn.net/v/oceans.mp4',
        videoSrc: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
        isFullScreen: false,
        playbackRate: 1
    },
    onLoad: function () {
        this.videoCtx = wx.createVideoContext('myVideo'); 
        //this.videoCtx.play();
        // 可以在这里进行一些初始化操作，例如获取视频信息等
    },
    playVideo: function () {
        console.log('播放视频');
        this.videoCtx.play();
        // 确保这里没有立即调用 pause()
      },
      pauseVideo: function () {
        console.log('暂停视频');
        this.videoCtx.pause();
      },
      seekTo30(e) {
        console.log('视频跳转30s',e);
        this.videoCtx.seek(30);
      },
      changePlaybackSpeed(e){  //设置播放速度
        const speed = parseFloat(e.currentTarget.dataset.speed);
        console.log("播放速度1",speed);
        this.videoCtx.playbackRate(speed);
        this.setData({
            playbackRate: speed
        });
        console.log("播放速度2",speed);
      },
      toggleFullScreen() {
        if (this.data.isFullScreen) {
          this.videoCtx.exitFullScreen();
        } else {
          this.videoCtx.requestFullScreen({ direction: 90 }); // 横屏模式
        }
        this.setData({ isFullScreen: !this.data.isFullScreen });
      },
      onVideoPlay(e) {
        console.log('视频开始播放',e);
        //this.videoCtx.play();
    },
    onVideoPause (e) {
        console.log('视频暂停播放',e);
        //this.videoCtx.pause();
    },
    onVideoError(e) {
        console.error('视频错误:', e.detail.errMsg);
        wx.showToast({ title: '播放错误', icon: 'none' });
      },
    onReady: function () {
        //this.videoCtx = wx.createVideoContext('myVideo',this);
    }
})

index.xml

<view class="container">
        <video id="myVideo" src="{
  {videoSrc}}" controls style="width: 100%; height: 300px;"
        bindplay="onVideoPlay"
        bindpause="onVideoPause"
        bindended="onVideoEnded"
        binderror="onVideoError"
  ></video>
        <button bindtap="playVideo">播放视频</button>
        <button bindtap="pauseVideo">暂停视频</button>
        <button bindtap="seekTo30">跳转到30秒</button>
        <button bindtap="toggleFullScreen">全屏切换</button>
        <button bindtap="changePlaybackSpeed" data-speed="0.5">0.5x</button>
        <button bindtap="changePlaybackSpeed" data-speed="1">1x</button>
        <button bindtap="changePlaybackSpeed" data-speed="1.5">1.5x</button>
        <button bindtap="changePlaybackSpeed" data-speed="2">2x</button>
        <button bindtap="changePlaybackSpeed" data-speed="3">3x</button>
        <button bindtap="changePlaybackSpeed" data-speed="4">4x</button>
</view>

index.wxss

.container {
    padding: 20px;
}

videoContext没有设置视频滑动让快进、倒退，或者通过进度条调整视频播放的功能。但是它默认有这个功能（或许是因为这个原因，才不支持本地视频而只支持视频流）。或者通过seek进行跳转。

微信小程序开发社区小程序交流专区 | 微信开放社区对 “videocontext 不支持本地视频播放” 的回答

在微信小程序中，VideoContext 主要用于控制与 video 组件相关的播放行为。然而，VideoContext 并不支持直接播放本地视频文件。根据官方文档，video 组件的 src 属性通常需要一个网络地址或通过代码包内的资源路径来引用视频，而不支持直接使用本地文件路径。

如果你需要在小程序中播放本地视频，有几种解决方案可以考虑：

使用网络地址：将视频上传到一个可以公开访问的服务器或云存储服务，然后在 video 组件中使用该视频的网络 URL 作为 src。
使用小程序的文件系统：虽然 VideoContext 不支持本地播放，但你可以使用小程序的文件系统 API 来处理本地文件。你可以先将本地视频上传到小程序的临时文件路径，然后通过该路径生成一个可访问的 URL。不过，这种方法依然需要确保视频能够通过网络访问。
转换为支持的格式：确保你的视频格式是被 video 组件所支持的（如 MP4 等），并符合微信小程序的相关要求。
其他方案：如果以上方法不适用，可能需要考虑其他方式来实现视频播放的需求，比如使用第三方库或插件，或者重新设计视频播放的逻辑。