vue3中使用TcPlayer实现视频监控-效果图

最新推荐文章于 2024-03-08 13:26:24 发布
最新推荐文章于 2024-03-08 13:26:24 发布
阅读量442 收藏
点赞数
分类专栏： Vue 文章标签： vue TcPlayer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55172460/article/details/130154086
版权

腾讯播放器（TcPlayerLite）推流失败时有指定的错误提示【 根据不同的错误码设置不同的错误提示】，方便用户知晓直播状态；当直播失败时可以在播放界面显示视频封面，相对来说比较美观；

 

 

 

 

不羁的程序员~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
在本文中，我们将深入探讨如何使用 Vue-Video-Player 实现监控设备的实时视频播放，特别是通过 RTMP 流。 1. **安装 Vue-Video-Player** 在 Vue 项目中安装 Vue-Video-Player 可以通过 npm 完成： ``` npm ...
【Vue2 + TCPlayer】实现视频云点播功能
weixin_47375144的博客
12-20 4117
使用：腾讯云，本文基于VUE 需求：利用云点播制作视频 文档：https://cloud.tencent.com/document/product/266/58772 demo: https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/build/index.html 步骤： 1.在页面中引入文件 (1) 先下载 js 文件，将文件放入到该项目中合适的位置      然后将该 js 文件引入到 .vue
vue3中使用TcPlayer实现视频监控-代码
站在巨人的肩膀上前行
04-14 1573
这里主要是监控画面的布局通过点击按钮使用grid布局进行切换，tcplayer.js的初始化就不展示了。在index.html头部引入引入播放器的cdn。
vue3中TCplayer应用
jiangliuhuan123的博客
08-30 1107
环境win10:vite+vue3+elementUI 2 使用 license 问题 licenseUrl: ‘https://license.vod2.myqcloud.com/license/v2/1310752424_1/v_cube.license’’ 代码里面的是我自己免费申请的.时长14天. 这个东西是8.16更新的时候加的免费申请web License 链接 下面是sdk的更新日志: https://cloud.tencent.com/document/product/881/20204
vue+tcplyer播放flv视频基础使用
weixin_46352558的博客
11-22 1071
tcplayer 简单使用
tcplayer在vue3中的应用
最新发布
qq_68262470的博客
03-08 751
腾讯的视频播放sdk在前端和后端的应用，以及各个版本出现的问题
VUE3+TS+VITE+webrtc-streamer实现实时视频播放（监控设备-rtsp，进来保你成）
2201_75875170的博客
11-10 7729
DOCTYPE "... is not valid JSON关键句查询很久，发现得到的答案与我的情况并不相符，然后觉得可能是编码出错了，后来仔细看代码，确实是下图中的代码出错了，没有指明请求的协议以及ip地址前面没加 `//`推流后如果显示不出来，可以尝试在mediamtx或者webrtc两个控制台使用ctrl+c去结束可能的组设的进程，正常情况下，webrtc中会打印非常多no frame，但此时是能够播放的。因为目前没有在项目现场，无法接入摄像头，所以我是使用。启动一个流媒体服务器，使用。
Vue项目中使用better-scroll实现一个轮播图自动播放功能
10-17
better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个...这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下
vue3实现v-model原理详解
10-16
主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中使用better-scroll实现滑动效果及注意事项
10-17
本文将详细介绍如何在Vue中使用`better-scroll`以及在实现过程中需要注意的关键点。 首先，要在项目中引入`better-scroll`，你需要在`package.json`文件中添加依赖，例如："better-scroll": "^1.11.1"，然后执行`...
vue-d3-network：使用d3-force绘制网络图的Vue组件
02-06
vue-d3-网络 Vue组件使用d3-force绘制图形网络 演示版 产品特点 SVG渲染 画布渲染 链接和节点选择 svg <->通过CSS共享画布样式 屏幕截图，导出为svg或png（svg渲染器），导出为png（画布渲染器） 触控支持 安装 ...
vue3在浏览器段展示海康监控视频
xm_w_xm的博客
07-04 1573
vue3在浏览器段展示海康监控视频
vue 使用TCPlayerLite 官方提供方式播放直播
ITLISHUANG的博客
08-22 3355
写在前：这是使用官方提供的方式实现视频播放（自动播放）可切换 实现： <template> <!-- 测试--> <div id="palyback"> <div :class="{'else': onswitch}"> <div id="player-container-id"></div> </div> <div :class="{'else': !onswitch
Vue3使用flvjs播放多个监控视频
Flipped的博客
12-16 1130
【代码】Vue3使用flvjs播放多个监控视频。
在vue中使用腾讯云点播TCPlayer，报Domain verification failed.Error Code : 52
motoudi的博客
03-05 551
这报错很简单，主要是因为你当前使用的域名在腾讯云后台中进行域名配置，将你当前使用的域名加上去就好了，但是可能你本地运行的时候还会报错，但问题不大，线上环境是不会报错的。具体的配置方法，回头再说。
vue3使用flv播放视频监控
热门推荐
weixin_41639609的博客
10-24 1万+
这种方法考虑了下，因为不同的人去使用这个项目初始化使用的时候都要去手动改里面的代码，所以使用时放弃了改方法。第一种方法使用安装的 npm install --save flv.js，会出现报错的情况，如。页面销毁或者布局切换需要以代码,不然多次切换后视频监控不显示。第二种方法使用的是下载一个稳定flv.js包，dataList.value数据格式。然后从外部文件引入。页面中存在多个视频监控。使用flv播放视频流。
海康WEB3.3控件开发包 V3.3 前端vue项目调用实时监控画面
hero8011的博客
09-22 1万+
本需求的完成离不开后端将设备映射到公网， 以及前端单独部署demo页面这个思路的转变。
python+vue+elementui模拟视频监控管理系统django
QQ188083800的博客
09-12 1322
它用于运行与我们项目相关的管理命令。功能选项包括，①播放视频②监控信息分析，以图表的形式显示以往数据的信息-人数，比如各时间段电梯口人数，食堂人数等）urls.py：这个文件负责映射我们项目中的路由和路径。老人小孩自己，没有时间陪伴，我们需要监控，厂区操作间，我们可以通过监控查看自己所需要的信息，settings.py：这个文件包含了所有的项目配置。__init.py：这个空文件告诉python这个文件夹是一个python包。3）登录模块，分为管理员和用户，管理员可以增删改查摄像头，可以增删改查用户；
vue 使用v-tcplayer播放m3u8格式(直播）案例
ITLISHUANG的博客
08-21 1953
写在前：这个例子，如果你只想显示一个视频，并且是调接口才能拿到视频地址，请勿使用这种方式，你可能要看最后提示。 前提：已经下载插件（必须） <template> <!-- 测试--> <div id="palyback"> <div :class="{xiaoping: isaa, 'daping': dapingshow}"> <VTcPlayer ref="tcPlayer" :options="options" e
vue3使用vue-video-player实现实时视频播放
06-02
要使用vue-video-player实现实时视频播放，需要先安装vue-video-player插件并引入相关的组件和样式文件。具体步骤如下： 1. 安装vue-video-player插件： ``` npm install vue-video-player --save ``` 2. 在Vue3的入口文件main.js中引入vue-video-player插件和相关的样式文件： ``` import { createApp } from 'vue'; import App from './App.vue'; import VueVideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; import 'vue-video-player/src/custom-theme.css'; const app = createApp(App); app.use(VueVideoPlayer); app.mount('#app'); ``` 3. 在Vue3的模板中，使用vue-video-player组件来加载视频文件，并设置autoplay和controls属性来自动播放和显示控制条： ``` <template> <div> <video-player ref="videoPlayer" autoplay controls></video-player> </div> </template> ``` 4. 在Vue3的组件中，使用mounted生命周期方法来获取video-player组件的引用，并添加事件监听器来实时监控视频播放： ``` <script> export default { mounted() { const videoPlayer = this.$refs.videoPlayer.$refs.video; videoPlayer.addEventListener('timeupdate', this.handleTimeUpdate); }, methods: { handleTimeUpdate() { const videoPlayer = this.$refs.videoPlayer.$refs.video; const currentTime = videoPlayer.currentTime; // 在这里可以处理视频播放时间的更新 } } } </script> ``` 5. 在handleTimeUpdate方法中，可以获取当前视频播放的时间，并进行处理。例如，可以将当前时间展示在页面上，或者根据时间来触发其他的事件。 需要注意的是，vue-video-player是基于video.js和Vue.js的开源插件，支持多种视频格式和播放器样式。使用vue-video-player可以方便地实现视频播放和控制，同时也提供了一些自定义的配置选项和事件回调函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值