微信小程序------媒体组件（视频，音乐，图片）

今天主要是简单的讲一下小程序当中的媒体组件，媒体组件包括：视频，音乐，图片等。

先来看看效果图：

1：图片Image

<!--scaleToFill:不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素widthFix:宽度不变，高度自动变化，保持原图宽高比不变aspectFill:保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 --><image style='width: 100%; height:150px' src='../img/models.jpg' mode='scaleToFill'></image>
<image style='width: 200px; height:200px' src='../img/models.jpg' mode='widthFix'></image>
<image style='width: 200px; height:100px' src='../img/models.jpg' mode='aspectFill'></image>
<image style='width: 200px; height:100px' src='../img/models.jpg' mode='aspectFit'></image>

图片显示，可根据 mode属性设置不同的显示模式。

2：音乐播放 audio

<!--简单的实现音乐播放src：播放音频的资源地址poster：封面图片地址controls：是否显示默认控件name：歌曲名称author:歌曲作者-->
<audio src="{{url}}" poster="{{poster}}" controls="true" author="{{author}}" name="{{name}}"></audio>

3：视频播放 video

<!--播放视频src：视频资源链接danmu-list:弹幕列表danmu-btn:是否显示弹幕按钮enable-danmu:是否展示弹幕，只在初始化有效loop：是否循环播放muted  是否静音播放--><video id='videocontext' src="{{src}}" danmu-btn='true' danmu-list='{{danmuList}}' enable-danmu='true' loop='false' muted='false'></video>
<input class='text_danmu' bindblur='bindInputBlur' type='text'></input>
<button bindtap='bindSendDanmu' type='primary'>提交弹幕</button>

控件使用都和H5的差不多，代码少，功能强大；

源码地址

转载于:https://www.cnblogs.com/zhangqie/p/7518887.html

微信小程序------媒体组件（视频，音乐，图片）相关推荐

微信小程序媒体组件-image图片懒加载效果
image 基础库 1.0.0 开始支持,低版本需做兼容处理. 图片.支持 JPG.PNG.SVG.WEBP.GIF 等格式,2.3.0 起支持云文件ID. 属性类型默认值必填说明最低版本 ...
微信小程序媒体组件
附上官方开放文档:https://developers.weixin.qq.com/miniprogram/dev/component/audio.html audio音频组件 audio组件需要拥有 ...
微信小程序Swiper组件轮播图片尺寸填坑
1.swiper图片尺寸  <view> <swiper><swiper-item><ima ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序之网易云音乐（五）- 排行详情页、歌单详情页、播放器组件开发
微信小程序之网易云音乐(五)- 排行详情页.歌单详情页.播放器组件开发一. 排行详情页模块二. 歌单详情页模块三. 播放器组件微信小程序之网易云音乐导航一. 排行详情页模块 rank.vue ...
微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
微信小程序 RTMP 音视频通话 ffmpeg_WebRTC与微信小程序音视频互通方案设计与实现...
背景在之前的WebRTC实时音视频通话之语音通话设计与实践中介绍了58 TEG部门基于 WebRTC 的实时音视频通话解决方案. 考虑到腾讯微信的小程序平台提供了音视频通话与直播的支持,如果能打通基 ...
【毕业设计_课程设计】基于微信小程序端的视频社交软件+后台管理系统（源码+论文）
文章目录 0 项目说明 1 项目说明 2 开发环境 3 系统功能 3.1 微信小程序端 3.2 后台管理系统 4 界面展示 5 论文概览 6 项目工程 0 项目说明基于微信小程序端的视频社交软件 + ...

微信小程序------媒体组件（视频，音乐，图片）

微信小程序------媒体组件（视频，音乐，图片）相关推荐

最新文章

热门文章