z-video-player
v0.1.5
Published
视频播放器
Downloads
19
Readme
z-video-player是一个集成多方播放器的可自由选择的播放器插件。
安装
使用 npm 或 yarn 安装
我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。
$ npm install z-video-player
$ yarn add z-video-player
引入
import { ZPlayer } from 'z-video-player'
引入样式
import 'z-video-player/es/ZPlayer/style/style.css'
组件示例
<script>
export default {
components: {
ZPlayer
},
data() {
options: {
appKey: "xxxxxxxxxxxxxxx",
appSecret: "xxxxxxxxxxxxxxx",
ip: "xxx.xxx.xxx.xxx",
videoNo: "xxxxxxxxxxxxxxxxx",
port: "xxxx",
url: "http://您的ip:端口/xxxxxxxx",
configId: "",
id: "",
coverPic: null,
playType: "1",
showToolbar: 1,
name: "海康威视"
}
}
}
</script>
<ZPlayer ref="ZPlayer" :options="options"></ZPlayer>
参数
OPTIONS
海康威视视频 OPTIONS配置
| [属性]| [说明]| [类型]| [默认值]| | --- | --- | --- | --- | appKey| 海康威视Key | String | "" | appSecret| 海康威视Secret | String | "" | ip| 海康威视ip | String | "" | videoNo| 海康威视视频编号 | String | "" | port| 海康威视端口 | String | "" | url| 视频实际拼接地址 | String | "" | configId| 视频基础配置属性 | String | "" | id| 视频基础配置属性 | String | "" | coverPic| 视频封面 | String | "" | playType| 视频类型 | String | 1 | showToolbar| 是否显示工具栏,0-不显示,非0-显示 | String | "" | name| 视频名称 | String | "" |
mp4、flv、m3u8 OPTIONS配置
| [属性]| [说明]| [类型]| [默认值]| | --- | --- | --- | --- | url| 视频实际拼接地址 | String | "" | coverPic| 视频封面 | String | "" | playType| 视频类型 5 | String | 5 | name| 视频基础配置属性 | String | "" |