如何使用小程序媒体组件

如何使用小程序媒体组件

图片,视频,音乐是小程序使用中不可缺少的部分,这篇文章中,我们将介绍小程序媒体组件的使用。媒体组件分为audio音频组件,image图像组件,video视频组件,camera相机组件以及live-player、live-pusher小程序直播组件。其中直播权限需要相关资质的账号才能开通,本文暂不做介绍。其他组件我们将会以Hello World的demo形式做介绍。

Hello World - audio音频组件

音频组件需要调用wx.createInnerAudioContext()接口使用,我们使用其他组件来调用wx.createInnerAudioContext()内部的函数,来实现对audio组件的播放暂停下一曲等操作的调用。首先,先看看代码,修改index.wxml文件内容,如下。

<view><audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio></view>
<button type="primary" bindtap="audioPlay" size="mini">播放</button>
<button type="primary" bindtap="audioPause" size="mini">暂停</button>
<button type="primary" bindtap="audio30" size="mini">设置当前播放时间为30秒</button>
<button type="primary" bindtap="audioStart" size="mini" type='warn'>回到开头</button>

之后,修改index.js文件内容如下。

Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    poster: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001SnFff46yErZ.jpg?max_age=2592000',
    name: 'Wake up!',
    author: 'AAA',
    src: 'http://isure.stream.qqmusic.qq.com/C400000CeOtG4A2fVk.m4a?guid=8598236233&vkey=244CBD2B8FB54437CEEA6EE55F6376D829BF6670E763662CB00F2258EC7E47C521C31C67C761DF114023E637662C5CB2108BFFE7EF41782E&uin=1589&fromtag=66',
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio30: function () {
    this.audioCtx.seek(30)
  },
  audioStart: function () {
    this.audioCtx.seek(0)
  }
})
1541574223613

通过上述代码,你就可以实现一个小的播放器功能,先看看官方文档,然后我们在介绍下代码的意思。

属性名

类型

默认值

说明

id

String

audio 组件的唯一标识符

src

String

要播放音频的资源地址

loop

Boolean

false

是否循环播放

controls

Boolean

false

是否显示默认控件

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 事件

bindtimeupdate

EventHandle

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

bindended

EventHandle

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

首先,必须填的内容有idscr,因为我们要通过wx.createAudioContext()函数去获取当前播放器的id,获取id后,我们的API才能通过scr给出的音频地址播放当前的音频。

在在index.wxml的代码中,我们指定了当前id为myAudio,指定了音频数据及作者信息,等待从index.js中获取,并在每个button指定调用的函数。

index.js中,我们指定了初始数据posternameauthorauthor。然后通过wx.createAudioContext('myAudio')去寻找index.wxml中的myAudio文件。接下来,写了4个音频控制函数audioCtx.play()并通过index.wxml中的button去调用。

赶快去实现这个demo给自己做一个播放器吧!

Hello World - image图片组件

图片也是在小程序开发中最常用的一种功能,调用图片比较简单,通过一行代码即可实现,修改index.wxml如下。

<image src="https://source.unsplash.com/random/1600x900"></image>

通过这行代码,你就可以实现在小程序中显示图片,但是,image组件有没有更多功能呢?我们先看看文档。

属性名

类型

默认值

说明

src

String

图片资源地址,支持云文件ID(2.2.3起)

mode

String

'scaleToFill'

图片裁剪、缩放的模式

lazy-load

Boolean

false

图片懒加载。只针对page与scroll-view下的image有效

binderror

HandleEvent

当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}

bindload

HandleEvent

当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

我们看到小程序有一个mode属性,支持图片裁剪和缩放,我们可以尝试下这个功能。首先,先看看mode属性的文档。

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

模式

说明

缩放

scaleToFill

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

缩放

aspectFit

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

缩放

aspectFill

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

缩放

widthFix

宽度不变,高度自动变化,保持原图宽高比不变

裁剪

top

不缩放图片,只显示图片的顶部区域

裁剪

bottom

不缩放图片,只显示图片的底部区域

裁剪

center

不缩放图片,只显示图片的中间区域

裁剪

left

不缩放图片,只显示图片的左边区域

裁剪

right

不缩放图片,只显示图片的右边区域

裁剪

top left

不缩放图片,只显示图片的左上边区域

裁剪

top right

不缩放图片,只显示图片的右上边区域

裁剪

bottom left

不缩放图片,只显示图片的左下边区域

裁剪

bottom right

不缩放图片,只显示图片的右下边区域

这样展示不够直观,我们使用下面的代码,将其展示出来。修改index.wxml文件如下。

<view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<image mode="{{item.mode}}" src="https://source.unsplash.com/random/1600x900"></image>
</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:不缩放图片,只显示图片的右下边区域'
    }]
  },
})

我们将看到不同的mode对当前图片造成不同的影响。因为image组件默认宽度300px、高度225px所以,你看的图片可能会变形。

1541576381170

为了更直观的表现,我做了两张图,大家写代码的时候可以参考使用。

明白图片组件如何使用了吗?写代码尝试下吧!

Hello World - video视频组件

小程序的视频组件支持很多功能,我们同样需要调用wx.VideoContext()函数来处理视频的播放停止等功能。可以使用下面的代码来体验。首先,修改index.wxml文件。

<view class="section tc">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>

接下来,修改index.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 (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
  bindInputBlur (e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})
1541580544205

我们可以使用上述的代码来实现播放暂停视频及发送弹幕功能。首先,我们先看看该组件的常用属性,这里我去掉了不常用的属性按钮,更多属性请参考官方文档

属性名

类型

默认值

说明

src

String

要播放视频的资源地址,支持云文件ID(2.2.3起)

initial-time

Number

指定视频初始播放位置

duration

Number

指定视频时长

controls

Boolean

true

是否显示默认播放控件(播放/暂停按钮、播放进度、时间)

danmu-list

Object Array

弹幕列表

danmu-btn

Boolean

false

是否显示弹幕按钮,只在初始化时有效,不能动态变更

enable-danmu

Boolean

false

是否展示弹幕,只在初始化时有效,不能动态变更

autoplay

Boolean

false

是否自动播放

loop

Boolean

false

是否循环播放

muted

Boolean

false

是否静音播放

page-gesture

Boolean

false

在非全屏模式下,是否开启亮度与音量调节手势

direction

Number

设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)

值得注意的是<video />默认宽度300px、高度225px,我们可通过wxss设置宽高。在上面的代码中,我们设定了src的视频地址,设置了相关id,并打开了弹幕的相关设置。

之后在index.js中,我们通过bindInputBlur()函数和bindSendDanmu()函数来获取你填入的弹幕及显示弹幕。关于API具体使用教程,请参考官方文档,本文只是带大家入门。

Hello World - camera相机组件

这篇文章中,教大家使用了基础的相机组件的使用,通过相机,拍照返回当前的图片。这里拍照使用的是CameraContext()API,我们可以使用下面的代码实现相机高阶玩法。

属性名

类型

默认值

说明

mode

String

normal

有效值为 normal, scanCode

device-position

String

back

前置或后置,值为front, back

flash

String

auto

闪光灯,值为auto, on, off

bindstop

EventHandle

摄像头在非正常终止时触发,如退出后台等情况

binderror

EventHandle

用户不允许使用摄像头时触发

bindscancode

EventHandle

在扫码识别成功时触发,仅在 mode="scanCode" 时生效

首先我们看看官方文档,这里我们需要调用CameraContext()API,具体API使用请参考官方文档,本文暂不赘述。可以使用下面的代码来体验相机使用。首先修改index.wxml文件。

<view class="page-body">
    <view class="page-body-wrapper">
      <camera
        flash="{{flash}}"
        device-position="{{position}}"
        binderror="error"
      >
      </camera>
      <text>当前闪光灯状态:{{flash}}</text>
      <view class="btn-area first-btn">
      <view class="btn-area">
        <button type="primary" bindtap="toggleflash">切换闪光灯状态</button>
      </view>
      <button type="primary" bindtap="togglePosition">切换摄像头</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="takePhoto">拍照</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="startRecord">开始录像</button>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="stopRecord">结束录像</button>
      </view>
      <view class="preview-tips">预览</view>
      <image wx:if="{{src}}" mode="widthFix" class="photo" src="{{src}}"></image>
      <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
    </view>
</view>

接下来,打开index.js文件,写入下面的代码。

Page({
  onShareAppMessage() {
  },
  data: {
    src: '',
    videoSrc: '',
    position: 'back',
    mode: 'scanCode',
    result: {},
    flash : 'on'
  },
  onLoad() {
    this.ctx = wx.createCameraContext()
  },
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  startRecord() {
    this.ctx.startRecord({
      success: () => {
        console.log('startRecord')
      }
    })
  },
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          src: res.tempThumbPath,
          videoSrc: res.tempVideoPath
        })
      }
    })
  },
  togglePosition() {
    this.setData({
      position: this.data.position === 'front'
        ? 'back' : 'front'
    })
  },
  toggleflash() {
    this.setData({
      flash: this.data.flash === 'off'
        ? 'on' : 'off'
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

通过这里的代码,那就可以实现相机组件的大部分使用了。那有小伙伴问了,如何实现二维码扫描呢?这里比较简单,我们可以直接调用微信的扫一扫进行二维码的扫描。修改index.wxml文件如下。

<view class="btn-area">
  <button type="primary" bindtap="scanCode">扫码</button>
</view>

然后打开index.js文件,写入下面的代码。

Page({
  scanCode(){
    wx.scanCode({
      success(res) {
        console.log(res)
      }
    })
  }
})

这里扫描的二维码,会调用微信的二维码扫描工具进行扫描,扫描完成后,将参数返回给小程序,这里我们将扫描出来的内容通过控制台方式打印出来。

{result: "https://www.techeek.cn/wx-navigator", charSet: "UTF-8", errMsg: "scanCode:ok", scanType: "QR_CODE", rawData: "aHR0cHM6Ly93d3cudGVjaGVlay5jbi93eC1uYXZpZ2F0b3I="}

我们看到系统已经返回了相关内容,包含扫码内容,类型,字符集及原始的base64编码。

属性

类型

说明

result

string

所扫码的内容

scanType

string

所扫码的类型

charSet

string

所扫码的字符集

path

string

当所扫的码为当前小程序的合法二维码时,会返回此字段,内容为二维码携带的 path

rawData

string

原始数据,base64编码

总结

关于媒体的组件你学会了吗?使用小程序媒体组件,可以实现很多功能哦~赶快去试试吧!后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案,为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

微信小程序的样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机制。...

993
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

3401
来自专栏前端知识分享

第58天:简单焦点轮播图

703
来自专栏vue学习

19、分类详情页之基本页面结构

具体关于路由的跳转就不多讲了,具体可以参考前面第5章vue-router之什么是编程式路由

972
来自专栏前端杂货铺

不要给<a>设置outline:none

outline属性有什么作用     原文链接 a{outline:none} do not do it     当用户使用tab键进行链接切换时,该属性会在当...

4695
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第一天 HTML【悟空教程】

一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。

2645
来自专栏乐百川的学习频道

Animate.css 动画库介绍

一个漂亮炫酷的网页离不开动画效果的点缀。现在也有很多动画库可供选择,这里我来介绍一个简单好用的动画库Animate.css。 animate.css在线效果用一...

35010
来自专栏非著名程序员

Android官方支持百分比设置宽和高的控件及示例

Android官方支持百分比设置宽和高的控件及示例 非著名程序员 Android官方终于支持按百分比来设置控件的宽和高了。有了这样的控件,写起来就比较方便了。其...

1999
来自专栏Google Dart

AngularDart Material Design 复选框 顶

用户可以点击该复选框以选中或取消选中它。 通常使用复选框允许用户从一组中选择多个选项。如果您有一个ON/OFF选项,请避免使用单个复选框并使用material-...

1024
来自专栏崔庆才的专栏

Javascript - 事件顺序

1395

扫码关注云+社区