vue3搭配LiveQing实现播放直播功能(hls,m3u8)

已于 2024-01-19 16:39:08 修改
阅读量1.3k 收藏 11
点赞数 16
文章标签： 前端 前端框架 vue.js javascript
于 2024-01-16 16:59:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62399152/article/details/135628338
版权

vue3搭配LiveQing实现直播功能

LivePlayer H5播放器

H5直播/点播播放器，使用简单，功能强大
官网地址：LivePlayer

vue3 + vite + LiveQing

  1. 前提 ，vue3项目自行搭建
  2. 安装LiveQing
    命令： npm install @liveqing/liveplayer-v3
  3. 根模板index.html引入文件
    将该路径node_modules/@liveqing/liveplayer-v3/dist/component下的liveplayer-lib.min.js复制到根目录中或者直接按照这个路径引入在这里插入图片描述
    4.在对应的页面引入组件

import LivePlayer from '@liveqing/liveplayer-v3' // vue3

5.在页面中使用

  <LivePlayer
    videoUrl="https://volc-stream.kksmg.com/live/dfws/index.m3u8?volcSecret=884e2a1f9ff9d0a512a1ab8d33cf2f68&volcTime=1705476144"
    fluent
    live
  ></LivePlayer>

更多属性方法使用请访问官网：LivePlayer

附上几个直播源

1.cctv13 :https://live-play.cctvnews.cctv.com/cctv/merge_cctv13_mhd.m3u8
2.东方卫视：https://volc-stream.kksmg.com/live/dfws/index.m3u8?volcSecret=ea5b6246b97b8929a825c906ff5b54ac&volcTime=1705481354
3.贵州卫视：https://9bwaz8y2.gzstv.com/live/CH01_lo.m3u8?txSecret=478069a44ee1f5173ff3f960722abb34&txTime=65A6437E
4.黑龙江卫视：https://idclive.hljtv.com:4430/live/hljws_own.m3u8

文学而
关注
  • 16
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3视频播放器组件Vue3-video-play入门教程
猿小白的博客
03-11 1万+
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端，移动端会自动调用自带视频播放器9、支持hls视频流播放，支持直播10、hls播放支持清晰度切换。
vue3 RTMP视频流 --- 直播
山海也有意难平
11-26 2668
VUE页面 <div class="con monitor"> <video id="mymain" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{ "html5" : { "nativeTextTracks" : false } }'> </video> </div&gt.
vue-video-play使用之播放hls格式视频
最新发布
weixin_47180815的博客
05-08 561
playbackRateMenuButton, // 播放速率，当前只有html5模式下才支持设置播放速率。progressControl, // 点播流时，播放进度条，seek控制。vue-video-player和videojs-contrib-hls。remainingTimeDisplay, // 当前播放时间。currentTimeDisplay,// 当前播放时间。timeDivider, // ‘/’ 分隔符。playToggle, // 播放暂停按钮。
vue通过video.js解决m3u8视频播放格式的方法
12-10
前言 今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后结果测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。小编已经亲自试验过 2.
【视频直播篇二】vue-cli3集成LivePlayer
一只没有脚的鸟
03-08 1957
关于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
利用LiveQing在 vue 页面播放直播视频
wzwzwz555的博客
11-13 1510
安装 npm install @liveqing/liveplayer 安装 npm install copy-webpack-plugin@4.6.0 在build文件的 webpack.dev.conf.js下插入 const CopyWebpackPlugin = require('copy-webpack-plugin'); ...... // copy js lib and swf files to dist dir new CopyWebpackPlugin([
在vue3中使用videojs播放 .m3u8格式文件
一只爱吃糖的小羊
08-24 6583
最近项目中有做视频播放，但是由于视频量大，所以后端处理用的是把视频切片放在m3u8里给前端，然后前端自己播放。
vue中使用@liveqing/liveplayer报错问题踩坑记录
killerdoubie的博客
10-17 1596
即可完美启动 但是这个插件不可以直接播放rtsp流 转化视频流过程中可能回出现延迟问题 如需解决请看下篇。1.安装插件copy-webpack-plugin 请下载这个版本 最开始直接下的最新版 起不来哈。3.在public/index.html 中引用 liveplayer-lib.min.js。1.安装@liveqing/liveplayer。2.在vue.config.js中如下配置。2.引入插件（这里是封装了视频组件）
Vue结合Video.js播放m3u8视频流的方法示例
01-19
首先，我们需要在vue工程中安装video.js相关依赖。 npm install --save video.js npm install --save videojs-contrib-hls 然后，我们需要引入videojs的css文件，例如在main.js中引入 import 'video.js/dist/video...
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
在本文中，我们将深入探讨如何在uniAPP中引入Dplayer.js和hls.js库，以实现对m3u8直播流视频的解析和播放。uniAPP是一个基于Vue.js的跨平台开发框架，允许开发者编写一次代码，应用于多端运行，包括iOS、Android、...
手机端videojs播放m3u8的文件.zip
08-06
通过以上步骤，你应该能在VUE项目中成功实现手机端对m3u8视频的播放。请记得阅读Video.js和Hls.js的官方文档，获取更多高级功能和解决可能出现的问题。这将帮助你更好地理解和掌握这个压缩包提供的解决方案，以及在...
vue播放m3u8真机播放不了 vue-video-player 播放不了 m3u8如何在真机上播放h5
01-03
在做项目有播放m3u8的需求 我就开始就随便找了个 这个我在我这里就不讲了 别人都讲的够多了 什么vue-video-player video.js 等等然后需要可以在电脑上播放导入videojs-contrib-hls就可以 问题 我是本地用的npm然后呢...
Vue3引用Dplayer播放器播放m3u8,hls播放协议
努力变好
07-27 2386
Vue3+ts引用Dplayer播放器播放m3u8,hls播放协议
vue项目使用easyplayer播放m3u8直播推流
weixin_46607967的博客
11-23 2744
项目背景如图后端给了m3u8的直播地址 协议是 hls / flv市面上很多第三方热门播放库都可以完成该多屏播放方式 如Video.js问题在于 分多屏时 会存在性能问题 并且关闭播放器后 即便删除Dom或调用停止等方法 F12网络还在不断的请求分片故采用该库该库使用方便 性能较好 文档清晰 几乎0上手成本。
Vue3实现网页Hls Flv直播流播放
qq_51465488的博客
11-02 1283
近期楼主接到直播流相关的项目，由于没有前端工作经验，以及缺乏视频流相关的知识，一路上磕磕绊绊，现在终于能够正常实现功能。话不多说，先上组件实现。
Vue项目集成LivePlayer播放器
weixin_43415075的博客
04-22 4326
前言 视频播放器在视频监控项目中必不可少，虽然H5中提供了video标签，但是它不支持摄像头所提供的视频格式，故无法满足视频监控项目的需求。基于封装一款满足视频监控项目需求的视频播放器技术门槛相对较高，所以选择一款开源视频播放器是一种不错的选择。 ...
livePlayer播放直播流
weixin_44445363的博客
04-02 1771
livePlayer播放直播流 官网：https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property 业务场景：用户输入rtmp或者rtsp流地址，调用后端接口将其转换为 .flv结尾的地址，将该地址赋值给liveplayer的videoUrl来进行播放 vue2安装 第一步： npm install @liveqing/liveplayer 第二步： 安装 copy-webpack-plugin 插件,
LivePlayer视频播放
weixin_72552407的博客
10-25 737
为企业视频能力建设，提供了视频点播转码、手机直播推流、云端录像存储计划、RTMP拉流推流服务、RTSP拉流推流服务、设备GB28181接入、Onvif云台控制等等能力，同时提供性能强大稳定的WebRTC/RTMP/HLS/RTSP/HTTP-FLV分发，支持H5页面无插件直播，强大的后台管理，详细的二次开发接口文档，服务搭建简单解压后一键启动，支持Windows和Linux环境部署。步骤3.在 public index.html 中引用 www 根目录 liveplayer-lib.min.js。
LivePlayer播放器的基本用法
weixin_45774558的博客
02-09 4804
​1.安装 npm install @liveqing/liveplayer 2.在vue.config.js添加配置
vue3播放m3u8
08-27
在Vue 3中播放m3u8文件可以通过使用video.js库实现。首先，你需要安装video.js和videojs-contrib-hls插件。你可以使用npm来安装它们： ```bash npm install video.js videojs-contrib-hls ``` 然后，在你的Vue组件中引入video.js和videojs-contrib-hls，并使用video标签来渲染视频播放器： ```html <template> <div> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"> <source :src="videoSrc" type="application/x-mpegURL"> </video> </div> </template> <script> import videojs from 'video.js'; import 'video.js/dist/video-js.css'; import 'videojs-contrib-hls'; export default { data() { return { videoSrc: 'your-m3u8-file-url' }; }, mounted() { this.setupPlayer(); }, methods: { setupPlayer() { const player = videojs('my-video'); player.play(); } } }; </script> <style scoped> @import 'video.js/dist/video-js.css'; </style> ``` 在以上示例中，你需要将`your-m3u8-file-url`替换为你实际的m3u8文件的URL。然后，通过调用`videojs`函数来初始化视频播放器，并调用`play`方法开始播放视频。你还可以根据需要自定义视频播放器的样式。 请注意，这只是一个基本示例，你可能需要根据自己的需求进行定制和优化。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值