制作视频播放小程序

最新推荐文章于 2023-09-14 19:26:33 发布

m0_65061854

最新推荐文章于 2023-09-14 19:26:33 发布

阅读量1.3k

点赞数

分类专栏：微信小程序文章标签：小程序微信微信小程序

本文链接：https://blog.csdn.net/m0_65061854/article/details/126437406

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、实验目标

1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。

二、实验步骤

（一）创建项目

（二）页面配置

1.创建一个新项目，进行删除和修改：

（1）将app.json文件内pages属性中的"pages/logs/logs"删除，并删除上一行末尾的逗号。

（2）按Ctrl+S保存

（3）删除utils文件夹及其内部所有内容

（4）删除pages文件夹下的logs目录及其内部所有内容

（5）删除index.wxml和index.wxss中的全部代码

（6）删除index.js中的全部代码，并且输入关键词page找到第二个选项按回车键补全函数

（7）删除app.wxss中的代码

（8）删除app.js中的全部代码，并且输入关键词app按回车键补全函数

（三）创建其他文件

1.创建新文件夹images，将图片下载并导入

（四）视图设计：

1.导航栏设计：在app.json中修改代码，使导航栏背景为金棕色，标题为"口述校史"

（五）页面设计：

1.区域一：视频组件设计

在index.wxml中使用<video>组件实现视频播放器，并在index.wxss中设置其样式

2.区域二：弹幕区域设计

在index.wxml中使用<view>组件实现一个单行区域，包括文本输入框和发送按钮；

在Index.wxss中设置其样式

3.区域三：视频列表设计

在Index.wxml中用<view>组件实现一个可扩展的多行区域，每行包含一个播放图标和一个视频标题文本，先设计第一行的效果，在Index.wxss中设置其样式

（六）逻辑实现

1.更新播放列表

在index.wxml的区域3中添加wx.for属性，改写为循环展示列表；

在index.js文件的data属性中追加list数组，存放视频信息

2.点击播放视频

在index.wxml的区域3中添加data-url属性和bindtap属性，其中 data-url属性用于记录每行视频对应的播放地址，bindtap 用于触发点击事件；

在index.js文件中的onLoad函数中创建视频上下文，用于控制视频的播放和停止；

添加自定义函数playVideo

3.发送弹幕

在index.wxml文件的区域1中添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示"发送弹幕"按钮；

在区域2的文本输入框中追加bindinput属性，用于获取弹幕文本内容；为按钮追加bindtap属性，用于触发点击事件；

在Index.js文件的data属性中修改代码

三、完整代码展示

1.index.js文件

Page({

  playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play()
  },
  /**
   * 页面的初始数据
   */
  data: {
    danmuTxt:'',
    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:'red'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },

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

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

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

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

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

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

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

2. index.json文件

{
  "usingComponents": {}
}

3.index.wxml文件

<!--区域1：视频播放器-->
<video id = 'myVideo' src = '{{src}}'controls enable-danmu  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="/images/play.png"></image>
<text>{{item.title}}</text>
</view>
</view>

4.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: 20rpx;
}
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
text{
  font-size: 45rpx;
  color: #987938;
  margin: 20rpx;
  flex-grow: 1;
}

5.app.js文件

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

6.app.json文件

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "口述校史"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

7.其余文件与初始相同