cstor-live-player
cstor-live-player 云創(chuàng)大數(shù)據(jù)開源的一款基于Vue的組件，目的是使用flv.js播放低延遲的實(shí)時(shí)視頻流元镀。
可以播放h264中包含的http-flv或websocket流。
cstor-live-player會(huì)一直重連直到可以播放視頻為止。cstor-live-player將嘗試跟上最新時(shí)間生闲，如果視頻以某種方式延遲寡键，它將嘗試平穩(wěn)地提高播放速度掀泳。
github地址： https://github.com/cStor-cDeep/cstor-live-player
安裝
yarn add cstor-live-player
# - or -
npm install cstor-live-player
Using
該組件不會(huì)自動(dòng)注冊(cè)為Vue組件，您必須導(dǎo)入樣式表并提供該組件的大小西轩。
最簡單的demo App.vue:
<template>
<div id="app">
<cstor-video-player style="height: 720px;" src="http://host:port/path/to/stream"/>
</div>
</template>
<script>
import CstorLivePlayer from 'cstor-live-player'
import 'cstor-live-player/dist/cstor-live-player.css'
export default {
components: {CstorLivePlayer}
}
</script>
播放器不包含任何按鈕员舵。您可以創(chuàng)建自己的按鈕并使用簡單的API。
默認(rèn)情況下藕畔，音頻是禁用的马僻，這是必須的，因?yàn)闉g覽器不會(huì)自動(dòng)播放未靜音的視頻注服，如果需要打開音頻通道韭邓，請(qǐng)?zhí)砑?code>audio屬性。
播放器組件將增長以填充可放大組件的大小溶弟。它將嘗試保持長寬比女淑，如果您要放棄長寬比，則可以嘗試添加fill屬性可很，但某些瀏覽器可能會(huì)忽略您并保持長寬比诗力。
api
組件屬性
src: String = stream url (reactive), http[s]://.../ or ws[s]://.../
fill: Boolean = Fill the whole area instead of keeping aspect ratio
audio: Boolean = enable audio channel, defaults to no audio
js api:
play(url: String) = Play a new stream
stop() = stops the player
captureImage() -> <canvas/> = Makes a screenshoot of the video.
getVideoElement() -> <video/> = Returns the VideoElement in case you want to do something with it
有關(guān)HTTP視頻流的注釋
大多數(shù)瀏覽器都會(huì)限制到同一瀏覽器的連接數(shù)量host:port，如果您要播放多個(gè)視頻我抠，建議使用websocket協(xié)議苇本。
另外，使用網(wǎng)絡(luò)套接字可以減少實(shí)時(shí)視頻的延遲菜拓。
待完成
- 添加一個(gè)用于個(gè)性化的播放器樣式.
- 做一些關(guān)于日志記錄的：添加配置或禁用它
