编程语言
首页 > 编程语言> > 实验3:视频播放小程序

实验3:视频播放小程序

作者:互联网

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

姓名和学号? 
本实验属于哪门课程? 中国海洋大学22夏《移动软件开发》
实验名称? 实验3:视频播放小程序
博客地址? https://www.cnblogs.com/amonologue/p/16607145.html
Github仓库地址? https://github.com/Acolasiasss/EX3

(备注:将实验报告发布在博客、代码公开至 github 是 加分项,不是必须做的)

一、实验目标

1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。
1.视图设计:
根据步骤,首先自定义导航栏标题和颜色,然后进行页面设计。
相关代码如下:
app.json

 1 {
 2     "pages": [
 3         "pages/index/index"
 4     ],
 5     "window": {
 6         "backgroundTextStyle": "light",
 7         "navigationBarBackgroundColor": "#987938",
 8         "navigationBarTitleText": "口述校史",
 9         "navigationBarTextStyle": "white"
10     },
11     "style": "v2",
12     "sitemapLocation": "sitemap.json"
13 }

其中,页面上包含3个区域,分别为:
1)区域1:视频播放器,用于播放指定的视频;
使用<video>组件来实现一个视频播放器
2)区域2:弹幕发送区域,包含文本输入框和发送按钮;
使用<view>组件实现一个单行区域,包括文本输入框和发送按钮
3)区域3:视频列表,垂直排列多个视频标题,点击不同的标题播放对应的视频内容
使用<view>组件实现一个可扩展的多行区域,每行包含一个播放图标和一个视频标题文本。当前先设计第一行效果,后续使用wx:for属性循环添加全部内容
页面设计相关代码如下:
index.wxml

 1 <!--index.wxml-->
 2 <view class="container">
 3   <!--区域1:视频播放器-->
 4   <video id = 'myVideo' controls ></video>
 5 
 6   <!--区域2:弹幕控制-->
 7   <view class = 'danmuArea'>
 8     <input type = 'text' placeholder = '    请输入弹幕内容'></input>
 9     <button>发送弹幕</button >
10   </view >
11 
12   <!--区域3:视频列表-->
13   <view class = 'videoList'>
14     <view class = 'videoBar'>
15       <image src = '/images/play.png'></image>
16       <text>这是一个测试标题</text>
17     </view >
18   </view >
19 </view>

index.wxss

 1 /**index.wxss**/
 2 
 3 video {
 4   width: 100%;        /*视频组件宽度为100%*/
 5   }
 6   
 7 /*区域2:弹幕控制样式*//* 2-1弹幕区域样式*/
 8 .danmuArea {
 9   display: flex;        /*flex模型布局*/
10   flex-direction: row;  /*水平方向排列*/
11 }
12 /*2-2文本输入框样式*/
13 input {
14   border: 1rpx solid #987938; /*1rpx 宽的实线棕色边框*/
15   flex-grow: l;                 /*扩张多余空间宽度*/
16   height: 100rpx;               /*高度*/
17 }
18 /*2-3按钮样式*/
19 button {
20   color: white;               /*字体颜色*/
21   background-color :#f3a109;  /*背景颜色*/
22 }
23     
24 /*区域3:视频列表样式*/  
25 /*3-1视颊列表区域样式*/
26 .vidcoList {
27   width: 100%;              /*宽度*/
28   min-height: 400rpx;       /*最小高度*/
29   }
30 /*3一2单行列表区域样式*/
31 .videoBar {
32   width: 100%;               /*宽度*/
33   display: flex;            /*flex模型布局*/
34   flex-direction: row;      /*水平方向布局*/
35   border-bottom: 1rpx solid #987938;/*1rpx宽的实线棕色边框*/
36   margin: 10rpx;            /*外边距*/
37 }
38 /* 3一3播放图标样式*/
39 image {
40   width: 70rpx;         /*宽度*/
41   height: 70rpx;        /*高度*/
42   margin: 20rpx;        /*外边距*/
43 }
44 
45 /*3一4文本标题样式*/
46 text {
47   font-size: 45rpx;     /*字体大小*/
48   color: #987938;      /*字体颜色为棕色*/
49   margin: 20rpx;        /*外边距*/
50   flex-grow: 1;         /*扩张多余空间宽度*/
51 }

页面设计效果如下:

 

 

2.逻辑实现
首先在区域3对<view class = 'videoBar'>组件添加wx : lor属性,改写为循环展示列表,然后在区域3对<view class = 'videoBar '>组件添加data-url属性和 bindtap属性。其中 data-url 用于记录每行视频对应的播放地址, bindtap用于触发点击事件。最后在区域1对< video >组件添加enable-danmu 和 danmu-btn属性,用于允许发送弹幕和显示“发送弹幕”按钮,以及对颜色进行设置。
逻辑实现相关代码如下:
index.wxml

 1 <!--index.wxml-->
 2 <view class="container">
 3   <!--区域1:视频播放器-->
 4   <video id = 'myVideo' controls enable-danmu danmu-btn></video>
 5 
 6   <!--区域2:弹幕控制-->
 7   <view class = 'danmuArea'>
 8     <input type = 'text' placeholder = '    请输入弹幕内容' bindinput = 'getDanmu'></input>
 9     <button bindtap = 'sendDanmu'>发送弹幕</button >
10   </view >
11 
12   <!--区域3:视频列表-->
13   <view class="vidcoList">
14     <view class = "videoBar" wx:for = '{{list}}' wx:key = 'video{{index}}' data-url = '{{item.videoUrl}}' bindtap="playVideo">
15       <image src="/images/play.png"></image>
16       <text>{{item.title}}</text>
17     </view>
18   </view>
19 </view>

index.js

 1 // index.js
 2 //生成随机颜色
 3 function getRandomColor() {
 4   let rgb = []
 5   for (let i = 0; i < 3; ++i){
 6     let color = Math.floor (Math.random() * 256).toString(16)
 7     color = color.length == 1 ? '0' + color:color
 8     rgb.push(color)
 9   }
10   return '#' + rgb.join('')
11 }
12 
13 Page({
14   /**
15   *页面的初始数据
16   */
17   data: {
18     danmuTxt: '',
19     list: [
20       {
21         id: '1001',
22         title: '杨国宜先生口述校史实录',
23         videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
24       },
25       {
26         id: '1002',
27         title: '唐成伦先生口述校史实录',
28         videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
29       },
30       {
31         id: '1003',
32         title: '倪光明先生口述校史实录',
33         videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
34       },
35       {
36         id: '1004',
37         title: '吴仪兴先生口述校史实录',
38         videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
39       },
40     ]
41   },
42 
43   /**
44   *更新弹幕内容
45   */
46   getDanmu: function(e) {
47     this.setData({
48       danmuTxt: e.detail.value
49     })
50   },
51   /**
52   *发送弹幕
53   */
54   sendDannu: function(e) {
55     let text = this.data.danmuTxt;
56     this.videoCtx.sendDanmu({
57       text: text,
58       color: getRandomColor()
59     })
60   },
61 
62   /**
63   *生命周期函数――监听页面加载
64   */
65   onl oad: function(options) {
66     this.videoCtx = wx.createVideoContext( 'myVideo')
67   },
68 
69   /**
70   *播放视频
71   */
72   playVideo: function(e) {
73     //停止之前正在播放的视颊
74     this.videoCtx.stop()
75     //更新视频地址
76     this.setData({
77         src: e.currentTarget.dataset.url
78     })
79     //播放新的视频
80     this.videoCtx.play()
81   },
82 })

最后效果图如下

 

 

三、程序运行结果

列出程序的最终运行结果及截图。
在手机上进行预览:
1)可正常切换播放视频

 

 

 

 

2)也可正常发送弹幕

四、问题总结与体会

描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。

本次实验只要跟着教程走,难度不是很大,只是有些比较细微的地方需要注意。
我在做此次实验的过程中就在一些不容易被察觉的地方犯了错误:列如在设置“点击拨放视频”功能是,wxml文件中需要用两个变量分别记录视频播放地址和触发点击事件,我就是在写变量是没有注意大小写,导致我后面一直播放不成功,需要十分注意。
总督来说,这次实验我的收获非常大。

TRANSLATE with x English
Arabic Hebrew Polish
Bulgarian Hindi Portuguese
Catalan Hmong Daw Romanian
Chinese Simplified Hungarian Russian
Chinese Traditional Indonesian Slovak
Czech Italian Slovenian
Danish Japanese Spanish
Dutch Klingon Swedish
English Korean Thai
Estonian Latvian Turkish
Finnish Lithuanian Ukrainian
French Malay Urdu
German Maltese Vietnamese
Greek Norwegian Welsh
Haitian Creole Persian  
  TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back     此页面的语言为中文(简体)   翻译为          

标签:视频,index,color,程序,mp4,播放,弹幕
来源: https://www.cnblogs.com/amonologue/p/16607145.html