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


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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
jQuery选择器基础入门教程
May 10 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
JavaScript门道之标准库
May 26 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
JavaScript原型式继承实现方法
Nov 06 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
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
学习jQuey中的return false
2015/12/18 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中的字典详细介绍
2014/09/18 Python
Django密码系统实现过程详解
2019/07/19 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
python Shapely使用指南详解
2020/02/18 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
综合内勤岗位职责
2014/04/14 职场文书
校车安全管理责任书
2015/05/11 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
2016寒假假期总结
2015/10/10 职场文书
五年级作文之成长
2019/09/16 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android