使用videojs播放m3u8视频监控。

已于 2023-06-16 11:04:51 修改
阅读量977 收藏 1
点赞数 2
文章标签： 音视频 ffmpeg
于 2023-04-28 11:40:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_67021283/article/details/130422875
版权
该博客介绍了使用videojs在播放m3u8视频监控时遇到的全屏播放和页面切换后无法再次播放的问题，并提供了解决方案。通过在beforeDestroy或onUnload生命周期函数中销毁video实例来解决播放问题，同时实现了全屏播放功能，尽管videojs本身不提供全屏API。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一 、 实现过程中解决的问题 ：

1、 全屏播放

2、切换页面后进入视频无法再次播放，解决方法利用生命周期函数beforeDestroy或onUnload里面销毁创建的video实例。

二、主要代码:

1.效果：进入监控视频播放页面后 全屏自动播放 /*videojs中没有全屏播放的API，全屏播放是自己的样式*/；

最低0.47元/天 解锁文章
飞猫探长
关注
videojs播放m3u8格式的视频，处理 HLS 推流延时问题
cczz66的博客
12-23 4757
HLS 直播协议的原理理解： 把整个视频流分成一个个小的基于HTTP的视频ts文件，每个视频文件地址会在m3u8格式的链接里对应生成一个索引，在开始一个流媒体会话时，客户端通过m3u8文件的索引去寻找可用的媒体流，实现直播效果； 分析延时原因： 服务器端的编码器和流分割器生成TS视频文件需要时间，推流时也会受到带宽的影响，所以就产生了延时， 分析视频组件工作流程： 请求接口获取 hlsUrl ，此时服务器开始生成TS视频文件并推流； 挂载视频组件， 播放视频，...
vue中使用video.js播放m3u8格式的视频
小马甲
12-08 6196
实时推送的视频流的需求，vue中就可以使用video.js播放m3u8格式的视频流本人每篇文章都是一字一句码出来，希望大佬们多提提意见。创作不易，给我打打气，加加油☕Github。
videojs+vue3接入视频监控使用
最新发布
uuuuzi_的博客
03-21 160
在 uniapp接入监控， 使用video标签报错 DOMException: The element has no supported sources. 使用js 动态创建video标签可解决。同理web端也是动态创建video标签。（踩坑：使用video标签，用变量绑定动态视频路径，播放的实际路径不会更新，改为上面的写法即可）
Video.js 播放m3u8视频
01-22
Video.js 播放m3u8视频 videojs5.hlsjs.js组件 播放m3u8格式视频需要借助服务器 MP4可以直接播放，可以简单发布iis播放m3u8视频
Vue项目使用Video.js播放m3u8格式音（视）频流
weixin_58860430的博客
03-30 6361
记录工作中遇到的问题 需求：点击播放按钮显示弹层，在弹层上播放m3u8格式的音频流 效果如下： 点击父组件的播放按钮 弹层显示出来，播放音频流（背景图片是我自己加的） 使用步骤： 1.安装video.js和videojs-contrib-hls npm i video.js npm i videojs-contrib-hls 2.组件中引入 import videojs from 'video.js' import 'video.js/dist/video-js...
使用videojs播放m3u8视频
热门推荐
qq_51205301的博客
10-03 1万+
在vue3项目中，使用videojs播放视频
Vue+Video.js播放m3u8视频流
05-02 1531
首先，我们需要在vue工程中安装video.js相关依赖。 npm install --save video.js npm install --save videojs-contrib-hls 然后，我们需要引入videojs的css文件，例如在main.js中引入 import 'vi...
vue使用video.js播放m3u8格式视频
lth002的博客
11-14 1360
【代码】vue使用video.js播放m3u8格式视频。
通过videojs播放m3u8视频文件
03-25
通过videojs播放m3u8视频文件
Unity WebGl播放m3u8在线视频(监控，直播)的项目和Demo
04-15
在这个特定的项目中，我们关注的是如何在Unity WebGL中实现m3u8视频流的播放，这通常用于监控和直播场景。m3u8是一种基于HLS（HTTP Live Streaming）的多媒体播放列表格式，适用于分段的流媒体内容。 首先，我们...
videoJs+ hlive JS实现m3u8格式播放
03-17
videoJs+ hlive JS实现m3u8格式播放
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效）
11-30
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效） 。
手机端videojs播放m3u8的文件.zip
08-06
手机端 安卓和ios 均可播放。 使用前请仔细看说明哦 在VUE 环境下使用 videojs播放m3u8的文件
支持m3u8格式播放的video.js
07-23
为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验
vue使用video.js实现播放m3u8格式的视频
这个人太懒了 什么都没留下
12-02 2810
vue使用video.js实现播放m3u8格式的视频
vue使用videoJS播放m3u8视频
前端开发工程师博客
09-29 2057
vue使用videoJS播放m3u8视频
videojs 播放m3u8格式文件
YGang优快云的博客
10-11 1085
"application/x-mpegURL" : 'video/mp4', //根据格式自己配置。说明：endsWith 是 JavaScript 字符串对象的一个方法，用于判断一个字符串是否以另一个字符串结尾。***********videojs的不能播放m3u8格式视频的解决办法***********video配置里加入。
vue 使用 video.js 播放 m3u8 视频流
大家好，我是+V
08-25 3646
vue 使用 video.js 播放 m3u8 视频流 首先呢，遇到一个项目，是需要使用播放器在web上播放视频流，项目使用vue开发的，然后就找了一下相应的插件，找到了 video.js，自己用的时候感觉还不错，可以满足自己的需求，记录一下。 安装依赖包 npm install video.js --save // 视频播放器插件 npm install videojs-contrib-hls --save // 播放hls流插件 npm install @videojs/http-streaming
video标签播放m3u8格式的监控视频
08-02
video标签是HTML5中用于播放视频的标签，可以通过...需要注意的是，由于浏览器对m3u8格式的支持可能有所不同，因此在使用video标签播放m3u8格式的监控视频时，最好进行兼容性测试，并根据不同的浏览器或设备进行适配。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值