视频播放小程序

最新推荐文章于 2023-06-12 15:42:07 发布

33鹅

最新推荐文章于 2023-06-12 15:42:07 发布

阅读量471

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_53114829/article/details/126436964

版权

一、实验目标

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

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

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

二、实验步骤

一、项目创建

二、页面配置

创建图片文件

新建文件夹images，并将暂停图标存入文件夹

图片下载地址为：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip

三、视图设计

导航栏设计

在app.json中自定义导航栏标题和背景颜色

"window": {

  "navigationBarBackgroundColor": "#987938",

  "navigationBarTitleText": "口述校史"

 },

展示效果：

页面设计
- 视频组件设计
  
  controls属性用于显示播放/暂停、音量等控制组件。
- 弹幕设计
  
  使用view组件实现一个单行区域，包括文本输入框和发送按钮。
- 视频列表设计
  
  使用view组件实现一个可扩展的多行区域，每行包含一个播放图标和一个视频标题文本。

四、逻辑实现

更新播放列表

在videoBar组件中添加wx:for属性，改写为循环展示列表。

index.wxml:

<view class = 'videoList'>
    <view class = 'videoBar' wx:for = '{{list}}' wx:key = 'video{{index}}'

    <image src = '/images/play.png'></image>

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

</view>

在js的data属性中追加list数组，存放视频信息。

index.js:

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'
      }
    ]

点击播放视频

在videoBar组件中添加data-url属性和bindtap属性。其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。

<view class = 'videoBar' wx:for = '{{list}}' wx:key = 'video{{index}}' data-url="{{item.videoUrl}}" bindtap="playVideo">

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

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

添加自定义函数playVideo.JS：

 /**
   * 播放视频
   */
  playVideo: function(e){
    this.videoCtx.stop()
    this.setData({
      src: e.currentTarget.dataset.url
    })
    this.videoCtx.play()
  },

发送弹幕

在video组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮。

index.wxml:

<video id = 'myVideo' src = "{{src}}" controls enable-danmu danmu-btn></video>

index.js:

/**
   * 更新弹幕内容
   */
  getDanmu: function(e){
    this.setData({
      danmuTxt: e.detail.value
    })
  },
  /**
   * 发送弹幕
   */
  sendDanmu: function(e){
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:'red'
    })
  },

此时可发出红色弹幕。

发出随机颜色弹幕：在JS文件中追加自定义函数getRandomColor:

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('')
}

index.js:

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