您现在的位置是:网站首页>>微信>>微信小程序

微信小程序组件——媒体组件

发布时间:2019-08-09 15:39:45作者:wangjian浏览量:132点赞量:0

    一:audio(音频)组件

    audio属性:

    1:id:audio 组件的唯一标识符

    2:src:要播放音频的资源地址

    3:loop:是否循环播放 ,默认为false

    4:controls:是否显示默认控件,默认为false

    5:poster:默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效

    6:name:默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效,默认为未知音频

    7:author:默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效,默认为未知作者

    8:binderror:当发生错误时触发 error 事件,detail = {errMsg:MediaError.code},错误状态码有:1(获取资源被用户禁止),2(网络错误),3(解码错误),4(不合适资源)

    9:bindplay:当开始/继续播放时触发play事件

    10:bindpause:当暂停播放时触发 pause 事件

    11:bindtimeupdate:当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}

    12:bindended:当播放到末尾时触发 ended 事件

    例:

    <!--wxml -->
    <audio 
    controls //显示默认控件
    loop //循环播放
    poster="{{poster}}" //图片资源地址
    name="{{name}}" //音频名称
    author="{{author}}" //作者
    src="{{src}}" //音频资源地址
    id="myAudio" //audio 组件的唯一标识符
    ></audio>
    <button type="primary" bindtap="audioPlay">播放</button>
    <button type="primary" bindtap="audioPause">暂停</button>
    <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
    <button type="primary" bindtap="audioStart">回到开头</button>
    // js
    Page({
    onReady: function (e) {
    // 使用 wx.createAudioContext获取audio上下文context,myAudio为音频标识符
    this.audioCtx = wx.createAudioContext('myAudio')
    },
    data: {
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',//图片资源
    name: '此时此刻',//音频名称
    author: '许巍',//作者
    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',//音频资源地址
    },
    audioPlay: function () {
    //播放
    this.audioCtx.play()
    },
    audioPause: function () {
    //暂停
    this.audioCtx.pause()
    },
    audio14: function () {
    //跳转到14秒
    this.audioCtx.seek(14)
    },
    audioStart: function () {
    //回到开头
    this.audioCtx.seek(0)
    }
    })

    二:image(图片)组件

    image属性:

    1:src:图片资源地址

    2:mode:图片裁剪、缩放的模式,默认为scaleToFill(缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素),可选参数:

    scaleToFill:缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

    aspectFit:缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。

    aspectFill:缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取

    widthFix:缩放模式,宽度不变,高度自动变化,保持原图宽高比不变

    top:裁剪模式,不缩放图片,只显示图片的顶部区域

    bottom:裁剪模式,不缩放图片,只显示图片的底部区域

    center:裁剪模式,不缩放图片,只显示图片的中间区域

    left:裁剪模式,不缩放图片,只显示图片的左边区域

    right:裁剪模式,不缩放图片,只显示图片的右边区域

    top left:裁剪模式,不缩放图片,只显示图片的左上边区域

    top right:裁剪模式,不缩放图片,只显示图片的右上边区域

    bottom left:裁剪模式,不缩放图片,只显示图片的左下边区域

    bottom right:裁剪模式,不缩放图片,只显示图片的右下边区域

    3:lazy-load:图片懒加载,在即将进入一定范围(上下三屏)时才开始加载,默认为false

    4:show-menu-by-longpress:开启长按图片显示识别小程序码菜单,默认为false

    5:show-menu-by-longpress:开启长按图片显示识别小程序码菜单 ,默认为false

    6:binderror:当错误发生时触发,,event.detail = {errMsg}

    7:bindload:当图片载入完毕时触发,event.detail = {height, width}

    例:

    <!-- wxml -->
    <view class="section__ctn">
    <image 
    style="width: 200px; height: 200px; background-color: #eeeeee;" 
    mode="{{mode}}" //设置图片裁剪、缩放的模式
    src="{{src}}" //图片资源地址  
    bindload="iamgeLoad"  //当图片载入完毕时触发方法
    ></image>
    </view>
    Page({
    data: {
    mode:"scaleToFill",
    src: '../../images/cat.jpg'
    },
    iamgeLoad: function (e) {
    //当图片载入完毕方法
    console.log(e.detail)
    }
    })

    三:video(视频)组件

    video属性:

    1:src:要播放视频的资源地址,支持云文件ID

    2:duration:指定视频时长

    3:controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间),默认为true

    4:danmu-list:弹幕列表

    5:danmu-btn:是否显示弹幕按钮,只在初始化时有效,不能动态变更,默认为false

    6:enable-danmu:是否展示弹幕,只在初始化时有效,不能动态变更,默认为false

    7:autoplay:是否自动播放,默认为false

    8:loop:是否循环播放 ,默认为false

    9:muted:是否静音播放,默认为false

    10:initial-time:指定视频初始播放位置,默认为0

    11:direction:设置全屏时视频的方向,不指定则根据宽高比自动判断,可选参数:0(正常竖向 ),90(屏幕逆时针90度),-90(屏幕顺时针90度)

    12:show-progress:若不设置,宽度大于240时才会显示,默认为true

    13:show-fullscreen-btn:是否显示全屏按钮,默认为true

    14:show-play-btn:是否显示视频底部控制栏的播放按钮,默认为true

    15:show-center-play-btn:是否显示视频中间的播放按钮,默认为true

    16:enable-progress-gesture:是否开启控制进度的手势,默认为true

    17:object-fit:当视频大小与 video 容器大小不一致时,视频的表现形式,默认为contain(包含),可选参数:contain(包含),fill(填充),cover(覆盖)

    18:poster:视频封面的图片网络资源地址或云文件ID,若 controls 属性值为 false 则设置 poster 无效

    19:show-mute-btn:是否显示静音按钮,默认为false

    20:title:视频的标题,全屏时在顶部展示

    21:play-btn-position:播放按钮的位置,默认为bottom(controls bar上),可选参数:bottom(controls bar上),center(视频中间 )

    22:enable-play-gesture:是否开启播放手势,即双击切换播放/暂停,默认为false

    23:auto-pause-if-navigate:当跳转到其它小程序页面时,是否自动暂停本页面的视频,默认为true

    24:auto-pause-if-open-native:当跳转到其它微信原生页面时,是否自动暂停本页面的视频,默认为true

    25:vslide-gesture:在非全屏模式下,是否开启亮度与音量调节手势,默认为false

    26:vslide-gesture-in-fullscreen:在全屏模式下,是否开启亮度与音量调节手势,默认为true

    27:bindplay:当开始/继续播放时触发play事件

    28:bindpause:当暂停播放时触发 pause 事件

    29:bindended:当播放到末尾时触发 ended 事件

    30:bindtimeupdate:播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次

    31:bindfullscreenchange:视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal

    32:bindwaiting:视频出现缓冲时触发

    33:binderror:视频播放出错时触发

    34:bindprogress:加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比

    例:

    <!-- wxml -->
    <view class="section tc">
    <video
    id="myVideo" //视频组件id
    src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" //视频资源地址
    danmu-list="{{danmuList}}" //弹幕列表
    enable-danmu //设置展示弹幕
    danmu-btn //显示弹幕按钮
    controls  //显示默认播放控件
    ></video>
    <view class="btn-area">
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">发送弹幕</button>
    </view>
    </view>
    // js
    function getRandomColor() {
    let rgb = []
    for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
    }
    return '#' + rgb.join('')
    }
    Page({
    onReady: function (res) {
    //视频初始化,myVideo为video的id值
    this.videoContext = wx.createVideoContext('myVideo')
    },
    inputValue: '',
    data: {
    //设置弹幕信息
    danmuList: [
    {
    text: '第 1s 出现的弹幕',
    color: '#ff0000',
    time: 1
    },
    {
    text: '第 3s 出现的弹幕',
    color: '#ff00ff',
    time: 3
    }]
    },
    bindInputBlur: function (e) {
    //获取输入的弹幕信息
    this.inputValue = e.detail.value
    },
    bindSendDanmu: function () {
    //发送弹幕
    this.videoContext.sendDanmu({
    text: this.inputValue,
    color: getRandomColor()
    })
    }
    })


0 +1