vue 使用js获取video路径后视频不加载问题

最新推荐文章于 2024-08-26 00:15:00 发布

mzbxd

最新推荐文章于 2024-08-26 00:15:00 发布

阅读量3.4k

点赞数 1

文章标签： js vue

本文链接：https://blog.csdn.net/qq_45848226/article/details/107544050

版权

在Vue项目中，为提高封装性通常从后端动态获取视频资源路径。然而，当使用video.js组件并通过js更新路径后，video元素可能无法正确加载视频。解决方法是在获取到路径后调用video元素的load()函数来重新加载资源。

摘要由CSDN通过智能技术生成

在进行web开发时为了使封装性更好，前端方面的数据都要设置成动态，从后端获取后数据。
在使用video.js组件时，需要js从后端拿取网页资源，传给vodeo组件，在这个过程中会遇到一个问题，路径变量声明时未赋值，从后端获取数据修改路径变量后，video会获取到视频资源但是不会加载，因此要在获取之后加上load函数重新加载

<video 
      id="video1"
      class="video"
      preload="a

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mzbxd

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue/js动态更改video的source路径不起效

“明明很开心”的博客空间

04-01

5019

问题现象在vue项目中（或各网页），当我们需要用到video控件播放视频，当需要点击其他视频图片想要在主视频区域中播放时，在项目直接更改主视频的source文件路径（直接src不存在这个问题），发现视频并没有按我们想象中那样变成另一个视频路径播放。例如，在vue项目中我们这样写： <video> <source v-for="(type) in video" :key="ty...

vue在内网使用video，video-js.swf加载不到

weixin_51490706的博客

11-24

2927

现在做的一个项目在外网上播放video视频是没问题的，但是部署到服务器上，显示加载不到这个文件，会报错。先下载好video和flash，主要是需要npm install videojs-swf 然后在需要播放的视频页面引入在vue.config.js中然后重启项目就OK了 ...

参与评论您还未登录，请先登录后发表或查看评论

vue中video视频路径改变，dom不更新问题

最新发布

来一颗砂糖橘

08-26

428

vue中video视频路径改变，dom不更新问题

[Vue+NodeJS] 解决动态创建video播放不出本地视频的问题

H_O_W_E的专栏

12-22

2917

[Vue+NodeJS] 解决动态创建video播放不出本地视频的问题事由：如果写死了一个video设置了src值，可以正常播放，比如<video src="../assets/1.mp4"></video> 但是当用JS动态创建video元素，设置src值，却播放不出来。原因：路径问题导致的，解决：要用require()来解决，就是这个路径用require()括起来比如 var myVideo = document.getElementById(.

video标签无法加载视频，地址放入浏览器会直接下载的问题

m0_58680712的博客

06-27

2424

video标签无法加载视频，地址放入浏览器会直接下载的问题

在vue3中使用video.js, 切换m3u8时，无法切换一直加载的问题解决方法

w1olol的博客

01-29

1084

在vue3中使用video.js, 切换m3u8时，无法切换一直加载的问题

vue使用video.js进行视频播放功能

10-16

在Vue.js项目中，我们有时需要集成视频播放功能，这时video.js就成为一个很好的选择。video.js是一个强大的HTML5视频播放器库，它提供了丰富的自定义选项、皮肤和插件，支持H5视频以及Flash作为备用方案，确保在不同...

解决vue单页面应用打包后相对路径、绝对路径相关问题

11-20

在开发Vue单页面应用时，面对打包后的相对路径与绝对路径问题，主要是因为部署环境的差异和反向代理的需求。通常，默认情况下，Webpack与Vue CLI打包的资源引用使用的是绝对路径，这在本地开发和直接部署到服务器根...

Vue 自定义标签的src属性不能使用相对路径的解决

10-16

希望本文所述的内容能够帮助到遇到类似问题的Vue.js开发者，正确配置项目以解决自定义标签的src属性不支持相对路径的问题。同时，也希望读者能通过本文深入理解vue-loader的工作机制，以及如何根据项目需求灵活配置...

vue-video-player实现实时视频播放方式(监控设备-rtmp流)

10-14

接下来，设置 Video.js 的 Flash 路径，并配置 Vue-Video-Player 组件： ```javascript videojs.options.flash.swf = SWF_URL ``` 创建 Vue 组件，定义 `videoSrc` 和 `playerOptions` 数据属性。`videoSrc` ...

解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放

ywp2021的博客

11-14

6468

不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放的问题

vue.js点击获取按钮第一次获取不到数据，第二次才可以

weixin_34234721的博客

12-12

9571

今天做完项目提交，产品给我提了一个问题，说我这个第一次打开的时候总是获取不到数据，得第二次才可以。我测试了下，点第一次走了接口，结果一闪而过，然后啥都没了，我还打印了下，结果闪了一下就没了，经过仔细查找，才发现我的路径地址是 http://localhost:8080/?#/warship，莫名其妙的多了个 “？”，然后百度了一下说是页面...

Vue的video-player的视频无法加载出来，vue视频插件；显示叉号； The media could not be Loaded,

热门推荐

Zhu4010的博客

04-17

1万+

解决方法：require（）；

vue项目动态src ，video无法正常播放问题记录

qq_43399210的博客

05-07

6236

在vue2项目中，mp4视频地址由后端异步请求获取，使用静态的url时视频能够正常播放，异步请求获取视频地址，视频出现无法播放的问题。

vue3项目使用video标签刷新页面视频不播放只有切换页面才会播放问题

liangyi_8的博客

07-04

873

如果想要video标签内视频不全屏播放可以添加一个playsinline 属性。找了半天的原因是因为没有加上 muted 静音播放真的是被自己蠢哭了。刚刚一直在纠结为什么我写的视频标签页面一进去或者页面刷新就不加载视频。

vue动态修改video标签播放路径失效解决方法

成长笔记

05-26

1649

that.$refs.curVideo.src = that.currentVideoList[currentVideoIndex].video;

vue中使用video.js src切换不能播放的问题

snailmar的博客

12-08

6088

video.js在vue中切换视频的正确方式是 <video ref="videoPlayer" class="video-js" autoplay> </video> //初始化播放器 this.player = videojs( this.$refs.videoPlayer, this.options, fu...

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

weixin_30068377的博客

12-23

585

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

vue 视频video播放视频

03-02

要在Vue中播放视频，可以使用`<video>`标签，并通过Vue的数据绑定将视频源绑定到`src`属性上。例如，可以在Vue组件中使用以下代码来播放视频： ```html <video :src="videoSource" controls></video> ...