VUE中集成H5直播点播播放器LivePlayer过程

最新推荐文章于 2024-03-12 10:28:46 发布
最新推荐文章于 2024-03-12 10:28:46 发布
阅读量3.7k 收藏 3
点赞数
分类专栏： LivePlayer(WEB H5播放器) 文章标签： LivePlayer H5播放器 青柿 LiveGBS 国标直播点播
www.liveqing.com
本文链接：https://blog.csdn.net/Marvin1311/article/details/103314686
版权

基于VUE和webpck的前端工程

这里可以参考 https://github.com/livegbs/GB28181-Server

1、安装@liveqing/liveplayer

npm -i @liveqing/liveplayer --save-dev

2、webpack.config.js 添加配置

这里是配置webpack自动copy，当然也可以手动复制到待发布的web目录，如www

....
const CopyWebpackPlugin = require('copy-webpack-plugin');
....
   plugins: [
   ...
      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/'}
    ]),
   ...
   ]

3、配置template.html

<!DOCTYPE HTML>
<html>
    <head>
     .....
        <!--这里的路径是上一步copy，相对于www目录的相对路径，最终目的让浏览器可以访问到这个js-->
        <script src="js/liveplayer-lib.min.js"></script>
    </head>
    <bodyr>
        .....
    </body>
</html>

4、.vue中使用liveplayer

4.1、 import 引入

import LivePlayer from "@liveqing/liveplayer";

4.2、 components 中添加

 components: {
    LivePlayer
 }

4.3 页面中添加组件

	<div>
	....
   <LivePlayer :videoUrl="url" live muted stretch></LivePlayer>
   ....
   </div>

4.4 url设置

this.url = 播放的视频地址
Marvin1311
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目集成LivePlayer播放器
weixin_43415075的博客
04-22 4250
前言 视频播放器在视频监控项目中必不可少，虽然H5中提供了video标签，但是它不支持摄像头所提供的视频格式，故无法满足视频监控项目的需求。基于封装一款满足视频监控项目需求的视频播放器技术门槛相对较高，所以选择一款开源视频播放器是一种不错的选择。 ...
VUE直播，回放，流播放器，H5, 视频直播
07-18
此demo，有直播功能，只需要安装依赖，就能运行
vue+node 实现视频在线播放的实例代码
01-18
1.node服务端 数据流传输，可在线缓存 //获取参数 var params=urldeal.parse(req.url,true).query const ROOT_PATH = process.cwd();//必须使用绝对路径，使用相对路径会直接下载文件 let path =ROOT_PATH+params.url; let stat = fs.statSync(path); //获取文件信息 let fileSize = stat.size; let range = req.headers.range; if (range) { //有range头
如何在VUE中播放RTSP 实时视频，延迟要小于500ms
H5Stream/HTML5 Streaming
12-31 3万+
VUE在最近几年前端开发的发展中脱颖而出，凭借其简单性赢得了广大开发人员的喜爱，而angular有非常陡峭的学习曲线，今天我们来看一下如何在VUE播放RTSP 实时视频，本文使用的浏览器为Chrome，具体浏览器的兼容性可以参考h5stream 的中文介绍 https://linkingvision.com/download/documentation/h5stream/  或者百度网盘 htt...
Vue集成海康威视h5视频播放器
最新发布
m0_37611114的博客
03-12 666
videoUrl：视频地址，如：ws://10.128.89.14:559/openUrl/T2jl5qo。videoWidth和videoHeight：用于定义视频容器的宽高。该组件集成了web视频的两种播放方式，预览和分屏播放。videoList：多个videoUrl的集合，分屏播放时使用。3、在public/index.html页面中引入。2、将js文件放到public目录下。1、进入海康威视官网下载开发包。
视频播放组件实战【LivePlayer H5播放器】
fei1234456的博客
06-29 1万+
在公司项目开发中，有一个项目里面需要做一个视频播放的功能，播放方式是调用海康平台提供的接口获取流地址来进行视频的播放并且最重要的是需要支持flash。由于前端用的Vue，对比了几个，最后选择了LivePlayer H5播放器。 官网介绍：H5直播/点播播放器，使用简单，功能强大， 免费使用。 官网地址：https://www.liveqing.com/docs/manuals/LivePlayer.html github源码地址：https://github.com/livegbs/GB28181-S.
如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器
青柿视频流媒体的博客
11-11 3985
在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器1、复制依赖文件1.1 示例 通过 webpack 插件自动复制依赖1.1.1、编辑你的 webpack.config.js1.1.2、若使用 vue-cli, 编辑你的 vue.config.js2、 html模板中引入依赖js3、编辑你的 Vue 组件4、H5直播点播播放器 1、复制依赖文件 1.1 示例 通过 webpack 插件自动复制依赖 copy node_modules/@liveqing/liveplayer/dist/c
【视频直播篇二】vue-cli3集成LivePlayer
一只没有脚的鸟
03-08 1635
关于LivePlayer的介绍请参考https://www.liveqing.com/docs/products/LiveQing.html 首先导入插件 npm install @liveqing/liveplayer --save-dev 然后把下面三个文件放入public目录 crossdomain.xml liveplayer.swf liveplayer-lib.min.js 还需要安装copy-webpack-plugin插件 npm install --save-dev copy-web
【技术教程】基于EasyRTSPSever与GB28181协议设备端EasyGBD实现的摄像机模拟器架构
TSINGSEE青犀视频官方技术博客
09-21 1257
上一次我们计划做一款摄像机模拟器设备，主要的功能用途是为了方便更多的安防视频开发者能够更加简单、便捷、高效地找一款摄像机设备来做开发。 安防摄像机虽然很简单就能买到，但是配电、配电源、调网络，占空间，一系列过程下来，还是很麻烦的！ 接着上面的计划，我们要开发一款具有摄像机视频流功能的设备模拟器，那么，我们就必须要具备有两种协议的支持属性，一种是RTSP协议，目前网络摄像机必备的协议，还有一种是国标GB28181协议，这两种协议都可以接入到NVR、视频平台，对于视频开发作为模拟器来说，协议已经足够
【无标题】
ting_cute的博客
12-15 2282
vue使用EasyPlayer.js视频播放插件遇到的问题 在使用插件的时候总会出现以下的报错问题 Uncaught ReferenceError: videojs is not defined 1.第一步：首先需要安装插件，用npm安装EasyPlayer、copy-webpack-plugin 注意：copy-webpack-plugin版本一定不能大于6.0，不然会出现很多问题，具体原因可以去看这个插件的更新记录。 npm install @easydarwin/easyplayer --sav
(开源)基于vue、webpack搭建的GB28181国标流媒体服务前端-播放器组件搭建及使用...
weixin_30507481的博客
07-16 1021
开源资源 LiveGBS国标GB28181流媒体服务前端源码 https://github.com/livegbs/GB28181-Server 免费播放器LivePlayer https://www.npmjs.com/package/@liveqing/liveplayer 安装播放器 npm install @liveqing/liveplayer webpck.config.js 中配置 ...
LivePlayer播放器的基本用法
weixin_45774558的博客
02-09 4676
​1.安装 npm install @liveqing/liveplayer 2.在vue.config.js添加配置
Jessibuca H5直播流播放器源代码
03-18
Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。 Jessibuca功能： 1、支持...
vue实现自定义H5视频播放器的方法步骤
12-01
前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑… 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易. ...
网页直播/点播播放器支持WebRTC/http-flv/rtmp/m3u8等直播流播放
热门推荐
青柿视频流媒体的博客
03-28 9万+
H5直播/点播播放器，使用简单，功能强大，支持WebRTC播放;支持MP4播放;支持m3u8/HLS播放;支持HTTP-FLV/WS-FLV播放;支持RTMP播放;支持直播和点播播放;支持播放器快照截图;支持点播多清晰度播放;支持全屏或比例显示;自带的flash支持极速和流畅模式;自带的flash支持HTTP-FLV播放;自动检测IE浏览器兼容播放;支持自定义叠加层;
web点播/直播播放器-VideoJS 网页直播实现双击全屏
青柿视频流媒体的博客
03-27 3万+
博客整理了，我们免费web点播/直播播放器liveplayer 相关功能的实现过程。记得关注哦。 网页直播播放器更加符合广大人民群众的使用习惯,实现双击全屏的效果.目前网页直播播放器使用了开源的 VideoJS, 它的默认效果是单击播放区域暂停, 只能通过右下角的最大化按钮触发最大化. 要实现双击全屏播放的效果, 就要对 VideoJS 动点小手术, 下面介绍下其中两个关键的步骤. 一. 禁用单击...
liveplayer免费网页直播|点播播放器-页面动态多播放器添加代码示例
青柿视频流媒体的博客
04-17 2万+
强大的网页直播/点播播放器，使用简单，功能强大， 终身免费使用 支持m3u8播放; 支持HTTP-FLV播放; 支持RTMP播放; 支持直播和点播播放; 支持播放器快照截图; 支持点播多清晰度播放; 支持全屏或比例显示; 自带的flash支持极速和流畅模式; 自带的flash支持HTTP-FLV播放; 自动检测IE浏览器兼容播放; 详见：https://www.npmjs.com/pac...
免费网页直播|点播播放器-自动重连解决网络|操作造成断流的播放问题
青柿视频流媒体的博客
04-24 1万+
LivePlayer网页直播|点播免费播放器下载： 支持m3u8播放;支持HTTP-FLV播放;支持RTMP播放;支持直播和点播播放;支持播放器快照截图;支持点播多清晰度播放;支持全屏或比例显示;自带的flash支持极速和流畅模式;自带的flash支持HTTP-FLV播放;自动检测IE浏览器兼容播放; 在线体验地址 准备一个推流 可以参照：https://blog.csdn.net/Marvin...
LivePlayer.js免费的H5播放器HLS/HTTP-FLV/WS-FLV/RTMP/H265/HEVC直播点播流播放常见问题
青柿视频流媒体的博客
11-03 7523
免费的H5播放器HLS/HTTP-FLV/WS-FLV/RTMP/H265/HEVC直播点播流播放常见问题1、页面控制台 Console 错误提示2、多分屏超过 6 路不能播放3、如何自适应 div4、播放器如何销毁5、LivePlayer.js使用安装 1、页面控制台 Console 错误提示 提示： TypeError: The element or ID supplied is not valid. (videojs) 检查 video-url 设置的播放地址 是否有效（可以用 VLC 播放尝试）
LivePlayer H5播放器
08-25
LivePlayer H5播放器是一个用于在Vue组件中实现视频播放功能的组件。它可以通过引入LivePlayer库，然后在Vue组件中注册并使用LivePlayer组件来实现视频的播放。具体使用方式可以参考以下代码示例： 在Vue组件中引入LivePlayer库： ``` import LivePlayer from '@liveqing/liveplayer' ``` 在Vue组件的`components`选项中注册LivePlayer组件： ``` components: { LivePlayer } ``` 在模板中使用LivePlayer组件来播放视频： ``` <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> ``` 以上代码示例中的`:videoUrl`是一个动态属性，可以根据需要传入视频的URL地址。同时，LivePlayer还支持其他属性，如`fluent`、`autoplay`、`live`和`stretch`等，可以根据实际需求进行配置。 在公司项目开发中，可以利用LivePlayer H5播放器来实现调用海康平台提供的接口获取流地址并进行视频播放的功能。由于它基于Vue开发，非常适合在Vue项目中使用。此外，LivePlayer H5播放器还支持Flash播放，可以满足项目对Flash播放的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [视频播放组件实战【LivePlayer H5播放器】](https://blog.csdn.net/fei1234456/article/details/107016188)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [LivePlayer H5播放器（实时视频和历史视频）](https://blog.csdn.net/kassiaaaa/article/details/108003406)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值