微信小程序把玩《九》：audio组件，image组件，video组件

一：audio组件

音频播出已经PCB的较好！只需协调属性设置即可！ （method和data协调采用）

主要属性：

页面表明视频组件

src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"

hidden="{{hiddenVideo}}"

binderror="listenerVideo" />

js

// text:"这就是一个页面"

listenerVideo:function(e) {

console.log(e.detail.errMsg);

listenerButton:function() {

this.setData({

hiddenVideo: !this.data.hiddenVideo

二：image组件

image组件也就是一个程序不可缺少的，可以这样说道一个app中image组件随处可以看见，通常 image存有两种读取方式第一种就是网络图片第二种就是本地图片资源，都用src属性回去选定。

重点属性：

三种翻转模式

九种剪切方式

scaleToFill 不维持四海比翻转图片，并使图片的收录机全然弯曲至清空image元素

aspectFit 维持四海比翻转图片，并使图片的长边能够全然表明出。也就是说，可以完备地将图片表明出。

aspectFill 维持四海比翻转图片，只确保图片的短边能全然表明出

aspectFit 维持四海比翻转图片，只确保图片的短边能全然表明出

top 不翻转图片，只表明图片的顶部区域

bottom,同上

top right

top left

bottom right

bottom left

bottom 不翻转图片，只表明图片的底部区域

left 不翻转图片，只表明图片的左边区域

top right 不翻转图片，只表明图片的右上边区域

三：video组件

视频播出组件与图片读取组件也没啥差别，采用出来也没啥特别注意的

关键属性：

页面表明视频组件

src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"

style="width: 100%; height: 100%"

hidden="{{hiddenVideo}}"

binderror="listenerVideo" />

// text:"这就是一个页面"

hiddenVideo: true

* 监听视频读取错误状态

listenerVideo:function(e) {

console.log(e.detail.errMsg);

* 监听button页面事件

listenerButton:function() {

this.setData({

hiddenVideo: !this.data.hiddenVideo