24夏季移动软件开发-实验四

reallywind

于 2024-08-27 16:31:51 发布

阅读量306

点赞数 7

文章标签：小程序

本文链接：https://blog.csdn.net/reallywind/article/details/141606295

版权

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


本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验4：媒体API之口述校史

一、实验目标

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

二、实验步骤

新建项目

简单使用微信开发工具创建一个新的项目,清除文件中不必要的内容.(详细见实验一)

视图设计

最终实现的效果有三个部分,在图中红框标注出.
在这里插入图片描述

一共有三个区域

视频
弹幕输入
视频列表
首先是在index.wxml中

<!--index.wxml-->
//视频
<video id="myVideo"src="{{src}}"controls enable-danmu danmu-btn>
</video>
//弹幕输入区域
<view class="danmuInput">
  <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>

videoBar是一条视频的区域,使用wx:for来展示多条视频的信息.
在index.wxss中指定各个组件的布局

/**index.wxss**/
video{
  width: 100%;
}

.danmuInput{
  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;
}

小程序要用到的视频的数据使用list储存(index.js data中)

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

    ]

逻辑实现

点击播放视频
通过点击视频列表的条目直接播放视频的功能

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

要给video组件指定一个id 然后给src(video 的属性)赋值为src(自己定义的变量在index.js 的data中)

在videoBar中要有bindtap属性并指定自定义函数playVideo,指定一个data-url赋值为视频地址.
在onload函数中创建一个video组件的上下文用于控制video组件的播放和停止.playVideo的具体实现如下.


  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo');
  },
  
  playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play()
  },

发送弹幕
是一个简单且粗糙的弹幕实现
在弹幕输入的input组件bindinput指定自定义函数getDanmu,在button组件中bindtap指定自定义函数sendDanmu
在index.js中实现两个函数的逻辑

getDanmu:function(e){
    console.log('get')
    this.setData({
      danmuTxt:e.detail.value
    })
  },

  sendDanmu:function(e){
    console.log(getRandomcolor())
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:'red'
    })
  },

想要实现弹幕的随机颜色可以在index.js 的Page外定义一个随机颜色的函数,在指定颜色的地方调用这个函数

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

}