微信小程序------媒体组件(视频,音乐,图片)
今天主要是简单的讲一下小程序当中的媒体组件,媒体组件包括:视频,音乐,图片等。
先来看看效果图:
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的差不多,代码少,功能强大;
微信小程序------媒体组件(视频,音乐,图片)的更多相关文章
- 微信小程序-媒体组件
audio 音频. MediaError.code 示例代码: <!-- audio.wxml --> <audio poster="{{poster}}" na ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- Wuss Weapp 微信小程序 UI 组件库
微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
随机推荐
- linux去掉文件行尾的^M
在Linux下使用vi来查看一些在Windows下创建的文本文件,有时会发现在行尾有一些“^M”.这种文件在执行时会报错bash: ./startserver.sh: /bin/sh^M: bad i ...
- phpstudy2016 redis扩展 windows
第一步,查看环境的信息. 第二步,根据线程是否安全.架构32位或64位下载redis扩展. http://pecl.php.net/package-stats.php 第三步,php_redis.dl ...
- Oracle 通过undo块查看事务信息(转)
数据库版本:Oracle 11.2.0.3 RAC 实验目的:通过undo块查看Oracle事务信息 实验细节:1 开始一个事务SQL> select * from t1; ID NAME- ...
- 关于LDA的gibbs采样,为什么可以获得正确的样本?
算法里面是随机初始了一个分布,然后进行采样,然后根据每次采样的结果去更新分布,之后接着采样直到收敛. 1.首先明确一下MCMC方法. 当我们面对一个未知或者复杂的分布时,我们经常使用MCMC方法来进行 ...
- 来自IOS开发工程师的零基础自学HTML5经验分享
移动互联网的火爆,而Html具有跨平台.开发快的优势,越来越受到开发者的青睐.感谢IOS开发工程师“小木___Boy”’带来的HTML5学习经验分享. 一.学习途径 1.很多视频网站 比如慕课.和极客 ...
- python之路 django基础
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
- Spark集群 Python Package管理
具体问题: 不同的数据分析人员/开发团队需要不同版本的Python版本执行PySpark. 同一Python版本下,需要安装多个Python库,甚至需要不同版本的库. 针对问题2的一个解决办法是将Py ...
- 【android】 中文URL资源找不到的问题
在博客园安卓客户端时,遇到过中文资源找不到的问题 背景:在使用PICASSO的时候,遇到过中文路径加载失败.比如 https://images0.cnblogs.com/news_topic/携程.j ...
- ElasticSearch(六) Elasticsearch在Thinkphp5.0中的使用
首先下载需要引入的类库 链接:https://pan.baidu.com/s/1XEXviLoWM-ypwJ_B0jXqlg 密码:u54t //Elasticsearch.zip类库压缩包地址 然后 ...
- iframe跨页面调用函数
在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数.比如说:现在有两个页面parent.html和child.html.其中parent. ...