• 小程序入坑记录


    一、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;700rpx;" bindtap="sectionOnclick" data-sidx="{{sidx}}" data-cidx="{{cidx}}"  data-course="{{item}}" class="{{currentIdx==cidx+'-'+sidx?'current-section':''}}">
                    >{{item.Section_Name}}
                  </view>
                  <view style="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后也可以。不知道是不是哪里操作问题。。。。

  • 相关阅读:
    123457123457#0#-----com.tym.YuErBaiKeTYM--前拼后广--育儿百科
    123457123456#0#-----com.tym.XueYingYu01--前拼后广--小学英语tym
    123457123456#0#-----com.cym.shuXue02--前拼后广--开心学数学
    Spring事务失效的2种情况
    算法之排序
    JDK、Spring和Mybatis中使用到的设计模式
    MyBatis中#{}和${}的区别详解
    Redis为什么这么快
    java多线程之ScheduleThreadPoolExecutor
    java多线程之ThreadPoolExecutor
  • 原文地址:https://www.cnblogs.com/zhouyu629/p/6413374.html
Copyright © 2020-2023  润新知