小程序入坑記錄

一、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后也可以。不知道是不是哪里操作問題。。。。