教辅小程序之微课页面Demo

教辅小程序之微课页面Demo

1.近做毕设的微信小程序，下面是我的微课页面的Demo效果图。

2.所用代码
wxml代码：

<view class="lesson0">第二章 线性表</view>
<view class="lesson">第二章第一节 线性表的逻辑结构
</view>
<view>
<video style="width: 100%;height=400px;margin:1px;" 
src="填你的视频下载地址" binderror="videoErrorCallback" 
title="第二章第一节 线性表的逻辑结构" show-center-play-btn="true"controls >
</video>
</view>

wxss代码：

/* pages/lesson/lesson.wxss */
.lesson_box{
   display: flex;
   flex-direction: column;
    justify-content: center;
    align-items: center;
}
.video_container{
   height: 100%;
   width: 110%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 20rpx 0;
}

.lesson{
  
  font-family:SimHei;
  margin: 20rpx 30rpx 15rpx ;
}
.lesson0{
  font-family:SimHei;
   margin: 20rpx 30rpx 15rpx ;
   text-align: center;
   color: #4CCCCF;
}

注
我的视频地址是在微信云开发储存里，下载地址复制尽量就行。