视频播放小程序

Threely

已于 2023-08-29 19:44:52 修改

阅读量221

点赞数

文章标签：微信小程序

于 2023-08-29 19:38:41 首次发布

本文链接：https://blog.csdn.net/m0_62093991/article/details/132568679

版权

2023年夏季《移动软件开发》实验报告

一、实验目标

1、掌握视频API的操作方法；2、掌握如何发送随机颜色的弹幕。

二、实验步骤

1.首先创建一个小程序项目，

2.删除掉不必要的系统默认文件和函数

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

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

4.在pages/index/index.wxml文件里定义三个区域：第一个区域为视频播放器，我们通过video组件实现；第二个区域为弹幕区域，包括了弹幕输入框和发送按钮，使用input组件和button组件实现；第三个区域为视频播放列表，每行由一个image组件和text组件组成，image组件用来显示播放图标，text组件用来显示视频标题。再在pages/index/index.wxss文件中完善各区域、组件的尺寸和颜色等属性
在这里插入图片描述

5.逻辑实现：在pages/index/index.js文件中data属性中追加list数组，用来存放视频的id、title和网址；并在ages/index/index.js文件中相应位置完善相关设计，实现点击播放事件；再自定义playVideo函数控制视频的播放和停止

6.弹幕实现：在区域1对组件添加enable-danmu和danmu-btn属性，用来允许发送弹幕和显示“发送弹幕”按钮，再为弹幕文本输入框添加bindinput属性用来获取弹幕文本内容和为按钮追加bindtap属性用来出发点击事件，再在pages/index/index.js文件中添加getRandomColor函数用来随机生成颜色，即可实现彩色弹幕

7.各文件代码如下：

pages/index/index.js文件

// 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('')
}
// 获取应用实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    danmuText:"",
    list:[
    {id:"299371",
    title:'杨国宜先生口述校史实录',
    videoUrl:'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
},
{
    id:"299396",
    title:'唐成伦先生口述校史实录',
    videoUrl:'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
},
{
    id:"299378",
    title:'倪光明先生口述校史实录',
    videoUrl:'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
},
{
    id:"299392",
    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: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')
  },

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

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

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

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

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

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

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

pages/index/index.wxml文件

<!--index.wxml-->
<!--视频播放器-->
<video id='myVideo'controls 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>

pages/index/index.wxss

/**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;
}