小程序入坑记录

最新推荐文章于 2024-12-25 18:09:49 发布

转载最新推荐文章于 2024-12-25 18:09:49 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhouyu629/p/6413374.html

本文介绍了一种在WeChat小程序中实现视频章节动态切换的方法，并提供了具体的wxml和js代码示例。通过绑定点击事件并利用createVideoContext API，实现了视频源的动态更新及自动播放。

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

一、Video

官方文档中没有说明有poster属性，试了貌似可以使用

1.动态切换播放源

wxml:

<video id="myVideo" src="{{defaultCourse.Course_LinkUrl}}" poster="{{courseDetail.Course_Detail.Course_Img}}"  controls autoplay="true"></video>

章节列表：

bindtap="sectionOnclick"触发事件，绑定了当前所属章节的序号（为了动态更改css样式表）

class="{{currentIdx==cidx+'-'+sidx?'current-section':''}}"，这个三元表达式，表示点击当前节的时候，把当前节点变绿（current-section，其实就是一个color:#008000;）

<view style="padding:5px;">
        <!--章节-->
        <view wx:for="{{courseDetail.Course_Chapter}}" wx:for-index="cidx">
          <view class="course-chapter">{{item.Chapter_Name}}</view>
          <view wx:for="{{item.Sections}}" wx:for-index="sidx" class="course-section">
            <view style="display: flex;flex-direction: row;padding:0px;">
              <view style="padding:0px;width:700rpx;" bindtap="sectionOnclick" data-sidx="{{sidx}}" data-cidx="{{cidx}}"  data-course="{{item}}" class="{{currentIdx==cidx+'-'+sidx?'current-section':''}}">
                >{{item.Section_Name}}
              </view>
              <view style="width:50rpx;padding:0px;">{{item.Course_Length}}</view>
            </view>
          </view>
        </view>
      </view>

js代码：

//点击章节
  sectionOnclick:function(event){
    var myvideo = wx.createVideoContext("myVideo");
    console.log(myvideo);
    this.setData({
      currentIdx : event.target.dataset.cidx+'-'+event.target.dataset.sidx
    });
    this.setData({
      defaultCourse:event.target.dataset.course
    });
    myvideo.play();
  }

这里有个坑：设置完成后，切换章节无法自动播放，必须手动点一下播放按钮才可以。myvideo.play()无效。偶尔会有效果，可以听到声音，但画面不动。

把video设置为autoplay后也可以。不知道是不是哪里操作问题。。。。

转载于:https://www.cnblogs.com/zhouyu629/p/6413374.html