视频播放的微信小程序

最新推荐文章于 2024-07-25 21:27:06 发布

m0_59549899

最新推荐文章于 2024-07-25 21:27:06 发布

阅读量225

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/m0_59549899/article/details/126447613

版权

一、实验目标

开发一个可以视频播放小程序

二、实验步骤

1.导航栏设计(app.json)

{

  "pages":[

    "pages/index/index"

  ],

  "window":{

    "navigationBarBackgroundColor": "#987938",

    "navigationBarTitleText": "口述校史"

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

2.页面设计

思路：页面方面用video标签放视频，input标签输入弹幕，button标签用于提交弹幕，下面用每个视频用image和text分别存放图片和视频链接。

（1）index.wxml

<video id='myVideo' src='{{src}}' controls 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/play.png'></image>

    <text>{{item.title}}</text>

  </view>

</view>

(2)index.wxss

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;

}

3.逻辑设计(index.js)

思路：使用wx:for把所用的视频展示在下面供用户选择。input绑定函数getDanmu，button绑定函数sendDanmu。使用getColor函数来随机生成颜色。最后把得到的弹幕及颜色展示在视频上即可。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    danmuTxt:'',
    list:[],
    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'
    }
  ]
    
  },

  getDanmu:function(e){
    this.setData({
      danmuTxt:e.detail.value
    })
  },

  sendDanmu:function(e){
    let text=this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:getColor()
    })
  },

  playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play()
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx=wx.createVideoContext('myVideo')
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
});

function getColor() {
  const 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('')
}