首页 > 代码库 > 小程序入坑记录
小程序入坑记录
一、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后也可以。不知道是不是哪里操作问题。。。。
小程序入坑记录
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。