小程序制作一个视频播放器来加载视频文件（代码）

原创已于 2026-05-29 10:47:40 修改 · 218 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#小程序视频播放 #视频播放 #视频编解码

于 2026-05-29 10:46:17 首次发布

微信同时被 2 个专栏收录

16 篇文章

订阅专栏

企业微信

14 篇文章

订阅专栏

该文章已生成可运行项目，

小程序制作一个视频播放器来加载视频文件（代码）

在微信小程序中制作视频播放器非常简单，核心是使用微信官方提供的原生 video组件。

下面为你提供一个最基础的视频播放器代码框架，包含页面结构（WXML）、样式（WXSS）和逻辑（JS）三部分：

1. 页面结构（index.wxml）

在 wxml 文件中添加 <video> 组件，并设置基础属性（如视频地址、是否显示控制栏、封面图等）：

<view class="video-container">
  <video 
    id="myVideo" 
    src="{{videoSrc}}" 
    controls="{{true}}" 
    poster="{{posterSrc}}"
    bindplay="onPlay"
    bindpause="onPause"
  ></video>
</view>

2. 页面样式（index.wxss）

为了让视频播放器在不同手机屏幕上自适应，通常设置宽度为 100%：

.video-container {
  width: 100%;
  height: 422rpx; /* 可以根据实际视频比例调整高度 */
}

video {
  width: 100%;
  height: 100%;
}

3. 页面逻辑（index.js）

在 js 文件中定义视频的数据，并可以监听视频的播放、暂停等事件：

Page({
  data: {
    // 替换为你自己的视频地址（注意：小程序强制要求使用 https 协议）
    videoSrc: 'https://example.com/your-video.mp4',
    // 替换为你自己的视频封面图地址
    posterSrc: 'https://example.com/your-poster.jpg'
  },

  // 监听视频开始播放事件
  onPlay() {
    console.log('视频开始播放');
  },

  // 监听视频暂停事件
  onPause() {
    console.log('视频已暂停');
  }
})

💡 进阶与注意事项：

获取视频上下文进行控制：如果你需要通过自定义的按钮来控制视频（比如自己写一个播放/暂停按钮，而不是用默认的），可以通过 wx.createVideoContext 来获取视频上下文进行操作：

// 比如在自定义按钮的点击事件中：
playVideo() {
  const videoContext = wx.createVideoContext('myVideo', this);
  videoContext.play(); // 调用播放
  // videoContext.pause(); // 调用暂停
  // videoContext.requestFullScreen(); // 调用全屏
}

视频格式与协议：微信小程序对视频格式的支持以 MP4 (H.264编码) 和 HLS (.m3u8) 为主。为了兼容性，强烈推荐使用这两种格式。同时，线上的视频资源地址必须使用 HTTPS 协议，否则在真机上会无法播放。
自定义控制条：如果觉得默认的 controls 样式不符合需求，可以将 controls 设置为 false，然后自己用 view、image 等组件写一套 UI，再通过 videoContext 去控制视频的播放逻辑。