更新记录

1.1.1（2021-09-13）

优化

1.1.0（2021-08-09）

优化

1.0.9（2021-08-03）

样式适配

平台兼容性

zc-video 视频播放器 zc-audio音频播放器

组件名：zc-video zc-audio。

平台差异说明

h5使用videojs，其他端使用video组件,app端使用nvue，提供参考，有问题可以自行修改

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

需要注意的是：

• nvue图片图标和fontFace引入无法使用相对路径，因此移到了根目录的static文件下，可查看示例自行修改
• APP由于video组件层级太高改用nvue（nvue需要在mainfest.json->app-plus里配置"nvueStyleCompiler" : "uni-app",）
• 插件里包含 zc-slider 自定义进度条、滑动条组件，支持水平和垂直滑动
• zc-video h5端使用的是vue的videojs，未安装videojs需先安装videojs（npm i video.js）videojs
• 需在App.vue引入videojs的css文件（@import 'video.js/dist/video-js.css'）;
• 本组件是基于vue-video-player修改

<zc-slider @change="sliderChangeProgress" @dragstart="sliderDragstartProgress"  @dragend="sliderDragendProgress" @dragging="sliderChangingProgress" class="progress-slider" :width="silderProgressWidth" strokeWidth="3px"
    handleHeight="10px" handleWidth="10px" :min="0" :max="100" :showInfo="false" :value="playProgress" :subValue="loadProgress" :step="0.01" 
    ></zc-slider>

<zc-video :url="url" 
    ref="zcvideo"
    :poster="poster"
    @play="handlePlay" 
    @pause="handlePause"
    @ended="handleEnded" 
    @loadeddata="handleLoadeddata" 
    @waiting="handleWaiting"
    @playing="handlePlaying" 
    @timeupdate="handleTimeupdate"
    @canplay="handleCanplay" 
    @canplaythrough="handleCanplaythrough" 
    @ready="handleReadied"
    @statechanged="handleStateChanged"
    @loadedmetadata="handleLoadMetaData"
    @fullscreenchange="handleFullscreenchange"
    @progress="handleProgress"
    ></zc-video>

API

• 基本事件及参数如下，其他功能可以自行摸索
• 由于app端video层级过高不使用nvue会被覆盖自定义控制器，若使用vue的话可以通过 useOriginalStyle 控制使用原生控制器不使用自定义控制器

Props

H5 Events

• 默认加载了以下事件，可通过 events 及 globalEvents 属性添加更多事件

• 不同端有些事件是不支持的，具体可以自行测试使用 事件称名	说明	返回参数
  ready	播放器已准备完毕	Function(Object)
  loadedmetadata	获取元数据	Function(Object)
  loadeddata	当浏览器已加载音频/视频的当前帧时触发。	Function(Object)
  canplay	当浏览器可以开始播放音频/视频时触发	Function(Object)
  canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时触发。	Function(Object)
  play	当音频/视频已开始或不再暂停时触发。	Function(Object)
  pause	当音频/视频已暂停时触发。	Function(Object)
  waiting	当视频由于需要缓冲下一帧而停止时触发。	Function(Object)
  playing	当音频/视频在因缓冲而暂停或停止后已就绪时触发。	Function(Object)
  ended	当目前的播放列表已结束时触发。	Function(Object)
  progress	当浏览器正在下载音频/视频时触发。	Function(Object)
  error	当在音频/视频加载期间发生错误时触发。	Function(Object)
  timeupdate	当目前的播放位置已更改时触发。	Function(Object)

options

controlBar