video


音频播放器

升级chameleon-ui-builtin chameleon-api chameleon-bridge

npm i chameleon-ui-builtin@0.2.12 -S
npm i chameleon-api@0.5.0 -S  
npm i chameleon-bridge@0.1.11 -S

属性

属性名 类型 必填 默认值 说明
src String "" 要播放的音频资源地址
loop Boolean false 是否循环播放
controls Boolean false 是否显示音频控件
poster String "" 默认控件上的音频封面的图片资源地址
name String 未知音频 默认控件上的音频名字
author String 未知作者 默认控件上的作者名字
autoplay Boolean false 是否自动播放音频
c-bind:play EventHandle 当开始/继续播放时触发play事件
c-bind:pause EventHandle 当暂停播放时触发 pause 事件
c-bind:timeupdate EventHandle 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
c-bind:end EventHadnle 当播放到末尾时触发 ended 事件
c-bind:error EventHadnle 当发生错误时触发 error 事件,detail = {errMsg:errorCode}

errorCode取值如下:

说明 最低版本
10001 系统错误
10002 网络错误
10003 文件错误
10004 格式错误
-1 未知错误

示例

<template>
    <page title="audio">
      <view class="audio">
      <audio src="{{src}}"
        controls="{{true}}"
        autoplay="{{true}}"
        loop="{{true}}"
        poster="{{poster}}"
        c-bind:pause="handlePause"
        c-bind:play="handlePlay"
        c-bind:timeupdate="handleTimeupdate"
        c-bind:ended="handleEnded"
        c-bind:error="handleError"
      ></audio>
      </view>
    </page>
</template>
<script>
import cml from 'chameleon-api'
class Audio   {
  data = {
    poster:'http://p1.music.126.net/bYTctrjUegSyzDPteIeNOw==/74766790705099.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0',
    src:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
  }

  computed = {}
  watch  = {}
  methods = {
    handlePause(...args){
      console.log('emit-pause',args);
      this.audioText = 'pause'
    },
    handlePlay(...args){
      console.log('emit-play',args);
      this.audioText = 'play';
    },
    handleTimeupdate(...args){
      this.audioText = 'timeUpdate'
      // console.log('timeupdate',args)
    },
    handleEnded(...args){
      this.audioText = 'ended';
      console.log('emit-ended',args)
    },
    handleError(...args){
      console.log('emit-error',args)
    }

  }

}
export default new Audio();
</script>
<style scoped>
.audio{
  padding-top:200cpx;
}
</style>
<script cml-type="json">
{
    "base": {
        "usingComponents": {
        },
        "navigationBarTitleText": "button",
        "backgroundTextStyle": "dark",
        "backgroundColor": "#E2E2E2"
    }
}
</script>

results matching ""

    No results matching ""