微信小程序媒体组件

附上官方开放文档：https://developers.weixin.qq.com/miniprogram/dev/component/audio.html

audio音频组件
audio组件需要拥有唯一的id，根据id使用wx.createAudioContext(‘AudioID’)创建音频播放环境

audio组件返回错误码

示例：

//WXML文件
<!--audio-->
<audio id="myAudio" src="{{src}}" poster="{{poster}}" name="{{name}}" author="{{author}}" controls ></audio>
<view class="btn"><button type="primary" size="default" bindtap="audioPlay" class="btn1">播放</button><button type="primary" size="default" bindtap="audioPause" class="btn2">暂停</button><button type="primary" size="default" bindtap="audioRestart" class="btn3">重播</button>
</view>

//JS文件
const app = getApp()
Page({onReady:function(e){this.audioCtx = wx.createAudioContext('myAudio')},data: {poster:'../shouhou.jpg',name:'守候',author:'船长',src:'../shouhou.mp3',},audioPlay:function(){this.audioCtx.play()},audioPause:function(){this.audioCtx.pause()},audioRestart:function(){this.audioCtx.seek(0)}
})

//WXSS文件
.btn{display: flex;flex-direction: row;align-items: center;
}

效果图：

image图片组件
支持jpg、png、SVG格式

示例：

//WXML文件
<!--image-->
<view><text>image</text><text>图片</text>
</view>
<view><view wx:for="{{array}}" wx:for-item="item"><view class="section_text">{{item.text}}</view><view class="section_img"><image style=" backgroup-color:#eeeeee;" mode="{{item.mode}}" src="{{imgsrc}}"></image></view></view>
</view>

//JS文件
const app = getApp()
Page({data: {array: [{mode: 'scaleToFill',text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'}, {mode: 'aspectFit',text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'}, {mode: 'aspectFill',text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'}, {mode: 'top',text: 'top：不缩放图片，只显示图片的顶部区域'}, {mode: 'bottom',text: 'bottom：不缩放图片，只显示图片的底部区域'}, {mode: 'center',text: 'center：不缩放图片，只显示图片的中间区域'}, {mode: 'left',text: 'left：不缩放图片，只显示图片的左边区域'}, {mode: 'right',text: 'right：不缩放图片，只显示图片的右边边区域'}, {mode: 'top right',text: 'top right：不缩放图片，只显示图片的右上边区域'}, {mode: 'bottom right',text: 'bottom right：不缩放图片，只显示图片的右下边区域'}],imgsrc: '../flower.jpg',},
})

video视频组件
和audio组件一样根据id使用wx.createVideoContext(‘VideoID’)创建视频播放环境

示例：

//WXML文件
<!--video-->
<view class="video"><video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" id="myVideo" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
</view>
<button bindtap="bindBtnTap">获取视频</button>
<input bindblur="bindInputBlur" placeholder="在此输入弹幕内容"></input>
<button bindtap="bindSendDanmu">发送弹幕</button>

//JS文件
const app = getApp()
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:colorrgb.push(color)}return '#'+rgb.join('')
}
Page({onReady:function(e){this.videoContext = wx.createVideoContext('myVideo')},data: {   danmuList:[{text:'这是第一条弹幕',color:'#ff0000',time:1},{ text: '这是第二条弹幕', color: '#ff00ff', time: 3}]},bindInputBlur:function(e){this.inputValue = e.detail.value},bindSendDanmu:function(){this.videoContext.sendDanmu({text:this.inputValue,color:getRandomColor()})},bindBtnTap: function () {var that = thiswx.chooseVideo({sourceType: ['album', 'camera'],maxDuration: 60,camera: ['front', 'back'],success: function (res) {that.setData({src: res.tempFilePath})}})}
})

//WXSS文件
.video{display: flex;flex-direction: column;align-items: center;
}

效果如下，可以发弹幕哦

微信小程序媒体组件相关推荐

微信小程序媒体组件-image图片懒加载效果
image 基础库 1.0.0 开始支持,低版本需做兼容处理. 图片.支持 JPG.PNG.SVG.WEBP.GIF 等格式,2.3.0 起支持云文件ID. 属性类型默认值必填说明最低版本 ...
微信小程序之组件 —— 微信小程序教程系列（19）
什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...

微信小程序媒体组件

微信小程序媒体组件相关推荐

最新文章

热门文章

微信小程序 媒体组件

微信小程序 媒体组件相关推荐

最新文章

热门文章

微信小程序媒体组件

微信小程序媒体组件相关推荐