婚礼邀请函小程序使用腾讯视频插件

1.项目展示
2.腾讯视频插件
3.上代码
- 首页
- 照片墙页面
- 美好时光页面
- 婚礼地点页面
结语

1.项目展示

2.腾讯视频插件

小程序中提供了腾讯视频插件来播放视频，其特点是，用户可以将视频上传到腾讯视频网站，不需要自己搭建视频服务器。要使用该插件，首先需要打开“小程序管理后台”，在“设置”-“第三方服务中”添加插件

获取插件的AppID

然后在app.json中配置本项目使用的插件

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

然后就可以在需要的页面使用了，例如
在vedio.json中

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

找到要插入的腾讯视频地址
例如：https://v.qq.com/x/cover/mzc00200vcrun1q/e3235oumhsr.html
vedio.wxml文件中，vid表示视频的id，及上方地址中的加粗部分，playerid属性用于在js文件中根据id创建上下文对象

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

js文件

onReady:function(){const TxvContext = requirePlugin("tencentVideo");let txvContext = TxvContext.getTxvContext('txv1');txvContext.play(); //播放txvContext.pause();}

然后就可以啦，运行程序

当然也可以直接使用video组件，还可以发送弹幕，设置倍速播放等，从本地上传视频等。

3.上代码

首页

<!--index.wxml-->
<view class="player player-{{isPlayingMusic?'play':'pause'}}" bindtap="play"><image src="/images/music_icon.png"></image><image src="/images/music_play.png"></image>
</view>
<!--背景图片-->
<image class="bg" src="/images/bg_1.jpg"></image>
<!--内容区域-->
<view class="content"><!--顶部GIF图片--><image class="content-gif" src="/images/0.jpg"></image><!--标题--><view class="content-title">邀请函</view><!--新郎与新娘的合照--><view class="content-avatar"><image src="/images/avatar.jpg"></image></view><!--新郎与新娘的名字--><view class="content-info"><view class="content-name" bindtap="callGroom"><image src="/images/tel.png"></image><view>王辉辉</view><view>新郎</view></view><view class="content-name" bindtap="callBride"><image src="/images/tel.png"></image><view>张琳琳</view><view>新娘</view></view></view><!--婚礼信息--><view class="content-address"><view>我们诚邀您来参加我们的婚礼</view><view>时间：2027年1月29日</view><view>地点：北京市豪华酒店</view></view>
</view>

//index.js
//获取应用实例
const app = getApp()Page({data: {isPlayingMusic: false},bgm:null,music_url:'https://webfs.yun.kugou.com/202103250932/7ac624b881467794da0fc0541da44028/part/0/960131/KGTX/CLTX001/8c044816632d7b54feb7fb0ab7f6224d.mp3',music_coverImgUrl:'/images/2 (1).png',onReady:function(){this.bgm=wx.getBackgroundAudioManager()this.bgm.title='marry me'this.bgm.epname='wedding'this.bgm.singer='singer'this.bgm.coverImgUrl=this.music_coverImgUrlthis.bgm.onCanplay(()=>{this.bgm.pause()})this.bgm.src=this.music_url},play:function(e){if(this.data.isPlayingMusic){this.bgm.pause()}else{this.bgm.play()}this.setData({isPlayingMusic:!this.data.isPlayingMusic})},callGroom:function(){wx.makePhoneCall({phoneNumber: '13627434678',})},callBride:function(){wx.makePhoneCall({phoneNumber: '13627909678',})}
})

/**index.wxss**/
.player {position: fixed;top: 20rpx;right: 20rpx;z-index: 1;
}.player>image:first-child {width: 80rpx;height: 80rpx;animation: musicRotate 3s linear infinite;
}@keyframes musicROtate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}.player>image:last-child {width: 28rpx;height: 80rpx;margin-left: -5px;
}.player-play>image:first-child {animation-play-state: running;
}.player-play>image:last-child {animation: musicStart 0.2s linear forwards;
}.player-play>image:first-child {animation-play-state: paused;
}.player-play>image:last-child {animation: musicStop 0.2s linear forwards;
}@keyframes musicStop {from {transform: rotate(20deg);}to {transform: rotate(0deg);}
}.bg {width: 100vw;height: 100vh;
}.content {width: 100vw;height: 100vh;position: fixed;display: 19vh;flex-direction: column;align-items: center;
}.content-gif {width: 19vh;height: 18.6vh;margin-bottom: 1.5vh;
}.content-title {font-size: 5vh;color: #ff4c91;text-align: center;margin-bottom: 1.5vh;
}/**将文字居中**/
.content-address {text-align: center;
}.content-avatar image {width: 40vh;height: 40vh;border: 3px solid #ff4c91;border-radius: 50%;
}/**将图片居中**/
.content-avatar {display: flex;justify-content: center;/**水平居中**/align-items: center;/**垂直居中**/
}.content-info {width: 100%;margin-top: 4vh;display: flex;flex-direction: row;justify-content: space-around;
}.content-wedding {flex: 1;
}.content-wedding>image {width: 5.5vh;height: 5.5vh;margin-left: 20rpx;
}.content-name {color: #ff4c91;font-size: 2.7vh;line-height: 4.5vh;font-weight: bold;position: relative;text-align: center;
}.content-name>image {width: 2.6vh;height: 2.6vh;border: 1px solid #ff4c91;border-radius: 50%;position: absolute;top: -1vh;right: -3.6vh;text-align: center;
}

照片墙页面

<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular><swiper-item wx:for="{{imgUrls}}" wx:key="*this"><image src="{{item}}" mode="aspectFill" /></swiper-item>
</swiper>

Page({data: {imgUrls: ['/images/timg1.jpg','/images/timg2.png','/images/timg3.jpg','/images/timg4.jpg']}
})

swiper {height: 100vh;
}
image {width: 100vw;height: 100vh;
}

美好时光页面

<!--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}}" objectFit="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><txv-video vid="e3235oumhsr" playerid="txv1"></txv-video>

Page({data: {movieList: [{create_time: 1532519754589,title: '海边随拍',src: 'https://media.w3.org/2010/05/sintel/trailer.mp4'}, {create_time: 1532519777690,title: '勿忘心安',src: 'https://media.w3.org/2010/05/sintel/trailer.mp4'}, {create_time: 1532519734589,title: '点滴记忆',src: 'https://media.w3.org/2010/05/sintel/trailer.mp4'}]},onReady:function(){const TxvContext = requirePlugin("tencentVideo");let txvContext = TxvContext.getTxvContext('txv1');txvContext.play(); //播放txvContext.pause();}
})

/* 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;
}

{"navigationBarTitleText": "美好时光","usingComponents": {"txv-video": "plugin://tencentVideo/video"}
}

婚礼地点页面

<!--pages/map/map.wxml-->
<map latitude="{{latitude}}" longitude="{{longitude}}" scale="18" markers="{{markers}}" bindmarkertap="markertap"></map>
<!-- <button bindtap="buttonTap">查看我的位置</button> -->

// pages/map/map.js
Page({/*** 页面的初始数据*/data: {// 经纬度latitude: 40.06021,longitude: 116.3433,markers: [{iconPath: '/images/navi.png',id: 0,latitude: 40.06021,longitude: 116.3433,width: 50,height: 50}]},buttonTap: function () {wx.getLocation({type: 'gcj02',success: function (res) {wx.openLocation({latitude: res.latitude,longitude: res.longitude,})}})},markertap: function () {wx.openLocation({latitude: this.data.latitude,longitude: this.data.longitude,name: 'xx大酒店',address: '北京市 海淀区 xx路'})}
})

/* pages/map/map.wxss */
map{width: 100vw;height: 100vh;
}

结语

有什么问题可以加我Q哦：1253540040

婚礼邀请函小程序使用腾讯视频插件相关推荐

微信小程序使用腾讯视频插件-uniapp-详细篇（2022.1.27）
微信小程序使用腾讯视频插件-uniapp篇(无需资质审核包过) 1.添加插件:微信小程序平台-设置-第三方设置-添加插件-搜索:腾讯视频 2.在uniapp-manifest.json中-源码视图,添 ...
微信小程序接入腾讯视频插件
前提条件:小程序需要申请成功腾讯视频插件官方文档 https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b 1.ap ...
微信小程序引入腾讯视频插件
首先在微信公众平台引入插件在设置--第三方设置里面申请使用插件 appid:wxa75efa648b60994b 根据文档写代码文档地址:https://mp.weixin.qq.com/wxo ...
php 小程序播放腾讯视频 video标签无法播放腾讯视频问题
解决小程序播放腾讯视频问题.同适用于微擎.... 需要引用一些腾讯视频网站上的视频去播放,很多地方都是教人用F12抓一个mp4地址,这根本不行,因为那个地址是动态的, 翻了微信小程序的官方社区这方面的 ...
小程序php调用腾讯视频,如何用微信小程序来看腾讯视频？观看视频的办法
软件安装:腾讯视频腾讯视频于2016年底提出了全新的品牌理念--"不负好时光",以更加年轻化.更能引起用户情感共鸣的定位全新亮相,并展现了全新品牌标识.秉承"内容为王, ...
婚礼邀请函小程序项目
文章目录一.学习目标 1.掌握小程序常用组件的使用 2.掌握腾讯视频插件的使用 3.掌握背景音乐API.地图API的使用 4.掌握订阅消息的发送二.开发前准备 1.项目展示三.代码实现 1 项目 ...
Vue/微信小程序 -- 引入腾讯视频
做项目时有个需求,就是播放腾讯视频,直接给的播放链接,比如:https://v.qq.com/x/page/b0136et5ztz.html (该链接是网上找的).最初的做法,就是用vue开发h5页面 ...
微信小程序嵌入腾讯视频源
今天写小程序时候遇到个坑,就是使用vedio组件时候,一开始没想好,本以为腾讯视频会有类似于优酷之类的提供分享外链功能,结果进去一看,只能复制视频网址,本来想着要么F12获取地址吧,麻烦点就麻烦点,但 ...
微信小程序引用腾讯视频
文章转自 https://www.jiezhe.net/post/38.html tips:腾讯视频上传需要认证,上传身份证图片时如果报错,就换个QQ号,我一个QQ号能上传,另一个QQ号就不行,应该是 ...

婚礼邀请函小程序使用腾讯视频插件

婚礼邀请函小程序使用腾讯视频插件

1.项目展示

2.腾讯视频插件

3.上代码

首页

照片墙页面

美好时光页面

婚礼地点页面

结语

婚礼邀请函小程序使用腾讯视频插件相关推荐

最新文章

热门文章

婚礼邀请函小程序 使用腾讯视频插件

婚礼邀请函小程序 使用腾讯视频插件

1.项目展示

2.腾讯视频插件

3.上代码

首页

照片墙页面

美好时光页面

婚礼地点页面

结语

婚礼邀请函小程序 使用腾讯视频插件相关推荐

最新文章

热门文章

婚礼邀请函小程序使用腾讯视频插件

婚礼邀请函小程序使用腾讯视频插件

婚礼邀请函小程序使用腾讯视频插件相关推荐