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

最新推荐文章于 2024-04-07 10:25:47 发布
最新推荐文章于 2024-04-07 10:25:47 发布
阅读量6k 收藏 3
点赞数
分类专栏： 前端 文章标签： vue video.js src切换无效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snailmar/article/details/103449499
版权
在Vue项目中使用video.js时遇到src切换无法播放的问题。文章指出，直接通过原生video元素切换源会导致video.js的监听方法失效。为了解决这个问题，建议避免直接操作video元素，而是采用video.js提供的API进行视频源的切换。
摘要由CSDN通过智能技术生成

video.js在vue中切换视频的正确方式是

<video ref="videoPlayer" class="video-js" autoplay> 
    </video>


//初始化播放器
最低0.47元/天 解锁文章
麻烦让一让，我比较宽
关注
专栏目录
vue/js动态更改video的source路径不起效
“明明很开心”的博客空间
04-01 4985
问题现象 在vue项目中（或各网页），当我们需要用到video控件播放视频，当需要点击其他视频图片想要在主视频区域中播放时，在项目直接更改主视频的source文件路径（直接src不存在这个问题），发现视频并没有按我们想象中那样变成另一个视频路径播放。例如，在vue项目中我们这样写： <video> <source v-for="(type) in video" :key="ty...
video.js切换视频地址无法切换视频
qq_34179819的博客
08-02 750
在写大屏项目的时候碰到一个需求，就是将从后端获取到的监控视频地址，也就是m3u8类型的视频文件渲染到页面中，此时也就用到了video.js组件，video.js是通过配置项的形式将视频渲染上去，但是在不销毁组件的情况下，更新父组件传入的props.src,无法将切换后的视频渲染上去。后续只能通过在组件中动态绑定一个key的形式去判定组件为不同的组件，重新去渲染dom来达到视频重新渲染的效果。对于第一种失败的方法，我目前还没找到解决办法，如若有大佬看到此篇文章，帮助我答疑解惑一下！
js切换video的src
weixin_33834910的博客
03-05 2555
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3 videojs实现播放器，动态更改src
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-17 3630
1.vue框架更改对应数据data，对应的视图view变化。2.在封装的组件监听传参src的变化，如果点击的 src和之前的不同，进行切换资源，播放器重新加载播放；3.播放器的资源source的参数有src+type，注意type可以不设置。推荐用法：不设置type，如果要设置一定要更传过来的视频流的数据格式保持一致，否则会爆红。
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.js的使用和:src绑定失效问题解决
qq_45228330的博客
02-17 1066
Vue中video.js的使用和问题解决 一、安装 npm install --save-dev video.js // 或者使用淘宝镜像 cnpm install --save-dev video.js 二、在main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 三、使用 <video id="videoPlay" Controls="tru
vue通过video.js解决m3u8视频播放格式的方法
12-10
前言 今天被这个关于m3u8视频播放不了搞了一...网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后结果测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。小编已经亲自试验过 2.
vue中使用video.js播放m3u8格式的视频(可切换视频)
盛典
02-25 4081
vue中使用video.js播放m3u8格式的视频 下载video.js yarn add video.js yarn add videojs-contrib-hls // 播放hls流需要的插件（关键） 在main.js中引入video.js // 引入videojs import Video from 'video.js' import 'video.js/dist/video-js.css' import 'videojs-contrib-hls' Vue.prototype.$video = Vi
Vue结合Video.js播放m3u8视频流的方法示例
10-18
首先，要实现这一功能，需要在Vue项目中安装Video.js和videojs-contrib-hls这两个npm包。通过npm安装这两个依赖，可以使用如下命令： npm install --save video.js npm install --save videojs-contrib-hls 安装...
vue3 + video.js 加载多种视频流(HLS、FLV、RTMP、RTSP)封装开箱及用，发布npm
最新发布
l976689的博客
04-07 5237
上一偏我们使用vue3和vite封装了一个audio插件发布npm官网，这里我们将封装一个视频video插件并发布npm供大家参考提示：下面不涉及新建项目和打包npm流程，需要的请看上一篇vue3 + vite自定义封装vue+audio ，并发布到npm详情介绍。
在vue3中使用video.js, 切换m3u8时，无法切换一直加载的问题解决方法
w1olol的博客
01-29 1034
在vue3中使用video.js, 切换m3u8时，无法切换一直加载的问题
videojs第一次打开视频切换页面后无法播放
m0_67021283的博客
04-28 755
videojs第一次打开视频切换页面后无法播放
Vue中video.js踩坑日记 单页切换后视频无法播放
ChenXj0.0的博客
09-09 3058
使用video.js踩坑。单页切换后视频无法播放 切换页面以后正常显示效果 但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了？？ 解决思路 在生命周期beforeDestroy函数中销毁创建的video实例。 html代码 <div class="videoListBox"> <ul class="videoList"> <li v-for="(item,i) in videoList" :k
video.js 动态切换视频流无效（FLV等类型）
qq_17627195的博客
08-29 1246
需要动态切换FLV视频流，但是换了地址后，视频无法播放，使用的代码如下。（一些其他类型也可以通过下面方法解决问题）切换地址的时候，将播放器的dom删除，然后添加新的dom，在重新初始化播放器就可以了。
Vue视频切换src，画面不变化的问题
Little_Code的博客
09-26 1530
vue 动态切换视频，视频画面不变化
vue使用vedio.js播放视频（切换视频源）
reofadu的博客
04-06 4787
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
vue 使用js获取video路径后视频不加载问题
qq_45848226的博客
07-23 3425
在进行web开发时为了使封装性更好，前端方面的数据都要设置成动态，从后端获取后数据。 在使用video.js组件时，需要js从后端拿取网页资源，传给vodeo组件，在这个过程中会遇到一个问题，路径变量声明时未赋值，从后端获取数据修改路径变量后，video会获取到视频资源但是不会加载，因此要在获取之后加上load函数重新加载 <video id="video1" class="video" preload="auto" disablePictureInP
vue-video-player 点击进度条时，如果看过了就可以返回没看过继续播放不允许点击...
weixin_42576186的博客
02-15 581
如果您使用的是 vue-video-player 播放器，在点击进度条时，如果已经看过了该部分视频，那么将不允许返回未看过的部分继续播放。这是因为该播放器会记录您已经观看的视频部分，以便下次播放时继续从您停止观看的位置开始播放。如果您需要返回之前的部分重新观看，您可以通过手动拖动进度条或者使用播放器自带的倒回/快进按钮实现。 ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值