微信小程序，连续播放多段视频。合成一个视频的样子，自定义视频进度条

最新推荐文章于 2025-03-22 17:40:40 发布

肖肖肖丽珠

最新推荐文章于 2025-03-22 17:40:40 发布

阅读量3.4k

点赞数 1

分类专栏：小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_33769914/article/details/125561330

版权

本文介绍了如何在微信小程序中实现多段视频连续播放并创建一个自定义进度条组件。首先，自定义进度条需要知道每个视频的时长，总长度为所有视频时长之和。其次，监听每个视频的结束事件，判断是否播放完成。最后，处理进度条拖动事件，根据拖动位置播放相应视频。同时，隐藏原视频控件的播放按钮，使用自定义组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，首先要自定义播放进度的组件。因为每次播放自带的进度条，每个视频都是从0开始的。所以不显示自带的进度条。自定义一个进度条。可以参考小程序官网silder组件来写进度条。

所以前提是我们必须知道每个视频的长度。这样自定义进度条的时候总长度就是所有的视频长度之和。 slider | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

2,需要监听每个视频结束的函数，每次结束触发函数里面去判断是否播放了全部的视频。

3，拖拽进度条的时候要判断。拖到了第几个视频。然后播放相应的数组里面的第几个视频。

重写进度条和播放暂停所以原来的暂停播放和进度条就不显示了。video标签添加

show-play-btn="{ {false}}" show-center-play-btn="{ {false}}"

WXML

<view class="content">
    <video class="video" id="video"
           src="{
  {videoList[index].url||defaultVideo}}"
           object-fit="cover"
           id="video"
           autoplay="{
  {false}}"
           controls="{
  {false}}"
           show-play-btn="{
   {false}}"
           show-center-play-btn="{
   {false}}"
           enable-progress-gesture="{
  {true}}"
           bindtimeupdate="bindtimeupdate"
           bindseekcomplete="bindseekcomplete"
           binderror="error"
           bindended="ended"
    >
    </video>
    <view class="process-container">
        <van-icon name="{
  {playStates ? 'pause':'play'}}" class="play-pause" bindtap='videoOpreation'/>

        <view class="slider">
            <slider block-size="{
  {12}}" class="slider-light" activeColor="#ccc"
                    value="{
  {isSlide ? percentSlide : percent}}" bindchang

最低0.47元/天解锁文章