微信小程序入门:在小程序中播放视频和发送弹幕 | 您所在的位置:网站首页 › 全屏弹幕怎么循环播放视频 › 微信小程序入门:在小程序中播放视频和发送弹幕 |
《移动软件开发》实验3
实验介绍:
**本实验来自于周文洁老师的《微信小程序开发实战》第六章。**主要内容是使用小程序媒体API制作一个视频播放小程序,视频素材来自于某高校档案馆的《口述校史》栏目,它录制了多位耄耋之年的老教工回忆工作时期对大学的印象。 一、实验目标1、掌握视频列表的切换方法; 2、掌握视频自动播放方法; 3、掌握视频随机颜色弹幕效果。 二、实验步骤 1.项目创建及准备 1.1创建项目按之前的步骤,创建新的项目 1.2删除无关文件和路径创建一个images文件夹,用于存放实验会用到的图片素材 本次实验会使用到的四个视频地址: 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' } ] 2.视图设计 2.1导航栏设计在app.json里进行导航栏的设计 按此页面设计图,对index.wxml进行页面设计,本次实验会使用到组件; 使用video组件,controls属性提供对视频的播放、暂停、音量等组件 在wxss中设置对video的属性,因为此页面仅有一个video组件,所以不需要额外设计样式类,直接对video设计; 使用view组件实现一个单行的文本框,用于弹幕的输入和发送; 使用了样式danmuArea,所以要在wxss中进行定义; 使用view组件实现一个可扩展的多行区域,每行包含一个播放图标和一个视频标题文本,后续使用wx:for循环添加内容; wxss中具体设计: 对播放列表的组件增加wx:for属性,用于渲染展示列表; 此处的list是循环的内容,将1.3中准备的list放在index.js的data中; 为组件增加src属性; 对于之前的视频列表,需要为其增加data-url属性和bintap属性,分别用来记录视频的地址和绑定发送弹幕的函数。 先在js文件的onLoad函数中创建视频上下文,用于控制视频的播放和停止。 其中 wx.createVideoContext :创建并返回 video 上下文 videoContext 对象。 videoCtx应该就为该页面的一个对象,myVedio是wxml中组件使用的id,这样进行了绑定; 有如下操作: videoCtx.play() 播放视频 videoCtx.pause() 暂停视频 videoCtx.stop() 停止视频 videoCtx.seek(number position)跳转到指定位置 videoCtx.sendDanmu(Object data)发送弹幕 videoCtx.playbackRate(number rate)设置倍速播放 videoCtx.requestFullScreen(Object object)进入全屏 videoCtx.exitFullScreen()退出全屏 在index.js中自定义playVideo函数 视频的播放: 对组件添加enable-danmu 和danmu-btn属性,用于允许发送弹幕和显示“发送弹幕”按钮。 为文本输入框朱家bindinput属性,用于获取弹幕文本内容; 为按钮增加bindtap属性,用于触发点击事件; 在js的data中加入变量danmuTxt: ‘’ 用于记录得到的弹幕文本 编写两个函数 此时小程序里可以发送红色的弹幕: 可以为弹幕的颜色进行随机,编写一个函数产生随机颜色: 注意:此函数写在js文件的page外部 再修改发送弹幕的函数即可; 可以正常的播放和发送、显示彩色弹幕; 可以切换视频,进行播放 描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。 1.在3.1步时使用wx:for循环会出现该warning 在网络上查找原因后,发现官方更新了写法,改为wx:key='index’即可 2.在3.2步,进行视频播放和切换时,出现[渲染层错误]的报错, 按网上的解决方法将调试基础库的版本调高,出现了更多的错误。。 在多次切换的情况下,会有更多的报错,可能是视频的加载具有延迟,不能瞬间响应;
PS:本次博客对图片大小进行了调整,排版上更加美观了! |
CopyRight 2018-2019 实验室设备网 版权所有 |