Suwis-video NPM

快速安装

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	-