基于vue的flv直播视频流播放插件(cstor-live-player)

cstor-live-player

cstor-live-player 云创大数据开源的一款基于Vue的组件,目的是使用flv.js播放低延迟的实时视频流。
可以播放h264中包含的http-flv或websocket流。

cstor-live-player会一直重连直到可以播放视频为止。cstor-live-player将尝试跟上最新时间,如果视频以某种方式延迟,它将尝试平稳地提高播放速度。

github地址: https://github.com/cStor-cDeep/cstor-live-player

安装

yarn add cstor-live-player
# - or -
npm install cstor-live-player

Using

该组件不会自动注册为Vue组件,您必须导入样式表并提供该组件的大小。

最简单的demo App.vue:



播放器不包含任何按钮。您可以创建自己的按钮并使用简单的API。

默认情况下,音频是禁用的,这是必须的,因为浏览器不会自动播放未静音的视频,如果需要打开音频通道,请添加audio属性。

播放器组件将增长以填充可放大组件的大小。它将尝试保持长宽比,如果您要放弃长宽比,则可以尝试添加fill属性,但某些浏览器可能会忽略您并保持长宽比。

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() ->  = Makes a screenshoot of the video.

getVideoElement() -> 

有关HTTP视频流的注释

大多数浏览器都会限制到同一浏览器的连接数量host:port,如果您要播放多个视频,建议使用websocket协议。

另外,使用网络套接字可以减少实时视频的延迟。

待完成

  • 添加一个用于个性化的播放器样式.
  • 做一些关于日志记录的:添加配置或禁用它

你可能感兴趣的:(基于vue的flv直播视频流播放插件(cstor-live-player))