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

最新推荐文章于 2024-05-15 12:27:46 发布
最新推荐文章于 2024-05-15 12:27:46 发布
阅读量5.9k 收藏 3
点赞数
分类专栏： 前端 文章标签： vue video.js src切换无效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snailmar/article/details/103449499
版权

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

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


//初始化播放器
最低0.47元/天 解锁文章
麻烦让一让，我比较宽
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue通过video.js解决m3u8视频播放格式的方法
12-10
前言 今天被这个关于m3u8视频播放不了搞了一...网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后结果测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。小编已经亲自试验过 2.
解决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
vue使用vedio.js播放视频（切换视频源）
reofadu的博客
04-06 4522
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使用video组件src动态本地传值
最新发布
Hobart_Y的博客
05-15 319
vue视频组件本地动态 :src传值
video标签 视频暂停播放的问题，vue中同一个video标签中多个视频的播放问题
weixin_43162418的博客
12-08 2159
获取后来返回来的视频地址放在了elment的走马灯里面 进行自动切换 要求: 实现双击在弹窗中播放，弹窗大小【1000*550】(第一点) 原视频和弹窗内视频互斥，不可同时播放（第二点） 上传多个视频，左右切换时，不可同时播放（第三点） 鼠标移入走马灯不自动轮播，点击播放时不自动轮播，鼠标移出，走马灯开始自动轮播（第四点） <el-carousel v-else-if="samplingSceneVideofileList.length" height="300px"
vue中同一页面多个video播放问题
ju__ju的博客
04-14 5123
项目中同一页面中同时存在两个视频,播放A视频时,又播放B视频,声音会叠加,因此,需要在播放一视频时,将另一视频停掉. 此处视频路径是分开存储,因此 在播放对应视频时传入对应的参数,调用该方法时使用v-if判断一下即可 当视频地址是放在数组中存储时, html样式 <div> <div v-for="(item, index) in dataList" :key="index"> <div class="video"> .
video.js切换视频地址无法切换视频
qq_34179819的博客
08-02 616
在写大屏项目的时候碰到一个需求，就是将从后端获取到的监控视频地址，也就是m3u8类型的视频文件渲染到页面中，此时也就用到了video.js组件，video.js是通过配置项的形式将视频渲染上去，但是在不销毁组件的情况下，更新父组件传入的props.src,无法将切换后的视频渲染上去。后续只能通过在组件中动态绑定一个key的形式去判定组件为不同的组件，重新去渲染dom来达到视频重新渲染的效果。对于第一种失败的方法，我目前还没找到解决办法，如若有大佬看到此篇文章，帮助我答疑解惑一下！
vue3 videojs实现播放器，动态更改src
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-17 3120
1.vue框架更改对应数据data，对应的视图view变化。2.在封装的组件监听传参src的变化，如果点击的 src和之前的不同，进行切换资源，播放器重新加载播放；3.播放器的资源source的参数有src+type，注意type可以不设置。推荐用法：不设置type，如果要设置一定要更传过来的视频流的数据格式保持一致，否则会爆红。
一个简单的videoJs的vue2.0简单demo
07-01
首先，我们需要在项目中引入video.js和videojs-contrib-hls库，后者是video.js的一个扩展，专门处理HLS流。这通常通过npm或yarn进行： ```bash npm install video.js videojs-contrib-hls --save ``` 接着，在Vue...
EasyPlayer.js 在VUE中使用
05-22
下面我们将详细介绍如何在Vue项目中使用EasyPlayer.js，以及涉及到的相关配置文件`webpack.dev.conf.js`和`webpack.base.conf.js`的作用。 首先，我们需要了解Vue项目的构建流程。Vue.js项目通常使用Webpack作为...
vue视频播放插件vue-video-player的具体使用方法
10-16
本文将详细介绍如何在 Vue 项目中使用这个视频播放插件。 首先，要安装 `vue-video-player`，可以通过 npm 包管理器进行安装： ```bash npm install vue-video-player --save ``` 安装完成后，需要在项目中引入该...
vue项目中自定义video视频控制条的实现代码
11-21
在Vue项目中，自定义video视频控制条是一个常见的需求，特别是在提升用户体验方面。这个过程涉及到对HTML5 Video API的理解以及Vue.js组件的构建。以下是如何实现这个功能的详细步骤： 首先，我们需要创建一个Vue...
videojs组件通信实现播放地址传值
qq_28205003的博客
05-04 183
vue3组件通信
vue项目中videoPlayer 的 src 视频地址参数动态修改---方法
weixin_48374341的博客
03-20 5367
方法很简单：相信大家的问题应该是改变src的值吧，动态赋值这一步简单。 this.playerOptions[‘sources‘][0][‘src‘] 就是这一步解决提取src问题，主要部分用*号框起来了。 playerOptions 参数是一个字典对吧！修改字典中的值怎么做不用多说吧直接赋值就好了，下面方法 的重点就是取出src参数进行赋值。 你们视频的url从数据库通过动态获取过来的时候，直接赋值给这个字典中的src就行了，赋值方法：this.playerOptions[‘sources‘][0][‘s
Vue视频切换src，画面不变化的问题
Little_Code的博客
09-26 1371
vue 动态切换视频，视频画面不变化
Vue实现H5页面自动播放视频（安卓）
weixin_61945023的博客
06-09 2162
Vue实现H5页面自动播放视频（安卓）
【vue】el-carousel实现视频自动播放与自动切换到下一个视频功能：
SunPeng的博客
10-19 2171
【vue】el-carousel实现视频自动播放与自动切换到下一个视频功能：
2021-11-06 学习记录--Vue-实现页面之间切换后，不会改变原来的浏览位置，不会跳回到页面最顶部
weixin_48850734的博客
11-06 959
实现从A页面切换到B页面，再次切换到A页面时，不会自动跳转到A页面的最顶部，而是停留在A页面原来的浏览位置 造成原因：Vue自带一个属性：destroyed（销毁） 解决方法：用<keep-alive></keep-alive>进行包裹 如下图中最下面所示：有四个可切换的页面：首页（Home.vue）、分类（Category.vue）、购物车（ShopCart.vue）、我的（Profile.vue） 第一步、分析造成原因 假如在首页（Home.vue）页面里写入代码： // 销
video.js播放mp4画面黑屏
07-25
根据引用\[1\]和引用\[2\]的内容，EasyPlayer.js是一个网页直播/点播播放器，支持播放FLV格式的四分屏操作和单路视频流大屏播放。根据引用\[2\]中的代码，可以看出在使用EasyPlayer.js播放MP4视频时，需要使用`<video>`标签，并设置`source`属性为视频的URL，同时设置`controls`和`autoplay`属性来控制视频的播放和控制条的显示。如果视频画面出现黑屏，可能是视频源的问题或者播放器的设置问题。 根据引用\[3\]的内容，如果使用H265编码格式的HLS视频流播放出现黑屏问题，可能是视频源的编码格式不被播放器支持导致的。在这种情况下，可以尝试使用其他编码格式的视频源或者使用支持H265编码格式的播放器来播放视频。 综上所述，如果使用video.js播放MP4视频出现画面黑屏的问题，可能是视频源的问题或者播放器的设置问题。可以尝试检查视频源的编码格式是否被播放器支持，并尝试使用其他编码格式的视频源或者使用其他播放器来解决问题。 #### 引用[.reference_title] - *1* *3* [【疑难解决】H265编码流媒体播放器EasyPlayer.js播放HLS H265视频流，遇到黑屏如何排查？](https://blog.csdn.net/Black_3717/article/details/115717552)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue，uni-app，在app中动态切换video视频（黑屏）source标签src属性值不起作用问题](https://blog.csdn.net/qq_43787947/article/details/122094759)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值