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


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 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
Vue 打包体积优化方案小结
May 20 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
2006/12/14 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
Symfony生成二维码的方法
2016/02/04 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
用js编写留言板
2020/03/17 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
三项教育活动实施方案
2014/03/30 职场文书
委托书样本
2014/04/02 职场文书
征兵宣传标语
2014/06/20 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
女性健康讲座主持词
2015/07/04 职场文书