vue + ckplayer 直播播放m3u8文件，退出页面也会一直请求文件，还会有直播声音

最新推荐文章于 2024-04-01 19:09:40 发布
最新推荐文章于 2024-04-01 19:09:40 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40902181/article/details/120330901
版权

 退出直播页面也会一直请求

 这个比较难处理，因为一旦请求成功，就会一直推送直播流，没办法断开，只有刷新页面

最简单的方法就是beforeRouteEnter 判断如果是直播页面跳转的就重新刷新下页面，就会断开

需要写一个全局的方法，应用vue的mixin方法注册全局方法

弊端就是接口还未成功就会被取消，由于只涉及到从直播页面跳转的，这个刷新频率比较低，影响不大

 

 

ii窝窝头
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ckplayer插件播放m3u8视频
wlx1991的专栏
01-29 5万+
var flashvars = { f: 'ckplayer/m3u8.swf', //使用swf向播放器发送视频地址进行播放 a: 'video/m.m3u8', //m3u8文件 c: 0, //调用 ckplayer.js 配置播放器 p: 1, //自动播放视频 s: 4, //flash插件形式发送视频流地址给播放器进行播放 lv: 0, //注意，如果是直播，
在vue3中使用video.js, 切换m3u8时，无法切换一直加载的问题解决方法
w1olol的博客
01-29 885
在vue3中使用video.js, 切换m3u8时，无法切换一直加载的问题
vue中使用videojs，关闭窗口后视频流一直刷新问题，切换视频流问题
Qin的专栏
04-25 5430
项目开发时遇到问题 使用videojs关闭窗口后视频流一直刷新，使用pause暂停无效。 视频是在弹窗的时候展示，所以完整解决方案自己琢磨了一下，如下 <div v-html="videohtml"> </div> getVideoDialog() { this.videoVisible = true; this.videohtml = `<video id="videoPlayer" class="video-js" .
Vue中如何使用ckplayer
My_LIs的博客
12-31 3955
12
Vue中使用Ckplayer播放器
热门推荐
KyrieCao的博客
06-19 1万+
1、官方下载地址：http://www.ckplayer.com/down/ 下载最新的即可。 2、解压后可以看到 ckplayer这个目录，将它复制到项目中的static目录下。 3、在index.html中引入即可。 4、使用。 在data中定义videoObject对象。 videoObject: { width: 1015, // 宽度，也可以支持百分比(不过父元素宽度要有) ...
vue项目视频播放ckplayer使用
最新发布
Cool_so_cool的博客
04-01 791
ckplayer使用
vue+ckplayer+rtmp
浩星
08-27 2906
我们常用的播放视频流的工具，就是ckplayer+video.js，在这里我们说一下ckplayer: 首先下载ckplayer的文件： https://pan.baidu.com/s/19aDCNsQn4wYw6tiUdhqItQ提取码：4vo1 步骤： 1、将我们的ckplayer放到static 2、这个ckplayer比较特殊，我是直接在html引入的 3、到这里引入...
vue通过video.js解决m3u8视频播放格式的方法
12-10
今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用...
Vue结合Video.js播放m3u8视频流的方法示例
10-18
本篇文章主要介绍了Vue+Video.js播放m3u8视频流的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+element实现大文件上传
07-04
vue+element实现大文件上传
网页视频播放器ckplayerPlay
06-07
这是本人整理过的，没有任何logo的，纯净的视频播放器，测试过的完全可以播放，直接打开不能播放，必须放在服务器上，或iis中才能播放 下面列出本播放器所具有的功能 0:全面支持H.264格式的flv,f4v,mp4主流视频格式，同时支持rtmp实时视频流或rtmp协议下的视频回放，支持实时拖动进度条(需服务器设置好) 1:你可以自己定义播放器风格，包括各按钮的样式和位置 2:支持前置视频广告，Flash广告 3:支持暂停图片或Flash广告，支持播放视频时显示文字滚动广告 4:支持播放器和JS的互动，如：可以用JS控制播放器的播放或暂停，音量，视频的长宽比，同时支持回调播放器的状态，如是否全屏，是否播放结束 5:支持多段视频的无缝播放，支持多集视频的连续播放 6:支持界面分享功能，并且可以自定义分享到任何博客或其它网站的按钮图片 7:支持调节视频的亮度，对比度（也包括色相和饱和度），支持调节视频的长度和宽度 8:支持视频播放结束调用相关视频列表,支持循环播放，或播放结束调用一个js函数执行设置好的动作 9:支持和任何网页程序，各种CMS的整合，甚至可以做到用一个参数的形式直接在页面中以插入swf文件的形式播放视频
ckplayer(超酷网页视频播放器)
09-20
ckplayer(超酷网页视频播放器),支持http协议下的flv,f4v,mp4,支持rtmp视频流和rtmp视频回放,支持m3u8格式,是你做视频直播,视频点播的理想播放器
m3u8文件视频播放（ckplayer）完整代码
09-05
ckplayer支持m3u8文件播放，但是官方并没有具体说明怎样配置，其实只要下载对应的m3u8.swf就可以播放m3u8文件了，此包中已经配置好了，只要将视频链接换成正确就可以播放m3u8视频了
ckplayer 使用demo
10-18
利用ckplayer 作为 web 端视频播放器，来实现在线视频播放 注意：源码必须部署在 web 容器中才能进行正常直播和点播
Ckplayer播放器JS插件
04-02
JS播放器插件-Ckplayer6.3的Demo和使用配置帮助
VUE + java 文件下载
03-29
前端vue，后端java。 如果前端是其他语言，可自行转换。 实现在浏览器前端点击后的文件下载。 不是整个工程代码，只把涉及到下载用的前端的代码和后端的代码贴出来了，可以直接复制使用，有详细的步骤。 包含了前端...
ckplayer html播放本地,vue中使用ckplayer播放器
weixin_36278287的博客
06-27 1089
请选择视频源获取视频中，请稍等...export default {name: '',components: {},props:{sourceUrl:{type:String,default:''},height:{type:String,default:'550px'}},data() {return {sourceUrls:this.sourceUrl,//如果不赋值，在加载组件时会报错pla...
vue项目整合ckplayer
〆天天向上的博客
04-14 1720
1.下载ckplayer资源 下载地址：https://www.ckplayer.com/down/ 2.vue项目中引入资源 将下载下来的ckplayer资源包中的ckplayer文件夹拷贝到Vue项 目中static文件夹中 在index.html中引入ckplayer.js资源 <script type="text/javascript" src="./static/ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer">
资源管理系统-VUE使用ckplayer实现视频列表播放
STIll_ly的博客
09-01 2033
1、 下载ckplayer插件 官网地址：http://www.ckplayer.com/down/ 2、加压后将ckplayer放进VUE项目的static目录下： 3、创建VUE组件 <template> <div id="video"></div> </template> <script> export default { name: 'ckplayer', props: ['videoUrls','autoP
vue2播放m3u8
02-07
Vue.js是一个流行的JavaScript框架，用于构建用户界面。它提供了一种简洁、灵活的方式来开发交互式的Web应用程序。而m3u8是一种常用的视频流媒体格式，通常用于在Web上播放视频。 要在Vue.js中播放m3u8视频，你可以使用video.js这个流行的HTML5视频播放器库。video.js提供了丰富的功能和易于使用的API，可以轻松地集成到Vue.js应用程序中。 首先，你需要在你的Vue.js项目中安装video.js。你可以使用npm或yarn来安装它： ``` npm install video.js ``` 或者 ``` yarn add video.js ``` 安装完成后，你可以在Vue组件中引入video.js并使用它来播放m3u8视频。下面是一个简单的示例： ```vue <template> <div> <video ref="videoPlayer" class="video-js"></video> </div> </template> <script> import videojs from 'video.js'; import 'video.js/dist/video-js.css'; export default { mounted() { // 创建video.js实例 this.player = videojs(this.$refs.videoPlayer, { techOrder: ['html5'], sources: [{ src: 'path/to/your/m3u8/file.m3u8', type: 'application/x-mpegURL' }] }); }, beforeDestroy() { // 销毁video.js实例 if (this.player) { this.player.dispose(); } } }; </script> <style> .video-js { width: 100%; height: 100%; } </style> ``` 在上面的示例中，我们在Vue组件的`mounted`钩子函数中创建了一个video.js实例，并将m3u8视频文件作为源添加到播放器中。在组件销毁之前，我们需要在`beforeDestroy`钩子函数中销毁video.js实例，以避免内存泄漏。 这只是一个简单的示例，你可以根据自己的需求进行更多的定制和配置。你还可以使用video.js提供的丰富的API来控制视频播放、添加自定义样式等。 希望这个简单的示例能够帮助你开始在Vue.js中播放m3u8视频。如果你有任何进一步的问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值