视频播放器

沈辞-

已于 2022-08-20 14:54:19 修改

阅读量279

点赞数

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

于 2022-08-20 14:53:53 首次发布

本文链接：https://blog.csdn.net/weixin_51178398/article/details/126437529

版权

一、实验目标

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

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

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

二、实验步骤

1.创建项目并完成页面配置

（1）创建新项目

（2）创建页面文件

将app.json文件内pages属性中的“pages/logs/logs“删除，并删除上一行末尾的逗号并保存。

（3）删除并修改文件

①删除utils文件夹及其内部所有内容

②删除pages文件夹下的logs目录及其内部所有内容。

③删除index.wxml和index.wxss中的全部代码。

④删除index.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数。

⑤删除app.wxss中的全部代码，

⑥删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数。

（4）创建其他文件

创建images文件存放播放图标素材。

3.视图设置

（1）导航栏设计

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

（2）页面设计

区域1：视频播放器，用于播放指定的视频；
区域2：弹幕发送区域，包含文本输入框和发送按钮；
区域3：视频列表，垂直排列多个视频标题，点击不同的标题播放对应的视频内容。

•区域1:组件；
•区域2：< view>组件，并定义class=‘danmuArea’；区域2内部：和组件；
•区域3：组件，并定义class=‘videoList’；区域3内单元行：组件，并定义class=‘videoBar’; 区域3单元行内：每行一个组件用于显示播放图标、一个组件用于显示视频标题；

4.逻辑实现

（1）更新播放列表

在区域三对videoBar组件添加wx：for属性，改写为循环展示列表，然后在JS文件中data属性中追加list数组。

（2）点击播放视频

在区域三对viedoBar组件添加data-url属性和bindtap属性，分别用来记录每行视频对应的播放地址和触发点击事件。

在Js文件中的onLoad函数中创建视频上下文，用于控制视频的播放和停止，然后添加自定义函数playViedo。

（3）发送弹幕

在区域一对组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮，然后在区域二为文本框属性追加bindinput属性，用于获取弹幕文本内容；为按钮追加bindtap属性，用于触发点击事件。
对应Js文件添加更新弹幕内容和发送弹幕函数。
编写发出随机颜色的弹幕内容，在JS文件中追加自定义函数getRandomColor函数，随机生成一个十六进制的颜色，将其在原先需要录入color属性的地方调用即可实现彩色弹幕效果，

三、程序代码

//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>

//index.wxss
/*1-视频组件*/
video{
  width: 100%;
}
/*2-弹幕区域*/
.danmuArea{
  display: flex;
  flex-direction: row;
}
/*2-文本输入样式*/
input{
  border: 1rpx solid #3883AD;
  flex-grow: 1;
  height: 100rpx;
}
/*2-按钮样式*/
button{
  color:white;
  background-color:#3883AD ;
}
/*3-视频列表区域样式*/
.videoList{
  width: 100%;
  min-height: 400rpx;
}
/*3-单行列表区域样式*/
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #3883AD;
  margin: 10rpx;
}
/*3-播放图标样式*/
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
/*3-文本标题样式*/
text{
  font-size: 45rpx;
  color: #3883AD;
  margin: 20rpx;
  flex-grow: 1;
}

//app.json
{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3883AD",
    "navigationBarTitleText": "口述校史",
    "navigationBarTextStyle":"white"
  }
}

```javascript
//index.json
   /**
   * 随机颜色
   */
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('')
 }
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
   /**
   * 播放视频
   */
  playVideo:function(e){
    this.videoCtx.stop()//停止之前播放
    this.setData({src:e.currentTarget.dataset.url})//更新视频地址
    this.videoCtx.play()//播放新的视频
  },
  /**
   * 更新弹幕内容
   */
  getDanmu:function(e){
    this.setData({danmuTxt:e.detail.value})
  },

  /**
   * 发送弹幕
   */
  sendDanmu:function(e){
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:'red'
    })
  },
   
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

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

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

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

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

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

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