小程序5-多媒体

音频属性表

属性名	类型	默认值	说明
id	String		audio 组件的唯一标识符
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 事件
bindtimeupdate	EventHandle		当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended	EventHandle		当播放到末尾时触发 ended 事件

视频属性表

属性名	类型	默认值	说明
src	String		要播放视频的资源地址
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度）
bindplay	EventHandle		当开始/继续播放时触发play事件
bindpause	EventHandle		当暂停播放时触发 pause 事件
bindended	EventHandle		当播放到末尾时触发 ended 事件
bindtimeupdate	EventHandle		播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchange	EventHandle		当视频进入和退出全屏是触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal
objectFit	String	contain	当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
poster	String		视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效

图片属性表

属性名	类型	说明
src	String	图片资源地址
mode	String	图片裁剪、缩放的模式
binderror	HandleEvent	当错误发生时，发布到AppService的事件名，事件对象event.detail = { errMsg: ‘something wrong’ }
bindload	HandleEvent	当图片载入完毕时，发布到AppService的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}

其中mode的值如下

模式、效果	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

相机属性表（同一页面只能插入一个 camera 组件）

属性名	类型	默认值	说明
device-position	String	back	前置或后置，值为front, back
flash	String	auto	闪光灯，值为auto, on, off
bindstop	EventHandle		摄像头在非正常终止时触发，如退出后台等情况
binderror	EventHandle		用户不允许使用摄像头时触发

地图属性表

属性名	类型	说明
longitude	Number	（初始显示地）中心经度
latitude	Number	（初始显示地）中心纬度
scale	Number	缩放级别，取值范围为5-18
markers	Array	标记点
polyline	Array	路线
circles	Array	圆
controls	Array	控件
include-points	Array	缩放视野以包含所有给定的坐标点
show-location	Boolean	显示带有方向的当前定位点
bindmarkertap	EventHandle	点击标记点时触发
bindcallouttap	EventHandle	点击标记点对应的气泡时触发
bindcontroltap	EventHandle	点击控件时触发
bindregionchange	EventHandle	视野发生变化时触发
bindtap	EventHandle	点击地图时触发

其中 markers 的属性

属性	说明	类型	必填	备注
id	标记点id	Number	否	marker点击事件回调会返回此id
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
title	标注点名	String	否
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以’/'开头则表示相对小程序根目录；也支持临时路径
rotate	旋转角度	Number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注的透明度	Number	否	默认1，无透明
width	标注图标宽度	Number	否	默认为图片实际宽度
height	标注图标高度	Number	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	{content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display}
label	为标记点旁边增加标签	Object	否	{color, fontSize, content, x, y}，可识别换行符，x,y原点是marker对应的经纬度
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点

marker 上的气泡 callout

属性	说明	类型
content	文本	String
color	文本颜色	String
fontSize	文字大小	Number
borderRadius	callout边框圆角	Number
bgColor	背景色	String
padding	文本边缘留白	Number
display	‘BYCLICK’:点击显示; ‘ALWAYS’:常显	String

polyline属性

属性	说明	类型	必填	备注
points	经纬度数组	Array	是	[{latitude: 0, longitude: 0}]
color	线的颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA
width	线的宽度	Number	否
dottedLine	是否虚线	Boolean	否	默认false
arrowLine	带箭头的线	Boolean	否	默认false，开发者工具暂不支持该属性
borderColor	线的边框颜色	String	否
borderWidth	线的厚度	Number	否

circles属性

属性	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
color	描边的颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA
fillColor	填充颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA
radius	半径	Number	是
strokeWidth	描边的宽度	Number	否

controls属性

属性	说明	类型	必填	备注
id	控件id	Number	否	在控件点击事件回调会返回此id
position	控件在地图的位置	Object	是	控件相对地图位置
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以’/'开头则表示相对小程序根目录；也支持临时路径
clickable	是否可点击	Boolean	否	默认不可点击

其中position

属性	说明	类型	必填	备注
left	距离地图的左边界多远	Number	否	默认为0
top	距离地图的上边界多远	Number	否	默认为0
width	控件宽度	Number	否	默认为图片宽度
height	控件高度	Number	否	默认为图片高度

canvas画布属性表

属性名	类型	说明
canvas-id	String	canvas 组件的唯一标识符，重复时只显示一个
disable-scroll	Boolean	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	EventHandle	手指触摸动作开始
bindtouchmove	EventHandle	手指触摸后移动
bindtouchend	EventHandle	手指触摸动作结束
bindtouchcancel	EventHandle	手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	EventHandle	手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	EventHandle	当发生错误时触发 error 事件，detail = {errMsg: ‘something wrong’}

下面附上测试代码

component.js

// pages/component2/component2.js
Page({
  inputValue: '',
  /**
   * 音频的初始数据
   */
  data: {
    poster: '../images/audio1.jpg',
    name: '神话',
    author: '陈工',
    src: '../audio/shenhua.mp3',

    /** 视频数据 */
    src: '../vedio/test.mp4', //视频文件地址
    danmuList: [
      {
        text: '很好看',
        color: '#ff0000',
        time: 1
      },
      {
        text: '一点也不好',
        color: '#ff00ff',
        time: 3
      },
      {
        text: '有没有人',
        color: '#ff00ff',
        time: 2
      }],

    /** 摄像头 */
    camerasrc:'../images/defaultcre.jpg', // 默认预览照片

    /** 地图数据 */
    //标记点
    markers: [{ 
      iconPath: "../images/ditu_flg1.jpg", //标记点图标,最好做成透明背景图
      id: 0, //点击事件回调会返回此id
      title: '老街地铁站',  //标注点名
      latitude: 22.544354,
      longitude: 114.116639,
      width: 50, // 图标宽高
      height: 50
    }],
    //路线图
    polyline: [{
      //线路上的点,经纬度数组
      points: [{
        longitude: 114.116639,
        latitude: 22.544354
      }, {
        longitude: 114.116644,
        latitude: 22.544354
      }],
      color: "#FF0000DD",//线的颜色
      width: 2, //线的宽度
      dottedLine: true, //是否虚线

    }],
    //控件
    controls: [{
      id: 1, // 控件被点击时，返回这个ID
      iconPath: '../images/ditu_flg2.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true //是否可点击
    }]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio');
    this.videoContext = wx.createVideoContext('myVideo');
    this.camera = wx.createCameraContext();

    //使用wx.createContext获取绘图上下文context
    var context = wx.createCanvasContext('firstCanvas')

    context.setStrokeStyle("#00ff00") // 颜色
    context.setLineWidth(5)  // 线宽
    context.rect(0, 0, 200, 200) //创建一个矩形
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)  // 起点
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)  // 画圆
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()  // 绘制当前路径
    context.draw()  // 画入

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(14)
  },
  audioStart: function () {
    this.audioCtx.seek(0)
  },


  bindInputBlur: function (e) {
    this.inputValue = e.detail.value
  },
  bindButtonTap: function () {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'], // 视频来源类型：相册，录像
      maxDuration: 60, // 允许最长60s
      camera: ['front', 'back'], // 相机录像 ：前置 后置相机
      success: function (res) {
        that.setData({
          src: res.tempFilePath  //获取到的本地地址给当前播放src
        })
      }
    })
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,  //弹屏内容
      color: getRandomColor() //文字颜色， 调用page外面随机的颜色
    })
  },

  takePhoto: function () {   
    this.camera.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          camerasrc: res.tempImagePath
        })
      }
    })
  },
  error: function (e) {
    console.log(e.detail)
  },

  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }

})

/** 随机一个颜色 */
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('')
}

component.wxhl