微信小程序学习——视频播放小程序

一、视图设计

（一）导航栏设计

# app.json——导航栏设置
{
    "pages":[
      "pages/index/index"
    ],
    "window":{
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#000080",
      "navigationBarTitleText": "口述校史",
      "navigationBarTextStyle":"white"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

（二）页面设计

1.视频组件

# pages/index.wxml
<!--区域一：视频播放器-->
<video id='myVideo'controls></video>

# pages/index.wxss
/*视频组件样式*/
video{
    width:100%; /*视频组件宽度为100%*/
}

2.弹幕区域

# pages/index.wxml
<!--区域2∶弹幕控制-->
<view class='danmuArea'>
    <input type='text'placeholder='请输入弹幕内容'></input>
    <button>发送弹幕</button>
</view>

# pages/index.wxss
/*区域2∶弹幕控制样式*/
/*2-1弹幕区域样式*/
.danmuArea {
    display: flex; /*flex模型布局*/
    flex-direction:row; /*水平方向排列*/
}

/*2-2文本输入框样式*/
input {
    border:1rpx solid #987938; /*1rpx宽的实线棕色边框*/
    flex-grow:1; /*扩张多余空间宽度*/
    height:100rpx; /*高度*/ 
}

/*2-3按钮样式*/
button {
    color:white; /*字体颜色*/
    background-color:#987938; /*背景颜色*/
}

3.视频列表

# pages/index.wxml
<!--区域3∶视频列表-->
<view class='videoList'>
    <view class='videoBar'>
        <image src='/image/play.png'></image>
        <text>这是一个测试标题</text>
    </view>
</view>

# pages/index.wxss
/*区域3∶视频列表样式*/
/*3-1视频列表区域样式*/
.videoList {
    width:100%; /*宽度*/
    min-height:400rpx; /*最小高度*/
}

/*3-2单行列表区域样式*/
.videoBar {
    width:95%; /*宽度*/
    display: flex; /*flex模型布局*/
    flex-direction:row; /*水平方向布局*/
    border-bottom:1rpx solid #987938; /*1rpx宽的实线棕色边框*/
    margin:10rpx; /*外边距*/
}

/*3-3播放图标样式*/
image {
    width:70rpx; /*宽度*/
    height:70rpx; /*高度*/
    margin: 20rpx; /*外边距*/
}

/*3-4文本标题样式*/
text {
    font-size:45rpx; /*字体大小*/
    color: #987938; /*字体颜色为棕色*/
    margin: 20rpx; /*外边距*/
    flex-grow:1; /*扩张多余空间宽度*/
}

二.逻辑实现

1.更新播放列表

# pages/index.wxml
<!--区域一：视频播放器-->
<video id='myVideo'controls src="{{src}}"></video>
...
<!--区域3∶视频列表-->
<view class='videoList'>
    <view class='videoBar'wx:for='{{list}}'wx:key='video{{index}}'>
        <image src='/image/play.png'></image>
        <text>{{item.title}}</text>
    </view>
</view>

# pages/index.js
/**
   * 页面的初始数据
   */
  data: {
    list: [{
        id: '1001',
        title: '杨国宜先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
      },
      {
        id: '1002',
        title: '唐成伦先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
      },
      {
        id: '1003',
        title: '倪光明先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
      },
      {
        id: '1004',
        title: '吴仪兴先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
      }
    ]
  },

2.点击播放视频

# pages/index.wxml
<!--区域3∶视频列表-->
<view class='videoList'>
    <view class='videoBar'wx:for='{{list}}'wx:key='video{{index}}'data-url='{{item.videoUrl}}'bindtap='playVideo'>
        <image src='/image/play.png'></image>
        <text>{{item.title}}</text>
    </view>
</view>

# pages/index.js
Page({
/**
* 播放视频
*/
   playVideo: function(e) {
    //停止之前正在播放的视频
    this. videoCtx. stop()
    //更新视频地址
    this.setData({
        src:e.currentTarget.dataset.url 
    })
    //播放新的视频
    this.videoCtx.play()
    }, 
...
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },

3.发送弹幕

# pages/index.wxml
<!--区域一：视频播放器-->
<video id='myVideo' controls autoplay src="{{src}}" enable-danmu-btn></video>

<!--区域2∶弹幕控制-->
<view class='danmuArea'>
    <input type='text'placeholder='请输入弹幕内容'bindinput='getDanmu'></input>
    <button bindtap='sendDanmu'>发送弹幕</button>
</view>

<!--区域3∶视频列表-->
<view class='videoList'>
    <view class='videoBar'wx:for='{{list}}'wx:key='video{{index}}'data-url='{{item.videoUrl}}'bindtap='playVideo'>
        <image src='/image/play.png'></image>
        <text>{{item.title}}</text>
    </view>
</view>

# pages/index.js
//生成随机颜色
function getRandomColor() {
    let rgb = []
    for (let i=0;i<3;i++){
        let color = Math.floor(Math.random()*256).toString(16)
        color = color.length==1?'0'+color:color
        rgb.push(color)
    }
    return '#'+rgb.join('')
}

/**
 * 更新弹幕内容
 */
getDanmu: function(e){
    this.setData({
        danmuTxt:e.detail.value
    })
},

/**
 * 发送弹幕
 */
sendDanmu: function(e){
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
        text:text,
        color:getRandomColor()
    })
},