标签：视频 index color 程序 mp4 播放 弹幕
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文件中需要用两个变量分别记录视频播放地址和触发点击事件，我就是在写变量是没有注意大小写，导致我后面一直播放不成功，需要十分注意。
总督来说，这次实验我的收获非常大。
- 中文（简体）
- 中文（繁体）
- 丹麦语
- 乌克兰语
- 乌尔都语
- 亚美尼亚语
- 俄语
- 保加利亚语
- 克罗地亚语
- 冰岛语
- 加泰罗尼亚语
- 匈牙利语
- 卡纳达语
- 印地语
- 印尼语
- 古吉拉特语
- 哈萨克语
- 土耳其语
- 威尔士语
- 孟加拉语
- 尼泊尔语
- 布尔语(南非荷兰语)
- 希伯来语
- 希腊语
- 库尔德语
- 德语
- 意大利语
- 拉脱维亚语
- 挪威语
- 捷克语
- 斯洛伐克语
- 斯洛文尼亚语
- 旁遮普语
- 日语
- 普什图语
- 毛利语
- 法语
- 波兰语
- 波斯语
- 泰卢固语
- 泰米尔语
- 泰语
- 海地克里奥尔语
- 爱沙尼亚语
- 瑞典语
- 立陶宛语
- 缅甸语
- 罗马尼亚语
- 老挝语
- 芬兰语
- 英语
- 荷兰语
- 萨摩亚语
- 葡萄牙语
- 西班牙语
- 越南语
- 阿塞拜疆语
- 阿姆哈拉语
- 阿尔巴尼亚语
- 阿拉伯语
- 韩语
- 马尔加什语
- 马拉地语
- 马拉雅拉姆语
- 马来语
- 马耳他语
- 高棉语
标签：视频,index,color,程序,mp4,播放,弹幕 来源： https://www.cnblogs.com/amonologue/p/16607145.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。