小程序学习之小程序组件（五）媒体组件

1.audio 音频组件，可用于播放本地或网络音频 1.6.0版本开始不再维护，建议使用wx.createInnerAudioContext()接口

<audio>组件属性：

binderror属性触发的返回值MediaError.code有：

获取资源被用户禁止 MEDIA_ERR_ABORTED
网络错误 MEDIA_ERR_NETWORD
解码错误 MEDIA_ERR_DECODE
不合适资源 MEDIA_ERR_SRC_NOT_SUPPOERTED

示例：

<!--wxml-->
<view class="title">媒体组件audio的简单应用</view>
<view class="demo-box">
  <view class="title">播放网络音频</view>
  <audio id="myAudio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls loop></audio>
  <button size="mini" bindtap="autoPlay">播放</button>
  <button size="mini" bindtap="autoPause">暂停</button>
  <button size="mini" bindtap="autoSeek0">回到开头</button>
</view>

/*wxss*/
button{
  margin: 10px;
}

1）使用this.AudioCtx= wx.createAudioContext("myAudio")在onReady函数处注册

//js
Page({
  data: {
    poster:'https://y.gtimg.cn/music/photo_new/T002R300x300M000000dUlqW3lbyob.jpg?max_age=2592000',
    name:'下山',
    author:'要不要买菜',
    pause:false,
    src: "http://112.67.251.151/amobile.music.tc.qq.com/C400004dmA9q3YPzz0.m4a?guid=3976970506&vkey=40C500D34C671E42E599F0F3D93770C5AE99C24D2EEAE53729A26E0FAE2F40152E6AACE3DBA4B68A96E4234C0E1806D42F41E0718D750A35&uin=1845&fromtag=66"
  },
  autoPlay:function(){
     this.AudioCtx.play() 
  },
  autoPause:function(){
     this.AudioCtx.pause();
  },
  autoSeek0:function(){
    this.AudioCtx.seek(0);
  },
  onReady: function () {
    this.AudioCtx= wx.createAudioContext("myAudio")
  },

2）使用const innerAudioContext = wx.createInnerAudioContext()，在onload监听页面加载函数处设置音频链接

Q：这种方法相当于innerAudioContext引用的音乐和audio是两个单独的个体

A：暂时没想到

//js
const  innerAudioContext = wx.createInnerAudioContext()
Page({
  data: {
    poster:'https://y.gtimg.cn/music/photo_new/T002R300x300M000000dUlqW3lbyob.jpg?max_age=2592000',
    name:'下山',
    author:'要不要买菜',
    pause:false,
    src: 'http://112.67.251.151/amobile.music.tc.qq.com/C400004dmA9q3YPzz0.m4a?guid=3976970506&vkey=40C500D34C671E42E599F0F3D93770C5AE99C24D2EEAE53729A26E0FAE2F40152E6AACE3DBA4B68A96E4234C0E1806D42F41E0718D750A35&uin=1845&fromtag=66'},
  autoPlay:function(){
    innerAudioContext.play()
  },
  autoPause:function(){    
    innerAudioContext.pause()
  },
  autoSeek0:function(){    
    innerAudioContext.seek(0)
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    innerAudioContext.autoplay = true
    innerAudioContext.src ="http://112.67.251.151/amobile.music.tc.qq.com/C400004dmA9q3YPzz0.m4a?guid=3976970506&vkey=40C500D34C671E42E599F0F3D93770C5AE99C24D2EEAE53729A26E0FAE2F40152E6AACE3DBA4B68A96E4234C0E1806D42F41E0718D750A35&uin=1845&fromtag=66"
  },   
})

2.image 图片组件用于显示本地或网络图片默认宽度300px；高度225px

<image>对应组件属性：

mode属性控制图片的裁剪、缩放，根据填入的不同有效值形成4种缩放模式和9种裁剪模式，具体如下：

3.video 视频组件，可用于播放本地或网络视频资源，默认宽度300px，高度225px

<video>组件常用属性：

示例：

<!--wxml-->
<view class="title">媒体组件video的简单应用</view>
<view class="demo-box">
  <view class="title">播放网络视频</view>
  <video id="myVideo" src="{{src}}" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls ></video>
</view>

/*wxss*/
video{
  width: 100%;
}

//js
Page({
  data: {
    src:'https://vdept.bdstatic.com/3971736e4c505935754e726e39455777/73594e73484d3146/b7e53df960629c8a3650c3062e855135e03ccc104bbd4c266084518beb8621656e11fe44521141bea729ebbb3990709d.mp4?auth_key=1585160430-0-0-0ff00b8cc85aa78c2e03475f90f2e53a',
    danmuList:[
      {
        text:'第1s出现的弹幕',
        color:'yellow',
        time:1
      },
      {
        text: '第3s出现的弹幕',
        color: 'purple',
        time: 3
      }]
  },
  onReady: function () {
    this.videoContext = wx.createVideoContext("myVideo")
  },
})

ps：发现一般视频的src都是blob开头的地址，用这种方式隐藏真正的链接

4.camera 相机组件真机测试时，需要用户授权scope.camera

<camera>组件属性：

举例：

<!--wxml-->
<view class="title">媒体组件camera的简单应用</view>
<view class="demo-box">
  <view class="title">开启相机</view>
  <camera device-position="back" flash="off" style="width:100%;height:300px;"></camera>
  <button type="primary" bindtap="takePhoto">拍照</button>
  <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
</view>

//js
Page({
  takePhoto(){
    this.ctx.takePhoto({
      quality:'high',
      success:(res)=>{
        this.setData({
          src:res.tempImagePath
        })
      }
    })
  },
  onLoad:function(options){
    this.ctx = wx.createCameraContext()
  }
})

baked_donut

发布了0 篇原创文章 · 获赞 0 · 访问量 439

私信关注

小程序学习之小程序组件（五）媒体组件

猜你喜欢