微信小程序視頻點播在線視頻學習系統 畢業設計 課程設計（5）視頻播放頁面

wxml代碼

<!--pages/shipin/vedio.wxml-->


<view class="biaoti">視頻課程：微信小程序樣式Flex Box精通課程</view>
<view class="kc">
    <video class="kc_shipin" id="myVideo" src="http://wx.hzyaoyi.cn/02-jichu/01.mp4" controls></video>
    <view class="kc_caozuo">
        <view class="kc_caozuo_bofang">
            <button bindtap="bindPlay" class="kc_caozuo_bofang_bt" type="primary">播放</button>
         </view>
        <view class="kc_caozuo_zanting">
            <button bindtap="bindPause" class="kc_caozuo_zanting_bt" type="primary">暫停</button>
        </view>
    </view>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">當前學習章節</view>
    <view class="qukuai_you"></view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo xuanzhong">1.6 HTML 元素入門要點</view>
    <view class="zhang2_you">學習</view>
</view>


<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">上2個章節</view>
    <view class="qukuai_you"></view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">1.4 HTML編輯器</view>
    <view class="zhang2_you">學習</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">1.5 入門示例</view>
    <view class="zhang2_you">學習</view>
</view>

<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">接下來學習的3個章節</view>
    <view class="qukuai_you"></view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">1.7 HTML屬性入門要點</view>
    <view class="zhang2_you">學習</view>
</view>

<view class="zhang1"> 
<view class="zhang1_zuo">第2章 HTML 基礎標籤</view>
<view class="zhang1_you">學習</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">2.1 HTML 標題 h1-h6 標籤</view>
    <view class="zhang2_you">學習</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">2.2 HTML 水平線 hr 標籤</view>
    <view class="zhang2_you">學習</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">2.3 HTML 註釋標籤和查看源代碼</view>
    <view class="zhang2_you">學習</view>
</view>
<view class="zhang2"> 
<view class="zhang2_zuo">2.4 HTML 段落 p 標籤</view>
    <view class="zhang2_you">學習</view>
</view>
<view class="zhang2"> 
    <view class="zhang2_zuo">2.5 HTML 換行 br 標籤</view>
    <view class="zhang2_you">學習</view>
</view>

wxss代碼

.biaoti{font-size: 16px; padding:0px 5px; background-color: white; height: 25px;
    box-sizing: border-box; line-height: 25px;text-shadow: 1px 1px 2px gainsboro;color: rgb(13, 163, 233);}

.kc{}
.kc_shipin{width: 100%;}
.kc_caozuo{display: flex; padding: 5px;}
.kc_caozuo_bofang{width: 50%; text-align: center;}
.kc_caozuo_bofang_bt{width: 90%;}
.kc_caozuo_zanting{width: 50%;}
.kc_caozuo_zanting_bt{width: 90%; text-align: center;}

.qukuai{display: flex;align-items:center; background-color:#f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;color: rgb(13, 163, 233);}
.qukuai_you{font-size: 16px; color: gray;padding-right: 10px;}


.zhang1{display: flex; font-size: 16px;padding: 5px;background-color: white;}
.zhang1_zuo{flex-grow: 1; padding-right: 10px;}
.zhang1_you{}

.zhang2{display: flex; font-size: 15px; padding: 10px 5px;color: gray;background-color: white;}
.zhang2_zuo{flex-grow: 1; padding-right: 10px;}
.zhang2_you{}

.xuanzhong{color: rgb(13, 163, 233);}