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


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 相关文章推荐
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
vue插件实现v-model功能
Sep 10 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
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编程基本语法快速入门手册
2016/01/07 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
canvas绘制表盘时钟
2017/01/23 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
党支部换届选举方案
2014/05/08 职场文书
医德医风演讲稿
2014/05/20 职场文书
岗位说明书怎么写
2014/07/30 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
个人整改方案范文
2014/10/25 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
办公室岗位职责
2015/02/04 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书