小程序5-多媒体

音频属性表

属性名类型默认值说明
idStringaudio 组件的唯一标识符
srcString要播放音频的资源地址
loopBooleanFALSE是否循环播放
controlsBooleanTRUE是否显示默认控件
posterString默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
nameString未知音频默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
authorString未知作者默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
binderrorEventHandle当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
bindplayEventHandle当开始/继续播放时触发play事件
bindpauseEventHandle当暂停播放时触发 pause 事件
bindtimeupdateEventHandle当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
bindendedEventHandle当播放到末尾时触发 ended 事件

视频属性表

属性名类型默认值说明
srcString要播放视频的资源地址
initial-timeNumber指定视频初始播放位置
durationNumber指定视频时长
controlsBooleanTRUE是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
danmu-listObject Array弹幕列表
danmu-btnBooleanFALSE是否显示弹幕按钮,只在初始化时有效,不能动态变更
enable-danmuBooleanFALSE是否展示弹幕,只在初始化时有效,不能动态变更
autoplayBooleanFALSE是否自动播放
loopBooleanFALSE是否循环播放
mutedBooleanFALSE是否静音播放
page-gestureBooleanFALSE在非全屏模式下,是否开启亮度与音量调节手势
directionNumber设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)
bindplayEventHandle当开始/继续播放时触发play事件
bindpauseEventHandle当暂停播放时触发 pause 事件
bindendedEventHandle当播放到末尾时触发 ended 事件
bindtimeupdateEventHandle播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次
bindfullscreenchangeEventHandle当视频进入和退出全屏是触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal
objectFitStringcontain当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖
posterString视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效

图片属性表

属性名类型说明
srcString图片资源地址
modeString图片裁剪、缩放的模式
binderrorHandleEvent当错误发生时,发布到AppService的事件名,事件对象event.detail = { errMsg: ‘something wrong’ }
bindloadHandleEvent当图片载入完毕时,发布到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-positionStringback前置或后置,值为front, back
flashStringauto闪光灯,值为auto, on, off
bindstopEventHandle摄像头在非正常终止时触发,如退出后台等情况
binderrorEventHandle用户不允许使用摄像头时触发

地图属性表

属性名类型说明
longitudeNumber(初始显示地)中心经度
latitudeNumber(初始显示地)中心纬度
scaleNumber缩放级别,取值范围为5-18
markersArray标记点
polylineArray路线
circlesArray
controlsArray控件
include-pointsArray缩放视野以包含所有给定的坐标点
show-locationBoolean显示带有方向的当前定位点
bindmarkertapEventHandle点击标记点时触发
bindcallouttapEventHandle点击标记点对应的气泡时触发
bindcontroltapEventHandle点击控件时触发
bindregionchangeEventHandle视野发生变化时触发
bindtapEventHandle点击地图时触发

其中 markers 的属性

属性说明类型必填备注
id标记点idNumbermarker点击事件回调会返回此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
borderRadiuscallout边框圆角Number
bgColor背景色String
padding文本边缘留白Number
display‘BYCLICK’:点击显示; ‘ALWAYS’:常显String

polyline属性

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

circles属性

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

controls属性

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

其中position

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

canvas画布属性表

属性名类型说明
canvas-idStringcanvas 组件的唯一标识符,重复时只显示一个
disable-scrollBoolean当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bindtouchstartEventHandle手指触摸动作开始
bindtouchmoveEventHandle手指触摸后移动
bindtouchendEventHandle手指触摸动作结束
bindtouchcancelEventHandle手指触摸动作被打断,如来电提醒,弹窗
bindlongtapEventHandle手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
binderrorEventHandle当发生错误时触发 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值