livePlayer播放视频流

开发者福利!热门AI工具限时免费用 购周边即赠Coding Plan Lite,Claude Code、Cursor等20+工具畅享,效率翻倍! 阅读详情

 vue2项目中使用

npm install @liveqing/liveplayer

复制以下几个文件到自己项目:

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

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

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

引入JS

 

项目中使用: 

<template>
  <div class="">
      <live-player
  :videoUrl=videoUrl  autoplay live stretch
></live-player>
  </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
  props: [],
  components: {LivePlayer},
  data() {
   return {
       videoUrl:'http://11.100.41.15:8090/live/03607010001132000000101/hls.m3u8',
       videoParams:{
          videoUrl:'http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8', 
          poster:require("@/assets/video/cover1.png"),
          carouselShow:true
       }
   }
  },
  created() {},
  mounted() {},
  methods: {},
  
}
</script>
<style lang="scss" scoped>
</style>

解决live-player播放黑屏无响应 这两天公司让我用uniapp写一个小程序,用于安卓,ios,微信三端发布,自己也是第一次用(之前一直是写web的),有一个播放直播流的功能,查了半天说是要使用live-player,给了后端的播流地址,却一直没响应黑屏,播放器也没有返回任何错误信息,就卡了好久。(注:个人用户是开不了live-player的,必须是公司或企业,里面有详细说明,第一次开通需要等待几分钟到几个小时,liveplayer才能正常使用)后来也是在配置消息推送服务的时候,才发现需要在Hbuildx中,也需要。小程序开发详情中也要加。 阅读详情

相关推荐

H5视频播放器(livePlayer.js

国网B接口服务 电网B接口;支持本地、内网、私有云部署;为企业视频能力建设,提供了视频点播转码、手机直播推流、云端录像存储计划、RTMP拉流推流服务、RTSP拉流推流服务、设备GB28181接入、Onvif云台控制等等能力,同时提供性能强大稳定的WebRTC/RTMP/HLS/RTSP/HTTP-FLV分发,支持H5页面无插件直播,强大的后台管理,详细的二次开发接口文档,服务搭建简单解压后一键启动,支持Windows和Linux环境部署。二、编辑webpack.xxx.config.js

蒋小姐的博客 1711

live-player 直播流组件的使用骚操作

live-player 实现全屏切换、播放暂停、静音外放的骚操作

m0_67574906的博客 2967

微信小程序直播live-playerlive-pusher踩坑记录

实现一个直播小程序难题汇总记录知识点记录1、live-player的展现方式1)live-player 全屏问题2)在全屏后的live-player上加视图,安卓机无法展示的问题3)解决live-player 放在scroll-view上的问题4)live-player 可以上下滑动问题5)live-pusher 可以上下滑动问题6)live-player 没有视频画面时设置默认图问题7)live-player 没有视频画面时设置默认图问题 最近做了一个微信小程序版的直播小程序,期间遇到了很多问题,在此汇总

小歲月丶太着急 1万+

LivePlayer视频播放

为企业视频能力建设,提供了视频点播转码、手机直播推流、云端录像存储计划、RTMP拉流推流服务、RTSP拉流推流服务、设备GB28181接入、Onvif云台控制等等能力,同时提供性能强大稳定的WebRTC/RTMP/HLS/RTSP/HTTP-FLV分发,支持H5页面无插件直播,强大的后台管理,详细的二次开发接口文档,服务搭建简单解压后一键启动,支持Windows和Linux环境部署。步骤3.在 public index.html 中引用 www 根目录 liveplayer-lib.min.js

weixin_72552407的博客 1738

Vue项目实战:如何用LivePlayer H5播放器搞定海康威视视频流播放(附完整代码)

本文详细介绍了如何在Vue项目中集成LivePlayer H5播放器,实现海康威视视频流的高效播放。从环境配置、流地址获取到核心功能实现,再到多分屏布局和云台控制等高级功能,提供了完整的代码示例和性能优化方案,帮助开发者快速解决视频播放组件集成中的常见问题。

weixin_29021291的博客 349

用于h.265视频解析的前端播放

项目需求,需要可以解析h.265视频流播放器(flv,ws_flv)

qq_32382601的博客 1250

ddp协议 java_GB28181 协议WEB直播服务LiveGBS前端源码中WEB播放组件的使用

开源资源免费播放LivePlayer安装播放器npm install @liveqing/liveplayerwebpck.config.js 中配置......// copy js lib and swf files to dist dirnew CopyWebpackPlugin([{ from: 'node_modules/@liveqing/liveplayer/dist/compone...

weixin_30889555的博客 300

好用的直播播放LivePlayer

官网 <LivePlayer :videoUrl="url" fluent live></LivePlayer> import LivePlayer from '@liveqing/liveplayer';

tiny_qi的博客 1021

视频流播放插件

1、LivePlayer H5播放器:https://www.liveqing.com/docs/download/LivePlayer.html#%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D( 文档地址 ) 总结:m3u8格式的流可以,rtmp的它里面的代码包都不行, demo:转存失败重新上传取消 2、DPlayer:http://dplayer.js...

想飞的猪的博客 2217

国标28181 html播放器,(开源)基于vue、webpack搭建的GB28181国标流媒体服务前端-播放器组件搭建及使用...

开源资源免费播放LivePlayer安装播放器npm install @liveqing/liveplayerwebpck.config.js 中配置......// copy js lib and swf files to dist dirnew CopyWebpackPlugin([{ from: 'node_modules/@liveqing/liveplayer/dist/compone...

weixin_36337548的博客 977

vue项目接入视频监控系列-------播放器的选择

在智慧城市发展迅速的今天,视频监控接入web平台的需求似乎成了不可或缺和潮流。博主准备对自己开发视频监控项目的经历做个记录,整理成一个系列的文章。 在前端发展迅速的今天,h5的出现让在web平台实现无插件播放似乎成了可能,但是video对于RTMP或者RTSP协议的视频流却无能为力,在这里向大家推荐一个播放器:LivePlayer,这是一家视频公司封装的一个播放器,可以免费使用...

花落微凉梦清幽的博客 6315

(开源)基于vue、webpack搭建的GB28181国标流媒体服务前端源码-播放器组件搭建及使用

开源资源 LiveGBS国标GB28181流媒体服务前端源码 https://github.com/livegbs/GB28181-Server 免费播放LivePlayer https://www.npmjs.com/package/@liveqing/liveplayer 安装播放器 npm install @liveqing/liveplayer webpck.config.js 中配置 ...

4402

GB28181 协议WEB直播服务LiveGBS前端源码中WEB播放组件的使用

开源资源 LiveGBS国标GB28181流媒体服务前端源码https://github.com/livegbs/GB28181-Server 免费播放LivePlayer https://www.npmjs.com/package/@liveqing/liveplayer 安装播放器 npm install @liveqing/liveplayer webpck.config.js ...

224

(开源)基于vue、webpack搭建的GB28181国标流媒体服务前端-直播点播播放器组件搭建及使用

开源资源 LiveGBS国标GB28181流媒体服务前端源码 https://github.com/livegbs/GB28181-Server 免费播放LivePlayer https://www.npmjs.com/package/@liveqing/liveplayer 安装播放器 npm install @liveqing/liveplayer webpck.config.js 中配置 ...

青柿视频流媒体的博客 1854

(开源)基于vue、webpack搭建的GB28181国标流媒体服务前端-播放器组件搭建及使用...

开源资源 LiveGBS国标GB28181流媒体服务前端源码 https://github.com/livegbs/GB28181-Server 免费播放LivePlayer https://www.npmjs.com/package/@liveqing/liveplayer 安装播放器 npm install @liveqing/liveplayer webpck.config.js 中配置 ...

weixin_30507481的博客 1166

封装 视频以及监控组件

【代码】封装 视频以及监控组件。

weixin_55042716的博客 810
上一篇: DIV缩放以及拖拽(兼容PC和移动端)
下一篇: Vue-baidu-map实现绘制多边形及回显多边形区域
Holly31
博客等级 码龄10年 2366粉丝 43原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值