vue-video-player播放hls视频流

renkai721

已于 2024-08-01 17:01:08 修改

阅读量1.8k

点赞数 5

分类专栏：前端文章标签： vue.js video-player 萤石海康摄像头

于 2024-01-06 14:45:53 首次发布

本文链接：https://blog.csdn.net/renkai721/article/details/135426263

版权

前端专栏收录该内容

23 篇文章 1 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

需求

最近需要接入海康视频摄像头，然后把视频的画面接入到自己的网站系统中。以前对接过rtsp固定IP的显示视频，这次的不一样，没有了固定IP。海康的解决办法是，摄像头通过配置服务器到萤石云平台，然后购买企业版账号和套餐【注意必须要购买套餐】最便宜的一个月是300元。如果不购买，视频会一直转圈圈，无法播放。

# 萤石云平台官网
https://open.ys7.com



# 国际版视频推流接入教程
https://blog.csdn.net/renkai721/article/details/140849065

1、购买萤石云平台企业版套餐。

2、购买4G卡的流量，默认500MB，新人注册免费领取2G。官方测评一天流量消耗是8个G。

3、购买4G版的摄像头。

效果图

技术方案

1、摄像头通过4G的SIM卡把视频画面传输到萤石云平台。

2、萤石云平台把视频画面生成https开始m3u8结束的访问地址。

3、VUE通过vue-video-player播放m3u8视频画面。

操作教程

如果前期工作都准备好了可以直接看6789

如果前期

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

renkai721

关注关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
2
评论
vue-video-player播放hls视频流

vue-video-player播放hls视频流,vue接入海康摄像头视频
复制链接

扫一扫

专栏目录

订阅专栏

vue-video-player播放m3u8格式的视频

peppa_pig的博客

02-23

7140

一、vue-video-player的使用： 1.安装 npm i vue-video-player -D 2.引入（组件内引入） import { videoPlayer } from 'vue-video-player' import 'video.js/dist/video-js.css' export default { name: "sstc", components: { videoPlayer }, 3.使用 <video-player cla..

详解vue2.0+vue-video-player实现hls播放全过程

11-29

起因最近公司想做一套视频点播服务，因为考虑到成本问题，领导希望一切都用开源系统来完成。基于这个出发点，那就肯定排除了各大云视频平台（腾讯云音视频点播VOD、网易云视频、七牛云、阿里云视频服务等）。其实这里我还是建议购买云视频平台，因为自己造轮子肯定没有别人造的好（专门研发团队除外、以此业务为生的公司除外），再说，云视频平台服务商提供的都是一整套解决方案：收集、存储、转码、播放器等，并且在cdn和弹性扩容上都能得到最大保障。准备视频点播最少需要两样东西：流媒体服务、视频播放器。因为这是一篇讲述前端播放器的帖子，关于流媒体服务的搭建我就pass了，以后有时间再补充新帖。因为公司前端架

2 条评论您还未登录，请先登录后发表或查看评论

记一次vue2.0+vue-video-player实现hls播放全过程

热门推荐

保持学习

12-28

5万+

视频流播放的几种方式

ugbbfjk的博客

06-21

438

video、Aliplayer 、Iframe

vue-video-player 播放hls视频流，m3u8格式的视频

vhgvhbj的博客

07-07

2702

vue-video-player 播放hls视频流，m3u8格式的视频

基于vue项目 vue-video-player实现rtmp hls视频流播放

jeenecy的博客

01-16

1万+

视频直播在线监控——基于vue实现rtmp hls视频流播放现在很多后台管理系统都会在项目中添加实时监控/实时直播的功能，最近刚好遇到项目需求，于是就..。

vue2展示hls视频流vue-video-player

m0_65930596的博客

01-26

521

在下载插件时控制台报错报错。

vue-video-play使用之播放hls格式视频

weixin_47180815的博客

05-08

642

playbackRateMenuButton, // 播放速率，当前只有html5模式下才支持设置播放速率。progressControl, // 点播流时，播放进度条，seek控制。vue-video-player和videojs-contrib-hls。remainingTimeDisplay, // 当前播放时间。currentTimeDisplay,// 当前播放时间。timeDivider, // ‘/’ 分隔符。playToggle, // 播放暂停按钮。

vue-video-player播放 hls(m3u8)视频流

zcylyzhi4的博客

11-17

2592

一、组件封装 <template> <div style="width:100%;height:100%;" ref="videoContainer"> <video-player class="video-js vjs-big-play-centered" ref="myPlayer" :options="playerOptions" v-show="cont

vue之使用vue-video-player实现实时视频流播放

中国程序猿

01-24

4万+

由于这几天项目需要实时显示监控的视频，所以网上翻阅了很多资料，这里写下我从0到1的过程。本篇博客参考了：https://blog.csdn.net/liona_koukou/article/details/84025449博客，也非常感谢此博主对我一些问题的回复和帮助。写在最前：推荐大家一个测试视频流是否可以播放的测试工具：点击下载，建议大家在视频流无法播放时先用此工具测试下源...

web-video-live:网页H5播放视频流直播系统，使用flv.js，vue-video-player播放器，测试支持rtmp，http-flv，hls视频流格式，可以做视频监控，也可以通过视频截图

03-11

网络播放视频流/直播在H5上播放视频流，有很多开源的播放器可以使用，例如：（B站开源）使用纯JavaScript而不是Flash编写HTML5 Flash视频（FLV）播放器。适用于Vue的video.js播放器组件。组件化H5播放器框架...

vue-video:vue移动端简单自定义控件播放器

05-13

4. **视频流处理**：对于大文件或者网络条件较差的情况，可以使用视频流技术，如HTTP Live Streaming (HLS) 或 Adaptive Bitrate Streaming，来根据用户的网络状况动态调整视频质量。这需要服务器端的支持和客户端的...

详解vue-video-player使用心得（兼容m3u8）

12-02

本文将详细介绍如何在 Vue 项目中使用 `vue-video-player`，以及如何使其兼容播放 m3u8 格式的流媒体视频。首先，安装 `vue-video-player` 可以通过 npm 完成： ```bash npm install vue-video-player --save ``` ...

vue2.0+vue-dplayer实现hls播放的示例

08-27

HLS是一种流媒体协议，它允许内容分发网络适应用户的网络条件，通过分割视频流为多个不同比特率的片段来实现流畅的视频播放。 Vue-dplayer是一款基于DPlayer的Vue组件，提供了一个用户友好的界面来展示视频内容。...

详解Vue中nextTick的原理与作用

fengjing81的专栏

07-24

741

Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。

vue3使用el-input-number，只能是整数，并且没有四舍五入

qq_46131497的博客

07-24

471

【代码】vue3使用el-input-number，只能是整数，并且没有四舍五入。

兼容浏览器，切换PC端显示PC端，切换H5端显示H5端

最新发布

L_C_sunny的博客

07-24

308

浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端（在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。

模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域

07-24

566

Vue.js 是一个流行的JavaScript框架，因此，确保其组件按预期工作至关重要：有效，更重要的是，可靠。模拟依赖项是最有效的测试方法之一，我们将在本文中发现。模拟依赖项的必要性模拟依赖项是一种对测试施加控制的方法，它提供了将受测组件与其依赖项隔离开来的能力。由于所有框架都使用多个组件，这些组件的范围可以从 API 到服务，甚至是单击或悬停等交互，因此能够...

vue-video-player播放RTSP视频流

08-16

对不起，`vue-video-player`插件并不支持直接播放RTSP视频流。这个插件主要用于播放常见的视频格式，如MP4、WebM和HLS等。如果你需要在Vue中播放RTSP视频流，你可能需要使用其他的解决方案。一种可能的解决方案是使用`hls.js`库来转换RTSP流为HLS流，然后再使用`vue-video-player`插件来播放HLS流。下面是一个简单的示例：首先，安装所需的依赖： ``` npm install video.js vue-video-player hls.js ``` 然后，在你的Vue组件中使用这些库： ```vue <template> <div> <video-player ref="videoPlayer" :options="playerOptions" @ready="onPlayerReady"></video-player> </div> </template> <script> import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' import VideoPlayer from 'vue-video-player' import Hls from 'hls.js' export default { components: { VideoPlayer }, data() { return { playerOptions: { autoplay: true, controls: true, sources: [{ type: 'application/x-mpegURL', src: 'YOUR_HLS_URL' }] } } }, mounted() { if (Hls.isSupported()) { const video = this.$refs.videoPlayer.$refs.video const hls = new Hls() hls.loadSource('YOUR_RTSP_TO_HLS_URL') hls.attachMedia(video) } }, methods: { onPlayerReady(player) { // player is ready } } } </script> ``` 在上述示例中，你需要将`YOUR_RTSP_TO_HLS_URL`替换为将RTSP流转换为HLS流的实际URL。你可以使用工具如`ffmpeg`来完成这个转换过程。请注意，RTSP流的转换和播放可能涉及到服务器端的配置和处理。这只是一个简单的示例，你可能需要根据你的实际需求做一些调整和改进。希望这个解决方案对你有所帮助！