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

最新推荐文章于 2023-09-17 10:36:10 发布
最新推荐文章于 2023-09-17 10:36:10 发布
阅读量3.5k 收藏 3
点赞数 7
文章标签： javascript 开发语言 ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ygaidi/article/details/128014468
版权

1.dom


<video class="warn-slider-img">
	<source id="myVideo0" src=""  type="application/x-mpegURL">
</video>

​

2.动态改变src

​
$('#myVideo0').attr('src','http://36.137.3.207:8765/hls/xmg_14.mp4')

 在浏览器里面，我们看到source里的src视频链接已加载出来了，可视频未显示。

答案来了：

当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，但是，即便地址改变了，浏览器也不会再去获取视频了。

1.把src放在video标签上

<video class="warn-slider-img" src="http://36.137.3.207:8765/hls/xmg_14.mp4"></video>

2.把操作dom ‘ id="myVideo " ’ 放在video标签上

<video class="warn-slider-img" id="myVideo0">
	<source src="" type="application/x-mpegURL">
</video>

_木棠
关注
vue动态绑定video视频src问题解决
jijingzhilin的博客
01-22 5024
做个项目，视频部分需要先后台上传，然后前端页面显示，然后就遇到了视频动态获取地址的问题。 一开始想着很简单，使用v-model双向绑定就行了，结果试了下并不行。 后面开始度娘，尝试过很多人说的$refs解决，结果并不行，虽然浏览器中看地址确实绑定到source的src上了，但是还是显示不了。 既然绑定src没法解决，干脆重新生成html放进去，于是想到用之前用过的v-html来解决。 具体代码： <b-embed type="video" controls v-html="videoUrl">
vue/js动态更改video的source路径不起效
“明明很开心”的博客空间
04-01 5015
问题现象 在vue项目中（或各网页），当我们需要用到video控件播放视频，当需要点击其他视频图片想要在主视频区域中播放时，在项目直接更改主视频的source文件路径（直接src不存在这个问题），发现视频并没有按我们想象中那样变成另一个视频路径播放。例如，在vue项目中我们这样写： <video> <source v-for="(type) in video" :key="ty...
video标签src动态赋值后视频无法正常显示
weixin_41796860的博客
08-27 4071
video标签中src从后台获取回来后视频仅仅是转了个圈，无法正常播放，代码如下： <video width="100%" height="572" controls muted="muted" autoplay="autoplay"> <source :src="url" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。 <
解决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
vue3 videojs实现播放器，动态更改src
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-17 3742
1.vue框架更改对应数据data，对应的视图view变化。2.在封装的组件监听传参src的变化，如果点击的 src和之前的不同，进行切换资源，播放器重新加载播放；3.播放器的资源source的参数有src+type，注意type可以不设置。推荐用法：不设置type，如果要设置一定要更传过来的视频流的数据格式保持一致，否则会爆红。
动态修改video.js的src
weixin_42788847的博客
11-23 4949
动态修改video.js的src <video id="videoid" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" poster=""> <source src="" type="application/x-mpegURL"> </video> <script>
动态修改原生js jquery中video.js的src属性
m0_61639310的博客
06-13 1751
直接通过操作元素修改video 或source的src属性 可能会造成修改成功 实际上页面并没有生效的问题，建议使用 videoJS 的 api 中的 src 方法进行修改
Vue 自定义标签的src属性不能使用相对路径的解决
10-16
在Vue.js开发中，自定义标签的src属性通常用来指定资源路径，比如图片、视频等资源。然而，在某些情况下，自定义标签的src属性可能无法使用相对路径，而需要使用require()函数来动态加载资源。这个问题主要与vue-...
解决！html中使用video标签调用本地视频结果只有音频没有视频画面
11-10
然而，有时候可能会遇到一个问题，即使用`<video>`标签加载本地视频时，只有音频可以播放，但视频画面无法正常显示。这种情况可能是由多种因素引起的，让我们详细探讨一下可能的原因及解决方案。 首先，确保你的...
html5 video src参数,vue 中使用html5 video标签动态获取src报错
weixin_27038261的博客
06-29 1017
在使用vue并配合elementUI开发中，将video放到一个弹窗插件中，页面的渲染正常，能够获得src，但是控制台报：GET http://xxxx.xxx.xxxx.com/vide... 403 (Forbidden)碰撞上传上传记录{{phone}}{{num}}{{ scope.row.createdDateStr }}{{ scope.row.size }}{{activeBtn}}...
视频 embed标签动态改变Src的值，局部刷新播放其他视频的javascript方法
weixin_30462049的博客
05-27 197
看图： 视频处html代码： 1 <div id="mod_player" class="mod_player"> 2 <embed id="evideo" src="http://static.video.qq.com/TPout.swf?vid=d0110upcugq&auto=1" allowfullscreen="true" quality=...
更换了视频URL地址视频没有更新
m0_61848095的博客
09-17 388
最近在写video播放器，用到了video.js，我封装好之后使用的时候一切正常，但是我如果点击切换视频的时候，视频还是上个视频，但是URL已经变了，因此我加入了key属性,key组件绑定的URL地址，当URL地址变换的时候，dom也会变换。
video.js 动态切换视频流无效（FLV等类型）
qq_17627195的博客
08-29 1307
需要动态切换FLV视频流，但是换了地址后，视频无法播放，使用的代码如下。（一些其他类型也可以通过下面方法解决问题）切换地址的时候，将播放器的dom删除，然后添加新的dom，在重新初始化播放器就可以了。
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...
解决vue 异步获取接口数据 动态绑定 video标签src属性失效的问题方法集合
我总是词不达意的博客
05-23 3533
动态绑定 video标签src属性失效
解决video标签在浏览器上无法显示画面的问题
qq_45803168的博客
05-25 6567
解决video标签在浏览器上无法显示画面的问题 MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 解决方案：修改视频的编码格式 首先下载QQ影音 用QQ影音打开出现问题的视频，先暂停，点击如下按钮 按如上图所示修改相应参数，点击添加文件可以同时修改多个文件的编码格式。选择转码后文件的保存路径，点击开始即可。 再次使用video标签，选择转码后的视频路径即可在浏览器中看见视频画面啦。 ...
解决iphone在微信内置浏览器中看不到video标签
Rudon滨海渔村的博客
09-13 1508
完整可用video代码 <video class="video-source" width="100%" height="100%" controls muted preload autoplay style="object-fit:fill" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-play
H5 视频作为背景 source src改变后 循环播放的问题笔记
weixin_30779691的博客
06-01 233
今天要做一个效果，但是遇到很蛋疼的问题，最后终于解决了，感谢热心帮助的朋友，于是记下笔记，万一能帮到别的朋友呢！需求：video作为网页背景，但是要定时更换video的视频注意点：1、html的video的source替换src后，要执行load方法和play方法才能播放，否则虽然src换了，但是并不播放 （感谢 folrvu 的指导 ）html部分： <video :s...
videojs播放m3u8后缀视频Demo
WOW_OMG的博客
12-01 1万+
videojs播放m3u8后缀视频Demo 转载自：https://segmentfault.com/a/1190000024447688 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端播放m3u8格式视频</title> <!--https://www.bootcdn.cn/video.js/-->
vue中video访问电脑本地视频路径
最新发布
09-10
在Vue项目中，如果你希望使用`<video>`标签访问电脑本地的视频文件，需要注意浏览器的同源策略（Same-origin policy），它会限制网页之间的相互操作，特别是对本地文件的读取会有安全限制。 不过，你可以通过创建一个本地的服务器来绕过这个限制。使用Node.js配合一些开发工具（如webpack-dev-server、http-server等）可以快速搭建本地服务器。下面是一些基本步骤： 1. 安装Node.js和npm（Node.js的包管理器）。 2. 在项目文件夹内创建一个`package.json`文件（如果还没有的话），并安装所需依赖，例如webpack-dev-server： ```bash npm init -y npm install webpack-dev-server --save-dev ``` 3. 在`package.json`中添加脚本来启动服务器，例如： ```json "scripts": { "start": "webpack-dev-server --open" } ``` 4. 修改webpack配置文件（如`webpack.config.js`），添加devServer配置： ```javascript module.exports = { // ... devServer: { contentBase: './dist', // 指定本地服务器的静态文件根目录 host: 'localhost', port: 8080, // 其他配置... } }; ``` 5. 启动服务器： ```bash npm run start ``` 6. 现在你的Vue项目应该在`http://localhost:8080`上运行。你可以通过这个地址来访问你的视频文件，例如： ```html <video controls> <source src="/path/to/your/local/video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ``` 请注意，直接通过文件系统路径（如`file:///C:/path/to/your/local/video.mp4`）通常无法在浏览器中直接访问，必须通过服务器来提供服务。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_木棠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值