首页 > 代码库 > 小程序十：媒体组件

小程序十：媒体组件

2024-08-23 08:47:55   220人阅读

audio
属性名 类型 默认值 说明
action Object   控制音频的播放、暂停，播放速率、播放进度的对象，有method和data两个参数
src String   要播放音频的资源地址
loop Boolean false 是否循环播放
controls Boolean true 是否显示默认控件
poster String   默认控件上的音频封面的图片资源地址，如果controls属性值为false则设置poster无效
name String 未知音频 默认控件上的音频名字，如果controls属性值为false则设置name无效
author String 未知作者 默认控件上的作者名字，如果controls属性值为false则设置author无效
binderror EventHandle   当发生错误时触发error事件，detail = {errMsg: MediaError.code}
bindplay EventHandle   当开始/继续播放时触发play事件
bindpause EventHandle   当暂停播放时触发pause事件
bindratechange EventHandle   当播放速率改变时触发ratechange事件
bindtimeupdate EventHandle   当播放进度改变时触发timeupdate事件，detail = {currentTime, duration}
bindended EventHandle   当播放到末尾时触发ended事件
MediaError.code
返回错误码 描述
MEDIA_ERR_ABORTED 获取资源被用户禁止
MEDIA_ERR_NETWORD 网络错误
MEDIA_ERR_DECODE 解码错误
MEDIA_ERR_SRC_NOT_SUPPOERTED 不合适资源
Action
method 描述 data
play 播放  
pause 暂停  
setPlaybackRate 调整速度 倍速
setCurrentTime 设置当前时间 播放时间
示例代码：
action的method属性只能是play、pause、setPlaybackRate、setCurrentTime，用法如下：
index.wxml:
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="http://qqma.tingge123.com:823/mp3/2015-06-13/1434188181.mp3" action="{{action}}" controls loop></audio>  
  
<button type="primary" bindtap="audioPlay">播放</button>  
<button type="primary" bindtap="audioPause">暂停</button>  
<button type="primary" bindtap="audioPlaybackRateSpeedUp">调为2倍速</button>  
<button type="primary" bindtap="audioPlaybackRateNormal">调为1倍速</button>  
<button type="primary" bindtap="audioPlaybackRateSlowDown">调为0.5倍速</button>  
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>  
<button type="primary" bindtap="audioStart">回到开头</button>

index.js:

Page({  
  data: {  
    poster: ‘http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg‘,  
    name: ‘Sugar‘  
    author: ‘Maroon 5‘  
  },  
  audioPlay: function () {  
    this.setData({  
      action: {  
        method: ‘play‘  
      }  
    });  
  },  
  audioPause: function () {  
    this.setData({  
      action: {  
        method: ‘pause‘  
      }  
    });  
  },  
  audioPlaybackRateSpeedUp: function () {  
    this.setData({  
      action: {  
        method: ‘setPlaybackRate‘,  
        data: 2  
      }  
    });  
  },  
  audioPlaybackRateNormal: function () {  
    this.setData({  
      action: {  
        method: ‘setPlaybackRate‘,  
        data: 1  
      }  
    });  
  },  
  audioPlaybackRateSlowDown: function () {  
    this.setData({  
      action: {  
        method: ‘setPlaybackRate‘,  
        data: 0.5  
      }  
    });  
  },  
  audio14: function () {  
    this.setData({  
      action: {  
        method: ‘setCurrentTime‘,  
        data: 14  
      }  
    });  
  },  
  audioStart: function () {  
    this.setData({  
      action: {  
        method: ‘setCurrentTime‘,  
        data: 0  
      }  
    });  
  }  
})

image

图片资源
属性名 类型 默认值 说明
src String   图片资源地址
mode String ‘scaleToFill‘ 图片裁剪、缩放的模式
binderror HandleEvent   当错误发生时，发布到AppService的事件名，事件对象event.detail = { errMsg: ‘something wrong‘ }
bindload HandleEvent   当图片载入完毕时，发布到AppService的事件名，事件对象event.detail = {}
注：image标签认宽度300px、高度225px
mode有12种模式，其中3中是缩放模式，9种是裁剪模式。
缩放模式：
模式 说明
scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
裁剪模式：
模式 说明
top 不缩放图片，只显示图片的顶部区域
bottom 不缩放图片，只显示图片的底部区域
center 不缩放图片，只显示图片的中间区域
left 不缩放图片，只显示图片的左边区域
right 不缩放图片，只显示图片的右边区域
top left 不缩放图片，只显示图片的左上边区域
top right 不缩放图片，只显示图片的右上边区域
bottom left 不缩放图片，只显示图片的左下边区域
bottom right 不缩放图片，只显示图片的右下边区域
示例：
index.wxml:
<view class="page">  
  <view class="page__hd">  
    <text class="page__title">image</text>  
    <text class="page__desc">图片</text>  
  </view>  
  <view class="page__bd">  
    <view class="section section_gap" wx:for-items="{{array}}" wx:for-item="item">  
      <view class="section__title">{{item.text}}</view>  
      <view class="section__ctn">  
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>  
      </view>  
    </view>  
  </view>  
</view>

index.js:

Page({  
  data: {  
    array: [{  
      mode: ‘scaleToFill‘,  
      text: ‘scaleToFill：不保持纵横比缩放图片，使图片完全适应‘  
    }, {  
      mode: ‘aspectFit‘,  
      text: ‘aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来‘  
    }, {  
      mode: ‘aspectFill‘,  
      text: ‘aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来‘  
    }, {  
      mode: ‘top‘,  
      text: ‘top：不缩放图片，只显示图片的顶部区域‘  
    }, {  
      mode: ‘bottom‘,  
      text: ‘bottom：不缩放图片，只显示图片的底部区域‘  
    }, {  
      mode: ‘center‘,  
      text: ‘center：不缩放图片，只显示图片的中间区域‘  
    }, {  
      mode: ‘left‘,  
      text: ‘left：不缩放图片，只显示图片的左边区域‘  
    }, {  
      mode: ‘right‘,  
      text: ‘right：不缩放图片，只显示图片的右边边区域‘  
    }, {  
      mode: ‘top left‘,  
      text: ‘top left：不缩放图片，只显示图片的左上边区域‘  
    }, {  
      mode: ‘top right‘,  
      text: ‘top right：不缩放图片，只显示图片的右上边区域‘  
    }, {  
      mode: ‘bottom left‘,  
      text: ‘bottom left：不缩放图片，只显示图片的左下边区域‘  
    }, {  
      mode: ‘bottom right‘,  
      text: ‘bottom right：不缩放图片，只显示图片的右下边区域‘  
    }],  
    src: ‘../../resources/cat.jpg‘  
  },  
  imageError: function(e) {  
    console.log(‘image3发生error事件，携带值为‘, e.detail.errMsg)  
  }  
})

video

视频播放器
属性名 类型 默认值 说明
hidden Boolean false 设置视频的显示/隐藏，hidden值为true表示隐藏，值为false表示显示
src String   要播放视频的资源地址
binderror EventHandle   当发生错误时触发error事件，event.detail = { errMsg: ‘something wrong‘ }
video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。
示例代码：
index.wxml:
<view class="section tc">  
    <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback"></video>  
</view>  
  
<view class="section tc">  
    <video src="{{src}}"></video>  
    <view class="btn-area">  
        <button bindtap="bindButtonTap">获取视频</button>  
    </view>  
</view>

index.js:

Page({  
    data:{  
        src:""  
    },  
    bindButtonTap:function(){  
        var that = this;  
        wx.chooseVideo({  
            sourceType:[‘album‘,‘camera‘],  
            maxDuration:60,  
            camera:[‘front‘,‘back‘],  
            success:function(res){  
                that.setData({  
                    src:res.tempFilePath  
                })  
            }  
        })  
    },  
    videoErrorCallback: function (e) {  
        console.log(‘视频错误信息:‘);  
        console.log(e.detail.errMsg);  
    }  
})

小程序十：媒体组件


联系
我们