微信小程序开发之——婚礼邀请函-美好时光页面(4.5)

一概述

"美好时光"页面任务说明
video组件和腾讯视频插件介绍
"美好时光"页面功能开发
"美好时光"页面效果图

二 “美好时光”页面任务说明

该页面采用视频的方式展示新人的难忘时光
视频的播放有两种方式：
- video组件
- 腾讯视频插件

三 video组件和腾讯视频插件介绍

3.1 video组件

组件介绍

video组件常用于视频播放
默认宽度为300px，高度为225px
通过wxss可重新设置宽度和高度

常用属性

属性	类型	说明
src	String	视频的资源地址
loop	Boolean	是否循环播放，默认为false
controls	Boolean	是否显示默认播放控件(播放/暂停按钮、播放进度、时间)，默认为true
danmu-list	Object	弹幕列表
danmu-btn	Boolean	是否显示弹幕显示/隐藏按钮，只有在初始化时有效，不能动态变更，默认为false
enable-danmu	Boolean	是否展示弹幕，只有初始化时有效，不能动态变更，默认为false
autoplay	Boolean	是否自动播放，默认为false
poster	String	视频封面的图片资源地址，如果controls属性为false则设置poster无效
bindplay	EventHandle	当开始/继续播放时触发play事件
bindpause	EventHandle	当暂停播放时触发pause事件

实例

布局文件

<video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls>
</video>
<input  bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu"></button>
<button bindtap="bindButtonTap">获取视频</button>

样式文件

video{width:100vw}
input{border:1px solid #ccc;margin: 20rpx;}

逻辑文件

data: {src:'http://7xjmzj.com1.z0.glb.clouddn.com/20171026175005_JObCxCE2.mp4',danmuList:[{text:'第1s出现的弹幕',color:'#ff0000',time:1},{text:'第3s出现的弹幕',color:'#ff00ff',time:3}],},videoContext:null,inputValue:'',onReady: function () {this.videoContext=wx.createVideoContext('myVideo')},bindInputBlur:function(e){this.inputValue=e.detail.value},bindSendDanmu:function(){this.videoContext.sendDanmu({text:this.inputValue,color:'#f90'})},bindButtonTap:function(){wx.chooseVideo({sourceType:['album','camera'],//视频选择的来源，相册和相机maxDuration:60, //拍摄视频最长拍摄时间(s)camera:'back', //默认拉起的是前置(front)或者后置(back)success:res=>{ //成功时执行的回调函数this.setData({src:res.tempFilePath  //选定视频的临时文件路径})}})}

VideoContext对象常用方法

名称	说明
paly()	播放视频
pause()	暂停播放
stop()	停止视频
seek(number)	跳转到指定的位置
playbackRate(number)	设置倍速播放
requestFullScreen()	进入全屏
exitFullScreen()	退出全屏

3.2 腾讯视频插件

如何添加腾讯视频插件

登录小程序管理后台后，依次点击：设置—>第三方服务—>插件管理—>搜索"腾讯视频"，进行安装

如何配置腾讯视频插件

按照腾讯视频插件说明文档分配配置json文件

video.json

"usingComponents": {"txv-video": "plugin://tencentvideo/video"
}

app.json

"plugins": {"tencentvideo": {"version": "1.3.18","provider": "wxa75efa648b60994b"}}

腾讯视频的使用(pages/video/video.wxml)

<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>

四 “美好时光”页面功能开发

4.1 界面布局(pages/video/video.wxml)

<view class="video-list" wx:for="{{movieList}}" wx:key="user"><view class="video-title">标题：{{item.title}}</view><view class="video-time">时间：{{formatData(item.create_time)}}</view><video src="{{item.src}}" object-fit="fill"></video>
</view>
<wxs module="formatData">module.exports=function(timestamp){var date=getDate(timestamp)var y=date.getFullYear()var m=date.getMonth()+1var d=date.getDate()var h=date.getHours()var i=date.getMinutes()var s=date.getSeconds()return y+'-'+m+'-'+d+'-'+h+':'+i+':'+s}
</wxs>

4.2 样式文件(pages/video/video.wxss)

.video-list{box-shadow:0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);margin: 10rpx 25rpx;padding: 20rpx;border-radius: 10rpx;margin-bottom: 30rpx;background: #fff;
}
.video-title{font-size: 35rpx;color: #333;
}
.video-time{font-size: 13px;color: #979797;}
.video-list video{width: 100%;margin-top: 20rpx;}

4.3 功能逻辑文件(pages/video/video.js)

Page({/*** 页面的初始数据*/data: {src:'http://7xjmzj.com1.z0.glb.clouddn.com/20171026175005_JObCxCE2.mp4',danmuList:[{text:'第1s出现的弹幕',color:'#ff0000',time:1},{text:'第3s出现的弹幕',color:'#ff00ff',time:3}],movieList:[{create_time:1532519734589,//create_time:'2018-7-25 19:55:54',title:'海边随拍',src:'http://9890.vod.myqcloud.com/9890_4e292f9a3dd011e6b4078980237cc3d3.f20.mp4'},{create_time:1532519777690,//create_time:'2018-7-25 19:56:17',title:'勿忘心安',src:'http://7xjmzj.com1.z0.glb.clouddn.com/20171026175005_JObCxCE2.mp4'},{create_time:1532519794991,//create_time:'2018-7-25 19:56:34',title:'点滴记忆',src:'http://7xjmzj.com1.z0.glb.clouddn.com/20171026175005_JObCxCE2.mp4'}]},videoContext:null,inputValue:'',/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {//this.videoContext=wx.createVideoContext('myVideo')//const TxvContext= requirePlugin('tencentvideo')//var txvContext=TxvContext.getTxvContext('txv1')//txvContext.play() //播放//txvContext.pause() //暂停},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},bindInputBlur:function(e){this.inputValue=e.detail.value},bindSendDanmu:function(){this.videoContext.sendDanmu({text:this.inputValue,color:'#f90'})},bindButtonTap:function(){wx.chooseVideo({sourceType:['album','camera'],//视频选择的来源，相册和相机maxDuration:60, //拍摄视频最长拍摄时间(s)camera:'back', //默认拉起的是前置(front)或者后置(back)success:res=>{ //成功时执行的回调函数this.setData({src:res.tempFilePath  //选定视频的临时文件路径})}})}
})

五 “美好时光”页面效果图

微信小程序开发之——婚礼邀请函-美好时光页面(4.5)相关推荐

微信小程序开发之——婚礼邀请函-项目初始化(4.2)
一概述 tabBar组件介绍项目初始化项目目录结构说明二 tabBar组件介绍 2.1 常用属性表属性说明 color 未选择时,底部导航文字的颜色 selectedColor 选中时,底 ...
微信小程序开发之——婚礼邀请函-项目展示(4.1)
一概述项目页面组成项目中使用到的API及组件二项目页面组成 2.1 项目整体预览 2.2 项目页面组成本项目共有5个页面组成,分别是邀请函.照片.美好时光.婚礼地点.宾客信息邀请函邀请 ...
微信小程序开发之——婚礼邀请函-邀请函页面(4.3)
一概述 "邀请函"页面说明婚礼邀请函功能开发效果图二 "邀请函"页面说明右上角有一个背景音乐播放按钮,用于控制音乐播放状态,单击按钮播放音乐,再次点击 ...
微信小程序开发之——婚礼邀请函-照片页面(4.4)
一概述 "照片"页面任务说明 "照片"页面功能开发效果图二 "照片"页面任务说明每一张轮播的图片都占满显示区域,滑动屏幕可以实现图片 ...
微信小程序开发之——婚礼邀请函-邀请函页面(4，腾讯android面试题目
李四新娘我们诚邀您来参加我们的婚礼事件:2020年12月30日地点:北京市海淀区XX路XX酒店 3.2 样式文件(pages/index/index.wxss) /*播放器 */ .playe ...
微信小程序开发之——婚礼邀请函-邀请函页面(4，android应用案例开发大全第2版
} @keyframes musicRotate{ from{transform:rotate(0deg);} to{transform: rotate(360deg);} } /* 播放暂停 */ ...
视频教程-微信小程序开发教程（第一阶段、页面设计）（维吾尔语）-HTML5/CSS
微信小程序开发教程(第一阶段.页面设计)(维吾尔语) 毕业于北京邮电大学计算机专业.拥有将近10年的开发经验.精通java.php.python.c/c++.微信开发等等技术! 艾孜麦提阿布都热合曼 ...
微信小程序开发：按Pages编译显示页面
最近刚开始接触微信小程序开发,在慢慢学习,开始点击编译总是进入一个界面运行所以比较苦恼,于是找到以下解决方案. 解决方案一:选择"普通编译模式",会进入app.json文件下pag ...
微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html] vie ...

微信小程序开发之——婚礼邀请函-美好时光页面(4.5)

一概述

二 “美好时光”页面任务说明

三 video组件和腾讯视频插件介绍

3.1 video组件

组件介绍

常用属性

实例

布局文件

样式文件

逻辑文件

VideoContext对象常用方法

3.2 腾讯视频插件

如何添加腾讯视频插件

如何配置腾讯视频插件

video.json

app.json

腾讯视频的使用(pages/video/video.wxml)

四 “美好时光”页面功能开发

4.1 界面布局(pages/video/video.wxml)

4.2 样式文件(pages/video/video.wxss)

4.3 功能逻辑文件(pages/video/video.js)

五 “美好时光”页面效果图

微信小程序开发之——婚礼邀请函-美好时光页面(4.5)相关推荐

最新文章

热门文章

微信小程序开发之——婚礼邀请函-美好时光页面(4.5)

一 概述

二 “美好时光”页面任务说明

三 video组件和腾讯视频插件介绍

3.1 video组件

组件介绍

常用属性

实例

布局文件

样式文件

逻辑文件

VideoContext对象常用方法

3.2 腾讯视频插件

如何添加腾讯视频插件

如何配置腾讯视频插件

video.json

app.json

腾讯视频的使用(pages/video/video.wxml)

四 “美好时光”页面功能开发

4.1 界面布局(pages/video/video.wxml)

4.2 样式文件(pages/video/video.wxss)

4.3 功能逻辑文件(pages/video/video.js)

五 “美好时光”页面效果图

微信小程序开发之——婚礼邀请函-美好时光页面(4.5)相关推荐

最新文章

热门文章

一概述