video.js切换视频地址无法切换视频

已于 2023-08-03 17:00:26 修改
阅读量635 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2023-08-02 17:31:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34179819/article/details/132067636
版权

切换栏目更改视频地址

在写大屏项目的时候碰到一个需求，就是将从后端获取到的监控视频地址，也就是m3u8类型的视频文件渲染到页面中，此时也就用到了video.js组件，video.js是通过配置项的形式将视频渲染上去，但是在不销毁组件的情况下，更新父组件传入的props.src,无法将切换后的视频渲染上去。具体代码如下。
在这里插入图片描述
这个方法是查阅了许多文章来写的，但是并没有效果。
后续只能通过在组件中动态绑定一个key的形式去判定组件为不同的组件，重新去渲染dom来达到视频重新渲染的效果。
在这里插入图片描述
在这里插入图片描述目前发现对于组件化封装video.js时，无法切换m3u8视频，但是在vue2中又是可以的。在vue3中，如果是mp4格式的文件，也是可以通过myPlayer.value.scr()去切换视频的！
对于第一种失败的方法，我目前还没找到解决办法，如若有大佬看到此篇文章，帮助我答疑解惑一下！

前端小陈C
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
vue中使用video.js src切换不能播放的问题
snailmar的博客
12-08 5971
video.js在vue中切换视频的正确方式是 <video ref="videoPlayer" class="video-js" autoplay> </video> //初始化播放器 this.player = videojs( this.$refs.videoPlayer, this.options, fu...
video.js播放hls视频示例.rar
12-21
在上面的代码中，我们首先引入了video.js的CSS和JavaScript文件，然后引入了videojs-contrib-hls插件，这个插件使video.js能够处理HLS流。在`<video>`标签中，我们添加了一个HLS源（`.m3u8`文件），并为不支持HLS的...
vue+videojs动态切换flv视频流
qq_42351255的博客
07-03 3338
使用vue3.x+videojs+flv.js。
vue使用vedio.js播放视频（切换视频源）
reofadu的博客
04-06 4541
vedio.js官方vue教程是采用组件模式，切换视频失败。 参考和众多网上教程，最后采用去掉组件，直接调用this.player.src（）方法切换成功记录下。 后续再研究组件的加载和传函数和参数的问题。 环境参数： “video.js”: “^7.11.4”, “vue”: “^2.6.11”, 代码如下： <template> <div> <button type="submit" class="btn btn-primary" @click="h
videojs 实现视频流切换和分屏播放
最新发布
weixin_46214844的博客
09-09 2473
videojs 实现视频流切换和分屏播放；
video.js 动态切换视频流无效（FLV等类型）
qq_17627195的博客
08-29 1081
需要动态切换FLV视频流，但是换了地址后，视频无法播放，使用的代码如下。（一些其他类型也可以通过下面方法解决问题）切换地址的时候，将播放器的dom删除，然后添加新的dom，在重新初始化播放器就可以了。
vue+videojs视频播放、视频切换、视频断点分段上传
jmszl1991的博客
11-30 5301
本文介绍了利用videojs实现视频播放以及视频切换功能，同时附加介绍了视频断点续传功能。
video.js-swipe视频进度 自动轮播特效.zip
09-09
"video.js-swipe视频进度 自动轮播特效.zip"是一个压缩包，包含了一个实现视频与图片结合的轮播特效的资源。这个特效使得内容展示更加生动且吸引用户注意力，尤其适用于网站和应用程序中的背景播放或展示部分。 ...
Js视频播放器插件Video.js使用方法详解
10-15
首先，移除`data-setup`属性，然后使用`videojs`函数，传入视频标签的ID和选项对象： ```javascript videojs("xttblog", {}, function() { // Player (this) is initialized and ready. }); ``` Video.js的选项...
video.js播放rtmp视频demo
09-14
var player = videojs('myPlayer', options); player.ready(function() { player.play(); }); ``` 这里的`src`属性指定了RTMP流的URL，`type`属性则告诉video.js这是RTMP流。 为了使这个demo更进一步，开发者还...
vue通过video.js解决m3u8视频播放格式的方法
12-10
ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后结果测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。小编已经亲自试验过 2.
解决video动态切换src视频不改变问题
Z_0926的博客
09-24 1万+
解决video动态切换src视频不改变 1、问题： 在react项目中，有个需求是要动态的改变video中的视频，但是通过查看，video标签中的src已经更新但是视频还是原来的视频，并未更新。 2、百度产生原因： 当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。 3、有效的解决方案： 1、不使用source标签，直接在video中使用src，动态切换这里面的src <video src={'http://' + item.vi
vue项目引入videojs做视频直播等
zhangpu_的博客
04-24 562
vue项目引入videojs做视频直播等 video.js是什么 Video.js是专为HTML5世界打造的网络视频播放器。 https://videojs.com/ 使用方式 npm npm install --save-dev video.js 使用方式 main.js 全局配置（也可以在页面中直接使用，此处进行里了全局引入） import Video from 'video.js' import 'video.js/dist/video-js.css' import 'videojs-flash'
js实现两个视频的上下切换
m0_68094390的博客
05-21 145
/ Delta Y是指滚轮滚动的距离，上滚是负数，下滚是正数。// 下滚并且顶部容器未完全隐藏。// 上滚并且底部容器未完全隐藏。// 获得视频DOM。// 阻止滚动条滚动。
Video.js插件切换视频源并操作m3u8格式视频
热门推荐
仰望星空
10-05 2万+
目录 第一章 videojs的配置与简介 第二章 更改视频源代码与实例 第三章 api的部分应用实例 第四章 视频api补充介绍 添加事件 事件绑定 前言：老师让我修改一个需要播放器的界面，之前的播放器有挺多功能需要修改，于是就从网上找了新的播放器插件，也就是Video.js，在网上找了挺久没什么靠谱的资料，于是记录一下。 第一章 videojs的配置与简介 关于videojs我...
video多少视频切换思路
weixin_41127362的博客
05-10 415
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta charset="UTF-8"> .
video.js视频插件进行视频切换的设置方法及js中如何判断undefined的属性
断了的弦的博客
11-11 5583
首先给出下载地址：http://www.jq22.com/jquery-info404 配置好页面后请注意，如果要播放本地文件的话，是不能直接写本地路径的。这会涉及的一个跨域的问题，浏览器是不能直接访问本地文件的，不然就是安全问题。所以需要从后台请求视频流，与请求服务器类似。 接着就会遇到视频切换的问题，直接更改video的src会保存，因为页面中已经加载了这个视频插件。所以需要先销毁已有的，
videoJs 在 JS 代码中动态修改 src 属性无法切换视频问题
新青年1号
10-29 1万+
videoJs 在 JS 代码中动态修改 src 属性，虽然 console.log 输出显示修改成功，但播放的视频并没有切换过来 建议使用 videoJS 的 api 中的 src 方法进行修改 <!doctype html> <html> <head> <meta charset="utf-8"> <title>vi...
video.js切换地址
06-03
要在 video.js 中切换视频地址，你可以使用 `src()` 方法。这个方法允许你动态地改变视频的源地址，而无需重新加载整个视频播放器。下面是一个示例代码： ```javascript var player = videojs('my-video'); player.src('http://example.com/new-video.mp4'); ``` 在这个示例中，我们首先获取了一个 ID 为 `my-video` 的视频播放器实例，并使用 `src()` 方法将其源地址更改为 `http://example.com/new-video.mp4`。现在，视频播放器将加载新的视频文件，而不会重新加载整个播放器。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值