Vue视频切换src,画面不变化的问题

vue3 videojs实现播放器,动态更改src 1.vue框架更改对应数据data,对应的视图view变化。2.在封装的组件监听传参src的变化,如果点击的 src和之前的不同,进行切换资源,播放器重新加载播放;3.播放器的资源source的参数有src+type,注意type可以不设置。推荐用法:不设置type,如果要设置一定要更传过来的视频流的数据格式保持一致,否则会爆红。 阅读详情

问题:一个视频列表,我播放了一个视频,然后我筛选了视频,导致我的视频还是在播放我刚刚播放的画面

解决:vue动态更换了src的地址,并没有让浏览器对视频进行重新请求,那么我们就不能使用vue的绑定了,需要使用  v-html ,动态输出html代码,动态插入html,这样才会进行更新视频

//video
<div v-html="videolist"></div>
//接口获取的数据  我只给你们写下思路,自己去找循环遍历的方法啊
var data = []
data = res.videolist;
//遍历数组,进行拼接字符串
//for等循环进行遍历
 videoHtml += "<video><source></video>"
//自己将对应的内容补充好啊
//然后使用vue的html绑定,直接给将内容给变量即可

VIDEOJS: 解决动态切换视频源时的MEDIA_ERR_SRC_NOT_SUPPORTED错误 本文深入解析了使用Video.js动态切换视频源时常见的MEDIA_ERR_SRC_NOT_SUPPORTED(CODE:4)错误。核心原因在于切换时错误或缺失了视频源的MIME类型声明。文章提供了直接修复、健壮切换流程及系统排查清单三种解决方案,重点强调了正确配置或省略type字段以让播放器自动检测格式,是解决该问题的关键。 阅读详情

相关推荐

Vue3 + Vite 搭建AI监控系统前端:视频流与检测框可视化实战

在AI监控系统开发中,前端工程师的核心任务并非训练算法,而是构建工程化项目骨架、接入视频流并实现检测结果的可视化。Vue3作为主流前端框架,结合Vite构建工具,能够快速搭建高效、可维护的监控管理界面。通过Canvas绘制实时检测框、WebSocket推送数据、组件化拆分页面,开发者可将后端AI模型输出的坐标与类别信息,转化为直观的视频叠加层与告警面板。本文从环境准备、项目初始化到接口封装与代理配置,系统讲解如何实现一个包含视频播放、检测框叠加、统计卡片及告警列表的完整Demo,并探讨真实项目中的跨域、坐标

weixin_34087307的博客 418

Vue实现视频播放列表(三)01——解决vue中,使用video.js时,audiovideo标签动态绑定src属性失效,切换src不能播放的问题

Vue实现视频播放列表(三)01——解决vue中,使用video.js时,audio/video标签动态绑定src属性失效,切换src不能播放的问题 video.js官网——https://www.npmjs.com/package/video.js 1、问题描述 页面中使用:src绑定视频时,视频未刷新。 2、分析 不要用原生video去切换,不然video.js的方法一个都监听不到啦 3、切换视频的正确方式 要改video元素的src属性,不是改source元素 4、示例4 1-推荐写法 v

weixin_44867717的博客 4464

Raptor码(一):2007RFC5053标准编解码学习

RFC 5053 标准

a_beatiful_knife的博客 3493

解决video动态切换src视频不改变问题

解决video动态切换src视频不改变 1、问题: 在react项目中,有个需求是要动态的改变video中的视频,但是通过查看,video标签中的src已经更新但是视频还是原来的视频,并未更新。 2、百度产生原因: 当 video 中存在 source 标签的时候,浏览器渲染之后会自动去获取地址,即便地址改变,浏览器也不会再去获取地址。 3、有效的解决方案: 1、不使用source标签,直接在video中使用src,动态切换这里面的src <video src={'http://' + item.vi

Z_0926的博客 1万+

GMSL2摄像头接入避坑指南:从FMC子卡配置到V4L2调用的完整流程(附Ubuntu20.04实测)

本文详细解析了GMSL2摄像头接入的全流程,从FMC子卡配置到V4L2调用的完整指南。基于XC7Z100平台实测经验,提供了硬件选型、带宽优化、Linux驱动配置及高分辨率采集的实战技巧,帮助开发者规避常见问题,提升系统稳定性与性能。

weixin_33737774的博客 418

MySQL表名大小写敏感问题终极解决:lower_case_table_names=1不生效的3个隐藏坑

本文深入剖析了MySQL表名大小写敏感问题中,设置lower_case_table_names=1参数不生效的三个核心原因。关键在于理解该参数只能在数据库初始化前设置,并需排查配置文件优先级与正确停止服务的顺序。文章提供了从Windows迁移到Linux的完整避坑指南与验证方法,帮助DBA和开发者彻底解决这一跨平台兼容性难题。

weixin_29229055的博客 391

vue里video的src更新了,视图不更新

解决办法,把video里的source去掉,直接把src动态绑定到video上就可以了, 另一种办法,this.nextTick()里去操作,具体的没有去试this.nextTick()里去操作,具体的没有去试 this.nextTick()里去操作,具体的没有去试this.nextTick()主要用在随数据改变而改变的dom场景中, ...

TanMengyi的博客 1298

CMOS反相器版图设计全解析:PMOS/NMOS布局与VDD/VSS连接门道

版图设计是芯片从电路原理图迈向物理实现的必经桥梁,而CMOS反相器作为最基础的数字单元,恰好是理解这一过程的最佳切入点。在版图绘制中,PMOS与NMOS因导电类型和迁移率差异,需要在N阱与P衬底上分别规划,并呈现出不同的有源区尺寸。真正决定版图好坏的关键,往往在于VDD/VSS的完整连接——不仅要接通源漏,还要通过阱接触和衬底接触固定阱与衬底电位,防止寄生PN结正偏和闩锁效应。合理布局电源地线轨道、优化接触孔数量,能显著降低寄生电阻与电迁移风险。这些原理不仅适用于反相器,也是所有CMOS数字标准单元版图设计

weixin_29159441的博客 302

video:动态改变了source里src的视频路径,但是视频不显示问题

标签的时候,浏览器渲染之后会自动去获取地址,但是,即便地址改变了,浏览器也不会再去获取视频了。在浏览器里面,我们看到source里的src视频链接已加载出来了,可视频未显示。2.把操作dom ‘ id="myVideo " ’ 放在video标签上。1.把src放在video标签上。

Ygaidi的博客 4038

Win10+pycharm+conda 配置Siammask 过程记录(新手向)

我们跑动demo 需要配置两个相关的文件这两个文件需要用 git 进行下载,对于不熟悉git的小伙伴 我这里给出连接,大家可以直接下载即可,并将其配置在 experiments文件夹下然后大家再需要在设置参数参数这里给出了。

C1137577723的博客 551

CATIA二次开发一一一获取属性的几种方法

这些方法覆盖了CATIA CAA开发中属性操作的典型场景,开发者可通过类型判断实现递归遍历、跨文档关联等复杂逻辑。此方法用于遍历对象的所有属性,获取属性键后可通过类型判断选择后续处理方式。适用于处理嵌套对象或关联对象的场景(如几何特征关联制造特征)。适用于简单属性值的直接读取(如版本号、状态标识等)。用于处理多值属性(如多选参数、装配体子件列表等)。用于处理跨文档引用(如零件关联图纸文件)。

工业软件开发 431

【Vue】:解决动态更新 <video> 标签 src 属性后视频未刷新的问题

本文介绍了在 Vue.js 中遇到的动态更新 标签 src 属性后视频未刷新的问题及其原因,并提供了多种有效的解决方案。无论是简化代码结构还是使用 key 属性,都可以帮助您解决这个问题。根据具体的应用场景和个人偏好选择最适合的方案,确保视频组件能够及时响应用户操作并展示最新的内容。

寻找09之夏的博客 2077

【网络基础2】路由器的 “两扇门”:二层接口和三层接口到底有啥不一样?

家里的路由器背后总有几个网线接口,有的标着 “LAN”,有的标着 “WAN”;公司机房的路由器上,接口更是五花八门,有的插着网线,有的连着光纤,旁边还贴着 “GE0/0/1”“Eth-Trunk1” 这样的标签。你可能会想:不就是插网线的地方吗?有啥区别?其实,这些接口分 “二层接口” 和 “三层接口”,它们的作用差得远了 —— 就像你家的门,有的是 “小区内的单元门”(只通小区内部),有的是 “小区的大门”(能通往外面的世界)。接下来,咱们用大白话 + 生活例子,一点点把这两种接口讲透。

jundao1997的专栏 565

vue--video使用动态src时,视频不更新

在 Vue 项目中动态更新video标签的 src 属性时,可能遇到视频不刷新的问题。这是由于 Vue 的虚拟 DOM 更新机制对video和source标签的特殊处理导致的。这些方法能确保视频资源正确重载,适用于不同场景需求。

醉殇姒若梦遗年 ツ的博客 572

【网络安全 | 渗透工具】Hydra安装使用详细教程

Hydra,也称九头蛇,是一款非常强大的暴力破解工具(密码能否被破解关键在于字典是否足够强大),支持多种服务协议的账号和密码进行爆破,包括Web登录、数据库、SSH、FTP等服务,支持Linux、Windows、Mac平台安装。该工具支持以下协议的爆破:Hydra在kali中自带,这里介绍windows下的安装方法。zip下载地址:https://gitcode.com/maaaaz/thc-hydra-windows/tree/master下载完成后解压: 再将thc-hydra-windows-mast

等风来 9200

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

video怎么重新加载 vue_vue 事件中更改video的src成功,视频不加载

也试过改soucre,也是这个样子麻烦解惑,试了好几个小时了`HTML点击的地方@click="show3d('../assets/video/2.mp4')">插入视频的地方事件show3d(url) {var sourceDom = $('');$(".video").html();$(".video").append(sourceDom);$("#video-box").show();...

weixin_28998851的博客 853

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

html5 video标签切换url不生效,还是播放初始url的视频

最近在做一个桌面应用程序(一个基于electron的音乐播放器),在写mv播放界面时用到了video标签,代码如下: <video width="520" height="400" controls style="cursor: pointer" autoplay > <source :src="mvUrl" type="video/mp4" /> </video> 项目是用vue.js来构建UI的,如上图所示,source标签的src属性使用了vue的动态绑

weixin_42650595的博客 4081

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

Vue3 + Video.js 动态切换多窗口视频源的实现方案

本文详细介绍了如何在Vue3项目中集成Video.js实现多窗口视频播放与动态切换视频源的技术方案。通过组件化封装和响应式设计,开发者可以轻松构建支持动态更改src的专业级视频播放系统,适用于监控、在线教育等多种场景。文章包含完整代码示例和性能优化建议,帮助提升开发效率和用户体验。

2a4s6d8f0g的博客 186

Vue移动端H5多视频无缝切换实战:双video标签轮换与预加载方案

在移动端H5开发中,视频播放常面临切换黑屏、卡顿与声画不同步等问题,其根源在于硬件解码器的独占机制与浏览器渲染管线限制。通过双video标签轮换与预加载策略,可提前初始化解码器并缓冲数据,实现100毫秒内画面替换,同时避免音频残留。该方案适用于短视频流、在线教育及产品展示等场景,结合Vue组件化状态管理,有效提升播放流畅度与用户体验。

weixin_30861459的博客 251

Vue-Video-Player实现视频列表循环播放与无缝切换

视频播放是前端多媒体开发的核心场景之一,其原理基于HTML5 Video元素与现代浏览器的媒体播放能力。通过监听视频生命周期事件并动态管理播放源,开发者可以构建复杂的播放逻辑,如播放列表管理。这项技术的价值在于提升用户体验,实现流畅、连续的多媒体内容消费,广泛应用于后台管理系统、在线教育、媒体展示等需要连续播放多个视频的场景。本文聚焦于使用vue-video-player这一基于Video.js的Vue组件库,深入探讨如何实现视频列表的循环播放与无缝切换,并解决播放状态保持、黑屏卡顿等常见工程问题,其中涉及

weixin_33971721的博客 302

避坑指南:Vue3集成Video.js时动态更新src的3个常见错误

本文详细解析了Vue3集成Video.js时动态更新src的三大常见错误,包括内存泄漏、类型校验和状态同步问题,并提供了实战解决方案。通过正确的销毁实例、精确的类型匹配和中央状态管理,有效避免播放器卡死和内存飙升,提升视频播放的稳定性和性能。

weixin_27027459的博客 226

Vue+Ant Design实现动态多屏视频监控布局

本文详细介绍了如何使用Vue和Ant Design实现动态多屏视频监控布局,包括需求分析、环境搭建、核心布局实现及交互功能开发。通过Vue的响应式特性和Ant Design的栅格系统,开发者可以高效构建支持1/4/6/9等布局切换的九宫格视频监控系统,适用于安防监控、智能楼宇等场景。

weixin_30458043的博客 351

Vue 3项目中集成vue-videojs7播放M3U8视频的完整实践指南

在Web前端开发中,视频播放是常见的功能需求,而M3U8格式作为HLS(HTTP Live Streaming)协议的核心,广泛应用于直播和点播场景。其原理是将视频流分割成一系列小的TS文件切片,并通过M3U8索引文件进行管理,以适应不同网络条件下的自适应码率播放。然而,浏览器对HLS的原生支持存在差异,例如Safari支持较好,而Chrome、Firefox等则需要借助JavaScript库来实现兼容播放,这凸显了在前端项目中处理流媒体的技术价值。在实际应用场景中,尤其是在Vue.js这类现代前端框架构建

weixin_30907935的博客 374

Vue项目视频播放方案:原生video标签组件化实战解析

在Web开发中,视频播放是常见的功能需求。HTML5的video标签作为浏览器原生能力,提供了稳定可靠的视频播放基础,而Vue框架则通过响应式数据绑定和组件化机制,让开发者能够高效地构建可复用的视频播放模块。理解浏览器自动播放策略、跨域资源加载、视频格式兼容性等核心原理,是解决播放异常的关键。从简单的单视频嵌入到复杂的课程列表、多视频互斥播放场景,基于原生video标签的组件化方案都能以轻量、可控的方式满足需求。面对直播流或复杂交互时,再评估引入第三方播放器库。本文从工程实践角度,系统讲解Vue中封装视频播

weixin_33924312的博客 280

html5 video标签切换url不生效?用TaoToken统一Key排查source与load顺序

Vue 中 video 切换 mvUrl 不生效,根源在 source 资源锁定。改用 video 直接绑 src 并在 watch 里 nextTick 后调用 load(),即可强制重新加载。配合 TaoToken 统一 Key 辅助排查资源与生成组件骨架,官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 。

weixin_42612405的博客 187

vue-i18n 语言环境(locale)动态切换完全指南:从实例属性到组件级切换的响应式原理

本篇指南聚焦 vue-i18n 中 `locale` 属性的核心机制与实战用法:如何以 Vue 根实例为起点,通过 `VueI18n` 实例或组件内 `$i18n` 引用动态切换语言环境,并理解 `sync`、组件作用域与根作用域之间的差异。读完本文,你将掌握程序化切换语言、基于下拉框的语言切换器组件,以及 `locale` 变更如何触发整个组件树响应式重渲染的底层原理。 ## locale 属

gitblog_00455的博客 368
上一篇: 昆仑通态McgsPro 使用MQTT最详细步骤,经验总结
下一篇: Asp.Net MVC线上代码快速开发
Little_Code
博客等级 码龄10年 62粉丝 77原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值