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

开源 专栏收录该内容
1 篇文章 0 订阅

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:

<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>

播放器不包含任何按钮。您可以创建自己的按钮并使用简单的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() -> <canvas/> = Makes a screenshoot of the video.

getVideoElement() -> <video/> = Returns the VideoElement in case you want to do something with it

有关HTTP视频流的注释

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

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

待完成

  • 添加一个用于个性化的播放器样式.
  • 做一些关于日志记录的:添加配置或禁用它
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值