视频播放小程序

一、实验目标

1、掌握视频列表的切换方法；

2、掌握视频自动播放方法；

3、掌握视频随机颜色弹幕效果。

二、实验步骤

1.创建项目并删除app.wxss、index.wxml、index.wxss、index.js中代码，删除log文件夹

2.app.json的代码

navigationBarBackgroundColor的设置使得导航栏的颜色为棕色；

navigationBarTitleText为导航栏上所显示的文字；

navigationBarTextStyle设置导航栏上字体的颜色。

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "口述校史",
    "navigationBarTextStyle":"white"
  },

3.index.wxml的代码

使用video、view、image、text、等组件，并通过{{}}进行数据动态绑定

<video id='myVideo' controls src="{{src}}" enable-danmu danmu-btn></video>
<view class='danmuArea'>
    <input type='text' placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
    <button bindtap="sendDanmu">发送弹幕</button>
</view>

<view class='videoList'>
    <view class='videoBar' wx:for='{{list}}' wx:key='video{{index}}'data-url='{{item.videoUrl}}'bindtap='playVideo'>
        <image src='/images/images/play.png'></image>
        <text>{{item.title}}</text>
    </view>
</view>

4.在wxss中对view、image、text、video等进行渲染

video{
    width: 100%;
}

.danmuArea{
    display: flex;
    flex-direction: row;
}
input{
    border: 1rpx solid #987938;
    flex-grow: 1;
    height: 100rpx;
}
button{
    color: white;
    background-color: #987938;
}
.videoList{
    width: 100%;
    min-height: 400rpx;
}
.videoBar{
    width: 95%;
    display: flex;
    flex-direction: row;
    border-bottom: 1rpx solid #987938;
    margin: 10rpx;
}
image{
    width: 70rpx;
    height: 70rpx;
    margin: 20rpx;
}
text{
    font-size: 45rpx;
    color: #987938;
    margin: 20rpx;
    flex-grow: 1;
}

5.在index.js中编写逻辑结构

数据集部分包含不同视频对应的标题、地址和id，包含输入弹幕的内容变量。

data: {
      danmuText:'',
    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'
      }
    ]
  },

函数部分包括视频播放函数playvideo（）和弹幕发送函数sendDanmu

getDanmu:function(e){
    this.setData({
        danmuText:e.detail.value
    })
  },
  sendDanmu:function(e){
    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('')
    }
      let text=this.data.danmuText;
      this.videoCtx.sendDanmu({
          text:text,
          color:getRandomColor()
      })
  },
  
  playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
        src:e.currentTarget.dataset.url
    })
    this.videoCtx.play()
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx=wx.createVideoContext('myVideo')
  },

 

• 程序运行结果