快速安装

npm

npm install suwis-video --save-dev

yarn

yarn add suwis-video

快速使用

import Vue from 'vue'
import suwisVideo from 'suwis-video'
Vue.use(suwisVideo)

弹窗形式

<template lang="html">
  <div>
    <suwis-video-modal
      v-model="visible"
      :options="options"
      src="http://xxx.com/xx.mp4"
      poster="http://xxx.com/xxx.jpg">
    </suwis-video-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      options: {
        // video options
        ...
      }
    }
  }
}
</script>

内联播放模式

<template lang="html">
  <div>
    <suwis-video-inline
      v-model="visible"
      :options="options"
      src="http://xxx.com/xx.mp4"
      poster="http://xxx.com/xxx.jpg">
    </suwis-video-inline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      options: {
        // video options
        ...
      }
    }
  }
}
</script>

options

| 属性 | 说明 | 类型 | 默认值 | | -------------- | ----------------------------------------------- | -------------- | ------- | | render | 渲染模式 native/canvas | String | native | | fill | 填充模式 fill / contain / cover / none / scale-down | String | initial | | autoplay | 自动播放 | Boolean/Object | false | | controls | 控制台 | Boolean/Object | false | | pagination | 视频分页 | Boolean/Object | false | | navigation | 导航箭头 | Boolean/Object | false | | clickable | 是否支持点击播放/暂停 | Boolean/Object | false | | modal.canclose | 是否显示关闭按钮 | Boolean | false |

事件

native 模式完全继承 w3c media 事件

| 属性 | 说明 | 参数 | 默认值 | | ------------------- | ------------------------------------- | ----- | --- | | on-abort | 在退出时运行的脚本。 | event | - | | on-canplay | 当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。 | event | - | | on-canplaythrough | 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 | event | - | | on-durationchange | 当媒介长度改变时运行的脚本。 | event | - | | on-emptied | 当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。 | event | - | | on-ended | 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。 | event | - | | on-error | 当在文件加载期间发生错误时运行的脚本。 | event | - | | on-loadeddata | 当媒介数据已加载时运行的脚本。 | event | - | | on-loadedmetadata | 当元数据（比如分辨率和时长）被加载时运行的脚本。 | event | - | | on-loadstart | 在文件开始加载且未实际加载任何数据前运行的脚本。 | event | - | | on-pause | 当媒介被用户或程序暂停时运行的脚本。 | event | - | | on-play | 当媒介已就绪可以开始播放时运行的脚本。 | event | - | | on-playing | 当媒介已开始播放时运行的脚本。 | event | - | | on-progress | 当浏览器正在获取媒介数据时运行的脚本。 | event | - | | on-ratechange | 每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。 | event | - | | on-readystatechange | 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。 | event | - | | on-seeked | 当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。 | event | - | | on-seeking | 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。 | event | - | | on-stalled | 在浏览器不论何种原因未能取回媒介数据时运行的脚本。 | event | - | | on-suspend | 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 | event | - | | on-timeupdate | 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。 | event | - | | on-volumechange | 每当音量改变时（包括将音量设置为静音）时运行的脚本。 | event | - | | on-waiting | 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本。 | event | - |