视频播放小程序

最新推荐文章于 2024-09-02 11:12:59 发布

2301_77303935

最新推荐文章于 2024-09-02 11:12:59 发布

阅读量962

点赞数 14

文章标签：音视频小程序 apache

本文链接：https://blog.csdn.net/2301_77303935/article/details/141598412

版权

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

一、实验目标

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

二、实验步骤

1. 项目创建

填写名称、目录、选择AppID，选择不使用云服务，模板选择JS基础模板

2. 页面配置

2.1 创建页面文件

（1）将app.json中pages属性中的“pages/logs/logs"删除

2.2 删除和修改文件

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

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

（3）删除index.wxml和index.wxss中的所有代码

（4）删除index.js中的所有代码，并且输入关键词”page“找到第二个选项按回车键让其自动补全函数

（5）删除app.wxss中的所有代码

（6）删除app.js中的全部代码，并且输入关键词”app“找到第二个选项按回车键让其自动补全函数

列出实验的关键步骤、代码解析、截图。

2.3 创建其它文件

在主文件夹下创建images，再添加play.png

实验所需的播放器图片play.png，图片下载地址

https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip

3.视图设计

3.1 导航栏设计

更改导航栏标题和背景颜色

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "口述校史",
    "navigationBarBackgroundColor": "#987938"
  }
}

3.2 页面设计

区域1：视频播放器

区域2：弹幕发送区域
区域3：视频列表

pages/index/index.wxml

<!-- 区域1：视频播放器 -->
<video id="myVideo" controls></video>

<!-- 区域2：弹幕控制 -->
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容"></input>
  <button>发送弹幕</button>
</view>

<!-- 区域3：视频列表 -->
<view class='videoList'>
  <view class="videoBar">
    <image src="/images/play.png"/>
    <text>这是测试标题</text>
  </view>
</view>

pages/index/index.wxss

/* 区域1：视频播放器 */
/* 视频组件样式 */
video{
  width: 100%;
}

/* 区域2：弹幕控制 */
/* 弹幕区域样式 */
.danmuArea{
  display: flex;
  flex-direction: row;
}

/* 文本输入框形式 */
input{
  border: lrpx solid #987938;
  flex-grow: 1;
  height: 100rpx;
}

/* 按钮样式 */
button{
  color: white;
  background-color: #987938;
}

/* 区域3：视频列表样式 */
/* 视频播放列表区域样式 */
.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;
}

4. 逻辑实现

4.1 更新播放列表

pages/index/index.wxml

<!-- 区域1：视频播放器 -->
<video id="myVideo"src='{{src}}'></video>

<!-- 区域2：弹幕控制(略) -->

<!-- 区域3：视频列表 -->
<view class='videoList'>
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}">
    <image src="/images/play.png"/>
    <text>{{item.title}}</text>
  </view>
</view>

pages/index/index.js

Page({
  /**
   * 页面的初始数据
   */
  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' 
      } 
    ] 
  }
})

4.2 点击播放视频

区域3堆<view class='videoBar'>组件添加data-url属性和bindtap属性，data-url记录播放地址，bindtap用于触发点击事件

pages/index/index.wxml中修改部分

<!-- 区域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"/>
    <text>{{item.title}}</text>
  </view>
</view>

pages/index/index.js中修改部分

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

  // 播放视频
  playVideo:function(e){
    //停止之前播放视频
    this.videoCtx.stop()
    
    //更新视频地址
    this.setData({
      src:e.currentTarget.dataset.url
    })

    //播放新的视频
    this.videoCtx.play()
  }
})

4.3 发送弹幕

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

pages/index/index.js中修改部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    danmuTxt:'',
    list: [...] 
  },

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

//生成随机颜色
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('')
}

5. 项目部分文件完整代码

pages/index/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"/>
    <text>{{item.title}}</text>
  </view>
</view>

pages/index/index.wxss

/* 区域1：视频播放器 */
/* 视频组件样式 */
video{
  width: 100%;
}

/* 区域2：弹幕控制 */
/* 弹幕区域样式 */
.danmuArea{
  display: flex;
  flex-direction: row;
}

/* 文本输入框形式 */
input{
  border: lrpx solid #987938;
  flex-grow: 1;
  height: 100rpx;
}

/* 按钮样式 */
button{
  color: white;
  background-color: #987938;
}

/* 区域3：视频列表样式 */
/* 视频播放列表区域样式 */
.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;
}

pages/index/index.wxml

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

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

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

  // 播放视频
  playVideo:function(e){
    //停止之前播放视频
    this.videoCtx.stop()
    
    //更新视频地址
    this.setData({
      src:e.currentTarget.dataset.url
    })

    //播放新的视频
    this.videoCtx.play()
  }
})

//生成随机颜色
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('')
}

app.json

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

三、程序运行结果

列出程序的最终运行结果及截图。

四、问题总结与体会

问题总结与解决

在实验过程中，我遇到了几个主要问题，但通过不断尝试和探索，最终成功解决了这些问题。

视频加载问题
- 问题：在初次加载视频时，视频无法正常播放，显示加载失败。
- 解决：首先，我检查了视频URL是否正确，发现URL中包含特殊字符，如空格和问号，这些字符在URL中需要被正确编码。我将URL中的空格替换为%20，问号替换为%3F，并在URL末尾添加了必要的查询字符串参数（如?e=.mp4）。修改后，视频可以正常加载和播放。
弹幕颜色显示问题
- 问题：在发送弹幕时，弹幕的颜色有时无法正常显示，或显示的颜色与预期不符。
- 解决：我检查了弹幕颜色生成的代码，发现颜色值生成函数getRandomColor中的border: lrpx solid#987938;中的lrpx应为1rpx，这是一个笔误。更正后，弹幕颜色显示正常。同时，我也检查了getRandomColor函数生成的颜色值是否符合CSS颜色格式（#RRGGBB），确保颜色值格式正确无误。
页面布局调整
- 问题：页面布局在某些设备上显示不够美观，特别是弹幕输入框和视频列表之间的间距问题。
- 解决：通过调整index.wxss文件中的样式，特别是使用flex布局来控制输入框、按钮和视频列表的间距和布局，使页面在不同设备上都能显示得更加美观和协调。

收获与体会

通过这次实验，我收获颇丰：

技能提升：掌握了视频列表的切换方法、视频自动播放方法及视频随机颜色弹幕效果的实现。这些技能对于开发具有视频播放和互动功能的小程序非常有用。
问题解决能力：在实验过程中，我遇到了不少问题，但通过查阅资料、尝试多种方法，最终都成功解决了。这锻炼了我的问题解决能力和耐心。
团队协作：虽然这次实验是个人项目，但我也意识到在软件开发中团队协作的重要性。在未来的学习和工作中，我会更加注重与他人的合作和交流。

总的来说，这次实验让我受益匪浅，不仅提升了我的技能水平，还增强了我的问题解决能力和团队协作能力。我期待在未来的学习和工作中能够继续运用这些知识和技能，取得更多的成果。

2301_77303935

关注

14
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
视频播放小程序

在实验过程中，我遇到了几个主要问题，但通过不断尝试和探索，最终成功解决了这些问题。视频加载问题问题：在初次加载视频时，视频无法正常播放，显示加载失败。解决：首先，我检查了视频URL是否正确，发现URL中包含特殊字符，如空格和问号，这些字符在URL中需要被正确编码。我将URL中的空格替换为%20，问号替换为%3F，并在URL末尾添加了必要的查询字符串参数（如?e=.mp4修改后，视频可以正常加载和播放。弹幕颜色显示问题问题：在发送弹幕时，弹幕的颜色有时无法正常显示，或显示的颜色与预期不符。解决。
复制链接

扫一扫