扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这次说下,小程序的视频组件,之前在说小程序基础的时候视频组件没说,现在说下。从属性和api都说下。https://github.com/limingios/wxProgram.git 中No.15
目前成都创新互联已为近1000家的企业提供了网站建设、域名、雅安服务器托管、网站运营、企业网站设计、瑞丽网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
官网介绍
>https://developers.weixin.qq.com/miniprogram/dev/component/video.html
demo
function getRandomColor() { let rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } Page({ onReady: function (res) { this.videoContext = wx.createVideoContext('myVideo') }, inputValue: '', data: { src: '', danmuList: [ { text: '第 1s 出现的弹幕', color: '#ff0000', time: 1 }, { text: '第 3s 出现的弹幕', color: '#ff00ff', time: 3 }] }, bindInputBlur: function (e) { this.inputValue = e.detail.value }, bindButtonTap: function () { var that = this wx.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, camera: ['front', 'back'], success: function (res) { that.setData({ src: res.tempFilePath }) } }) }, bindSendDanmu: function () { this.videoContext.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } })
PS: 最后补充一下video的注意事项:
1. video 组件是由客户端创建的原生组件,它的层级是高的。
2. 请勿在 scroll-view 中使用 video 组件。
3. css 动画对 video 组件无效。
如果想在video组件上添加组件,可以使用cover-view组件,具体使用方法点击这里:https://mp.weixin.qq.com/debug/wxadoc/dev/component/cover-view.html。
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流