UniApp 小程序封装原生组件（使用与交互详细流程）

<view class="ks-video-view">
  <video
    class="ks-video-content"
    id="{{ id }}"
    src="{{ src }}"
    controls="{{ controls }}"
    autoplay="{{ autoplay }}"
    loop="{{ loop }}"
    muted="{{ muted }}"
    initial-time="{{ initialTime }}"
    duration="{{ duration }}"
    object-fit="{{ objectFit }}"
    show-progress="{{ showProgress }}"
    show-fullscreen-btn="{{ showFullscreenBtn }}"
    show-play-btn="{{ showPlayBtn }}"
    enable-progress-gesture="{{ enableProgressGesture }}"
    show-mute-btn="{{ showMuteBtn }}"
    bindplay="handleStart"
    bindpause="handlePause"
    bindended="handleEnded"
    bindtimeupdate="handleTimeupdate"
    bindfullscreenchange="handleFullscreenchange"
    binderror="handleError"
  >
  </video>
</view>

{
    "usingComponents": {},
    // 是组件，记得填 true
    "component": true
}

// 自定义组件参考：https://mp.kuaishou.com/docs/develop/frame/custom_comp/component_constructor.html
// video 参考：https://mp.kuaishou.com/docs/develop/components/media/video.html
// 组件封装
Component({
  // 对外参数（prop）
  properties: {
    // 唯一标识符
    id: {
      type: String,
      value: ''
    },
    // 播放地址
    src: {
      type: String,
      value: 'http://vjs.zencdn.net/v/oceans.mp4'
    },
    // 显示默认播放控件（播放/暂停按钮、播放进度、时间）
    controls: {
      type: Boolean,
      value: true
    },
    // 自动播放
    autoplay: {
      type: Boolean,
      value: false
    },
    // 循环播放
    autoplay: {
      type: Boolean,
      value: false
    },
    // 静音播放
    muted: {
      type: Boolean,
      value: false
    },
    // 指定视频时长
    duration: {
      type: Number,
      value: 0
    },
    // 指定视频初始播放位置
    initialTime: {
      type: Number,
      value: 0
    },
    // 'contain' | 'fill' | 'cover'
    objectFit: {
      type: String,
      value: 'contain'
    },
    // 若不设置，宽度大于 240 时才会显示
    showProgress: {
      type: Boolean,
      value: true
    },
    // 是否显示全屏按钮
    // 在同层渲染模式下仅支持控制竖屏状态（非全屏）下的「全屏按钮」的显示，横屏状态（全屏）不显示「退出全屏按钮」，只能通过标题旁边的箭头退出全屏
    showFullscreenBtn: {
      type: Boolean,
      value: true
    },
    // 是否显示视频底部控制栏的播放按钮
    showPlayBtn: {
      type: Boolean,
      value: true
    },
    // 是否开启控制进度的手势
    enableProgressGesture: {
      type: Boolean,
      value: true
    },
    // 是否显示静音按钮
    showMuteBtn: {
      type: Boolean,
      value: false
    }
  },
  // 组件方法
  methods: {
    // 当开始/继续播放时触发 play 事件
    handleStart (e) {
      this.triggerEvent('start', e)
    },
    // 当暂停播放时触发 pause 事件
    handlePause (e) {
      this.triggerEvent('pause', e)
    },
    // 当播放到末尾时触发 ended 事件
    handleEnded (e) {
      this.triggerEvent('ended', e)
    },
    // 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
    handleTimeupdate (e) {
      this.triggerEvent('timeupdate', e)
    },
    // 视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal
    handleFullscreenchange (e) {
      this.triggerEvent('fullscreenchange', e)
    },
    // 视频播放出错时触发
    handleError (e) {
      this.triggerEvent('error', e)
    }
  }
})