微信小程序媒体组件详解(视频,音乐,图片)


Posted in Javascript onSeptember 19, 2017

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

先来看看效果图:

微信小程序媒体组件详解(视频,音乐,图片) 

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的差不多,代码少,功能强大; 

源码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 #Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 #Javascript
JavaScript 中的 this 简单规则
Sep 19 #Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 #Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 #Javascript
原生js中ajax访问的实例详解
Sep 19 #Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 #Javascript
You might like
php 正则匹配函数体
2009/08/25 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
php curl选项列表(超详细)
2013/07/01 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
python计算最大优先级队列实例
2013/12/18 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
pandas删除指定行详解
2019/04/04 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python 私有化操作实例分析
2019/11/21 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
做一个有道德的人活动实施方案
2014/08/23 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL