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

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

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

<video 
      id="video1"
      class="video"
      preload="a
最低0.47元/天 解锁文章
mzbxd
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue/js动态更改video的source路径不起效
“明明很开心”的博客空间
04-01 4839
问题现象 在vue项目中（或各网页），当我们需要用到video控件播放视频，当需要点击其他视频图片想要在主视频区域中播放时，在项目直接更改主视频的source文件路径（直接src不存在这个问题），发现视频并没有按我们想象中那样变成另一个视频路径播放。例如，在vue项目中我们这样写： <video> <source v-for="(type) in video" :key="ty...
Vue3视频播放（Video）
Mr Dear的博客
03-07 1万+
Vue3+TS简易封装的视频播放组件
vue项目动态src ，video无法正常播放问题记录
qq_43399210的博客
05-07 4988
在vue2项目中，mp4视频地址由后端异步请求获取，使用静态的url时视频能够正常播放，异步请求获取视频地址，视频出现无法播放的问题。
vue H5项目中使用video标签无法播放视频，播放按钮也点不了，屏幕是黑的，解决方案
seeeeeeeeeee的博客
08-29 1万+
原始代码 <video src="@/video/qiang.mp4" controls="controls"></video> 显示结果 这样的，按钮都不能点，也不显示视频。 然后我测试发现我在我自己的私人项目中使用都是可以的，唯独放在公司的代码中就不行，我就怀疑是不是公司代码太老了或者有其他代码不知道在哪里影响我造成的的原因 解决办法 这样写，就是src前面加require引入，搞定！ <template> <div> <vid
vue中视频加载失败处理以及异常处理方式
热门推荐
weixin_44849078的博客
05-15 2万+
vue中视频加载失败的处理；处理方法onerror无效的解决方案。
video标签无法加载视频，地址放入浏览器会直接下载的问题
m0_58680712的博客
06-27 1724
video标签无法加载视频，地址放入浏览器会直接下载的问题
vue使用video.js进行视频播放功能
01-19
video.js是一个拥有h5背景的网络视频播放器，同时支持h5以及Flash视频播放（可加载本地静态资源视频以及网络链接视频） 官网：videojs.com/ 安装 npm install video.js main.js中引入 import Video from 'video.js...
关于vue.js发布后路径引用的问题解决
10-19
最近在vue.js项目发布后发现了一个关于路径的问题，发现网上关于这个的资料较少，所以给大家总结下，下面这篇文章主要给大家介绍了如何解决关于vue.js发布后路径引用的问题，需要的朋友可以参考借鉴，下面来一起看看...
vue视频播放插件vue-video-player的具体使用方法
10-16
总的来说，`vue-video-player` 是一个强大且易于使用的 Vue 视频播放插件，它提供了丰富的配置选项和功能，可以帮助开发者轻松地在 Vue 应用中实现视频播放功能。通过灵活运用，可以满足各种视频播放场景的需求。
vue img加载失败显示默认图片
小怪獸丶的糖的专栏
09-09 1160
<img :src="schimg" class="sch-pic" @error="headError" /> methods:{ headError(e) { e.target.src = require("../assets/img/pic-school.png"); }, }
vue视频播放video地址无法动态渲染视频 及本地图片的绑定
zmyalh的博客
12-02 1848
** vue使用video动态加载视频 ** 原始使用方式（地址会动态加载；视频不会动态加载） <video width="600" height="300" controls autoplay > <source :src="videos" type="video/mp4" /> </video> 修改方式 绑定video <video ref="video" controls controlslist=
vue动态修改video标签播放路径失效解决方法
成长笔记
05-26 1586
that.$refs.curVideo.src = that.currentVideoList[currentVideoIndex].video;
Vue的video-player的视频无法加载出来，vue视频插件；显示叉号； The media could not be Loaded,
Zhu4010的博客
04-17 1万+
解决方法：require（）；
Vue实现视频播放列表（三）02——使用video.js时，audiovideo标签动态绑定src属性，实现视频播放列表-动态切换视频封面、视频链接
weixin_44867717的博客
12-06 1926
Vue实现视频播放列表（三）02——使用video.js时，audio/video标签动态绑定src属性，实现视频播放列表-动态切换视频封面、视频链接 video.js官网——https://www.npmjs.com/package/video.js 效果 效果-视频列表目录 效果-视频列表播放 代码 index.vue <script lang="ts" setup> import { ref } from 'vue' const myVideo = ref()
关于使用video标签插入视频时，视频无法播放的问题
amercury0818的博客
01-03 7596
使用video标签插入视频，只显示了一个封面却无法播放视频
【记录处理Vue项目中Video.js播放不了MP4视频Bug】
最新发布
CH_Y的博客
03-07 2327
在Vue项目中使用Video.js播放MP4视频。视频采集上来存在数据库，前端使用Video.js对视频进行播放。并发现前一时间段采集到的MP4视频可以播放，最近的采集的视频不能播放。记录处理Video.js不能播放MP4的bug。
vue在内网使用video，video-js.swf加载不到
weixin_51490706的博客
11-24 2759
现在做的一个项目在外网上播放video视频是没问题的，但是部署到服务器上，显示加载不到这个文件，会报错。 先下载好video和flash，主要是需要npm install videojs-swf 然后在需要播放的视频页面引入 在vue.config.js中 然后重启项目就OK了 ...
vue-video-playe的使用并获取封面(视频第一帧)显示到播放器及上传到oss
m605479037的博客
08-30 5911
先上代码： <template> <div ref="faultTree"> <video-player id="videoPlayer" class="video-player vjs-custom-skin" :playsinline="true" style="object-fit:fill" crossOrigin="Anonymous" :options="playerOptions"
vue 视频video播放视频
03-02
要在Vue中播放视频，可以使用`<video>`标签，并通过Vue的数据绑定将视频源绑定到`src`属性上。例如，可以在Vue组件中使用以下代码来播放视频： ```html <video :src="videoSource" controls></video> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值