本文共 2804 字，大约阅读时间需要 9 分钟。

LivePlayer

强大的网页直播/点播播放器，使用简单，功能强大，终身免费

• 支持m3u8播放;
• 支持HTTP-FLV播放;
• 支持RTMP播放;
• 支持直播和点播播放;
• 支持播放器快照截图;
• 支持点播多清晰度播放;
• 支持全屏或比例显示;
• 自带的flash支持极速和流畅模式;
• 自带的flash支持HTTP-FLV播放;
• 自动检测IE浏览器兼容播放;

属性(Property)

• video-url 视频流地址 String default ‘’
• video-title 视频右上角显示的标题 String default ‘’
• poster 视频封面图片 String default ‘’
• autoplay 自动播放 Boolean default true
• loop 是否循环播放 Boolean default false
• live 是否直播, 标识要不要显示进度条 Boolean default false
• alt 视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html img 标签的 alt 属性 String default ‘无信号’
• muted 是否静音 Boolean default false
• aspect 视频显示区域的宽高比, 100% 即是全屏展示 String default ‘16:9’
• loading 指示加载状态, 支持 sync 修饰符
• fluent 流畅模式, Boolean default true
• stretch 是否拉伸, Boolean default false
• timeout m3u8 加载超时(秒) Number default 20
• show-custom-button 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default true
• resolution 供选择的清晰度配置 String 如 “yh,fhd,hd,sd” ( 说明：yh:原始分辨率，fhd:超清，hd:高清，sd:标清,不配置则不启用,需要提供多清晰度源，比如原画源是test.m3u8，则hd源即为test_hd.m3u8 )
• resolutiondefault 默认播放的清晰度 String “hd”
• hasaudio HTTP-FLV播放时使用:是否有音频，传递该属性用于处理只有音频或只有视频的源 Boolean，默认不配置自动判断
• hasvideo HTTP-FLV播放时使用:是否有视频，传递该属性用于处理只有音频或只有视频的源 Boolean，默认不配置自动判断

方法(Medthod)

• getCurrentTime 获取当前播放时间进度, 同步返回播放时间进度数据
• snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event

事件(Event)

• message 触发通知消息, 参数: { type: ‘’, message: ‘’}
• ended 播放结束, 参数: 无
• timeupdate 进度更新, 参数: 当前时间进度
• pause 暂停, 参数: 当前时间进度
• play 播放, 参数: 当前时间进度,
• snapOutside 外部快照回调, 参数: 快照 Base64 数据
• snapInside 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据

安装使用(Install)

• 安装

  npm install @liveqing/liveplayer

• 在 Vue 中使用

  copy node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf 到 www 根目录

  copy node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml 到 www 根目录

  copy node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js 到 www 根目录

  以上 copy 操作通过 webpack 完成, 编辑你的 webpack.config.js

......    // copy js lib and swf files to dist dir    new CopyWebpackPlugin([        {
    from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},        {
    from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},        {
    from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}    ]),......

在 html 中引用 www 根目录 liveplayer-lib.min.js  编辑你的 Vue 组件

......import LivePlayer from '@liveqing/liveplayer'......  components: {    LivePlayer  }......
   

• 脱离 Vue 使用

  copy node_modules/@liveqing/liveplayer/dist/element/liveplayer.swf 到 www 根目录

  copy node_modules/@liveqing/liveplayer/dist/element/crossdomain.xml 到 www 根目录

  copy node_modules/@liveqing/liveplayer/dist/element/liveplayer-element.min.js 到 www 根目录

  在 html 中引用 www 根目录 liveplayer-element.min.js

  HTML 集成 Demo

获取更多信息

安防流媒体互联直播-QQ交流群：

国标GB28181无插件LiveGBS-QQ交流群：

WEB：

Copyright © 2016-2019

转载地址：https://liveqing.blog.csdn.net/article/details/88584819 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！