iot-video
v0.4.3
Published
视频播放组件
Downloads
11
Readme
iot-video
Vue 2 plugin for mp4/flv/hls video playback.
Features
- FLV / MP4 container with H.264 + AAC / MP3 codec playback (powered by flv.js)
- HLS client relies on HTML5 video and MediaSource Extensions for playback (powered by hls.js)
Installation
yarn add bd-video --registry http://39.105.181.34:4873
## EasyWasmPlayer
TBA
Ref: [@easydarwin/easywasmplayer](https://www.npmjs.com/package/@easydarwin/easywasmplayer)
## Getting Started
```javascript
import Vue from 'vue'
import App from './App.vue'
import bdVideo from 'bd-video'
Vue.use(bdVideo)
new Vue({
render: h => h(App)
}).$mount('#app')
<template>
<div id="app">
<bd-video :url="url" />
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
url: '/live/2.m3u8'
// url: 'ws://192.168.1.120:8001/flv/live/2.flv'
// url: 'http://localhost:99/kongzai2.mp4'
}
}
}
</script>
Attributes
| Attribute | Description | Type | Accepted Values | Default | |-----------|----------------|---------|-----------------|------------------------------| | url | url of video | string | - | - | | type | type of video | string | flv/hls/mp4 | m3u8: hls; flv: flv mp4: mp4 | | poster | video poster | string | - | video-default-img.png | | height | height | number | - | - | | loading | loading effect | boolean | true/false | false | | muted | video tag muted| boolean | true/false | true | | hasAudio | video has audio| boolean | true/false | false | | flvPlayer | Flv Player | string | flvjs/easyWasm | flvjs | | retryInterval | retry interval (flvjs only) | number | number(ms) | 15000 |
Events
| Event Name | Description | Parameters | |---------------|---------------------------------------------|----------------------------------------------------------| | dblclickVideo | triggers after video element double clicked | { id: string, type: string, player: Object, el: Object } | | load | triggers after video loaded | - |
Slot
| Name | Description | |------|-----------------------------| | - | content after video element |