vue项目中使用video组件踩坑记录

最新推荐文章于 2024-05-28 11:01:06 发布
最新推荐文章于 2024-05-28 11:01:06 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43408592/article/details/107673279
版权

vue项目中使用video组件踩坑记录

欢迎访问我的博客与我讨论vue项目中使用video组件踩坑记录

在项目中需要用到video标签，踩了一些没有直接写出的坑，特做此记录一下

无法加载本地文件

因为之前一直使用webpack进行开发没有注意到这个问题，这次只使用单文件开发注意到因为浏览器限制原因是无法直接加载本地视频，只有把文件传到服务器上才能加载

自动播放失效

autoplay属性在Chrome上失效，添加静音muted后正常

html事件在vue中调用

想调用onended事件，但是在vue中使用@onended失效，对于所有html原生事件在vue中调用需要把前缀on去掉即@ended即可调用

良辰良辰良
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的video
mengxiaoxihoulai的博客
08-01 5755
获取当前播放时间：$('video').currentTime ended 属性返回音频/视频是否已结束。 myVid.ended 返回true/false paused 属性返回音频/视频是否已暂停。 play() 方法开始播放当前的音频或视频。 pause() 方法停止（暂停）当前播放的音频或视频。 timeupdate 当目
关于获得audio标签播放次数时的loop属性和ended方法之间的问题
weixin_46640565的博客
05-04 2182
vue中，audio标签如果给了loop=“loop”，再给它添加@ended事件，那么当前audio标签的ended事件是不会触发的，因为播放并没有结束，如果需要在loop为true的情况下统计audio的播放的次数，有一个简单的办法就是定义一个变量，在audio的@updatetime方法中再判断this.refs.audio.cureentTime==this.refs.audio.cure...
Vue中实现视频播放——vue-video-player、dplayer
热门推荐
m0_46318298的博客
08-11 2万+
2、一些常见的函数和参数使用，完整代码如下。一、vue-video-player。
Vue2 封装 Video 视频播放组件
最新发布
FitnessSnail的博客
05-28 594
在 VueVideo.vue 中创建方法，通过组件事件传递。在 .Vue文件中动态传入需要更换的 URL。来判断，当数据请求到才会执行加载。
video 自定义视频播放控件
细节怪的博客
02-21 9006
自定义视频播放控件，控件位置可随意放置
vue中关于audio的onended事件实现
YanHSama的博客
08-10 6000
在vue中使用 audio有一个属性ended，用来判断音频是否已播放结束 <audio :src="musicUrl" controls autoplay @ended="handleNext();handleLyric()"></audio> 当音频结束时，要进行某些操作。便使用onended事件 // 自动播放下一首 handleNext () { let songmids = this.$store.state.songmids let
vue video 播完第一个视频以后,再无缝衔接第二个视频并循环播放
qq_39549013的博客
09-08 6725
vue video 播完第一个视频以后,再无缝衔接第二个视频并循环播放
vue 项目中使用Loading组件的示例代码
10-18
主要介绍了vue 项目中使用Loading组件的示例代码，使用 loding 过渡数据的加载时间
在vue组件中使用axios的方法
08-27
在Vue组件中使用Axios的方法 在Vue项目中，Axios是一个非常流行的 HTTP 客户端库，用于发送 HTTP 请求。那么，在Vue组件中如何使用Axios呢？下面我们将详细讲解如何在Vue组件中使用Axios。 首先，在使用Axios之前...
详解vue中使用protobuf踩坑记
10-17
在本文中，我们将探讨如何在 Vue 项目中使用 protobuf，并解决可能遇到的问题。 首先，protobuf 允许我们在多种编程语言之间交换结构化数据，且在更新数据结构时不会破坏已经部署的程序。它的主要特点包括：数据...
详解如何在vue项目中引入elementUI组件
08-28
Vue项目中引入ElementUI组件详解 ElementUI是一个基于Vue...本文详细介绍了如何在Vue项目中引入ElementUI组件，并使用ElementUI组件创建了一个美观的Header组件。希望本文能够帮助开发者快速构建高质量的Web应用程序。
Uniapp video timeupdate计时器代替@ended提交视频进度
qq_33920944的博客
11-15 1538
由于uniapp 在Hbuilder打包后可能导致viedo组件@ended无法触发的问题，不能完成视频；除此之外，还有可能需要的视频未完整播放不可拖动功能,但是已经播放过的视频可以随意拖动。
uniapp的video监听不到@ended事件
fuyao_ipg的博客
04-06 748
loop值设置为false。
vue中使用video标签禁止拖动进度条
weixin_53124862的博客
07-15 2380
开发过程中经常遇到一些出乎意料的事，那就简单的记录一下吧！注意：这里根据需求最大可接受快进的秒数。1.在template模板里。废话不多直接上正题。目前使用的是vue2。
关于vue项目中使用video.js以及遇到的问题
qq_36396584的博客
09-25 2806
一、首先npm video.js `npm install video.js` 二、在main.js中引入 import Video from 'video.js'; import 'video.js/dist/video-js.css';* （不知道什么原因在实际的项目中video-js.css并没有被引入进来，于是在idnex.html中引入了 <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"/
vue audio loop=true时ended事件不监测，audio播放地址一样时不继续播放
cmdecsdn的博客
05-13 1525
当我做一个循环列表播放广播时，有两段文字一样，然后audio就停了，也不监测ended事件，然后我试着当它一样时设置loop=true，这样它就会重复播放，结果loop=true时它就不监测ended事件了，因为这时audio播放文件它是没有播放完毕的。 经测试，当有两段播放地址一样时，它会暂停，我们可以动态再播放它 if(this.audioUrl == this.audioUrlList[0]){ console.log('与上一条播放一样') this.$ref
vue项目中video标签的动态路径使用方法及里面的坑
m0_64994045的博客
11-01 1721
vue项目中video标签的动态路径使用方法及里面的坑
VUE动态绑定audio/video/img的 本地资源不显示
z459148345的博客
03-08 1636
闲着没事写个音乐播放控件 在动态切换歌曲事发现一个一个问题就是，audio标签中src我引用的路径也是正确的 但是就是播放不了这就很难受了 通过我不懈的寻找终于找到了： 1.在webpack中会将图片图片来当做模块来用 2.url-loader将直接将:src=" ‘…/…/assets/images/’+item.url+’.jpg’ "解析成字符串，因为是动态加载的，所有无法解析图片地址 3.然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径
vue 使用js获取video路径后视频不加载问题
qq_45848226的博客
07-23 3343
在进行web开发时为了使封装性更好，前端方面的数据都要设置成动态，从后端获取后数据。 在使用video.js组件时，需要js从后端拿取网页资源，传给vodeo组件，在这个过程中会遇到一个问题，路径变量声明时未赋值，从后端获取数据修改路径变量后，video会获取到视频资源但是不会加载，因此要在获取之后加上load函数重新加载 <video id="video1" class="video" preload="auto" disablePictureInP
vue中如何使用react组件
05-19
虽然 Vue 和 React 都是用于构建用户界面的 JavaScript 库，但它们之间的语法和用法有很大的区别，因此直接在 Vue 中使用 React 组件并不是一个好主意。不过，你可以通过将 React 组件包装在 Vue 组件中的方式来在 Vue 项目中使用 React 组件。 具体来说，可以按照以下步骤来实现： 1. 安装 `react` 和 `react-dom` 依赖 ``` npm install react react-dom --save ``` 2. 编写一个 Vue 组件，并在其中使用 `vue-react` 组件 ```javascript <template> <div> <vue-react :component="MyReactComponent" /> </div> </template> <script> import { VueReactive } from 'vue-react'; import React from 'react'; export default { name: 'MyVueComponent', components: { VueReact: VueReactive, }, data() { return { MyReactComponent: null, }; }, mounted() { this.MyReactComponent = () => <div>Hello React!</div>; }, }; </script> ``` 在上面的例子中，我们首先导入了 `vue-react` 组件，并定义了一个名为 `MyVueComponent` 的 Vue 组件。该组件中包含了一个名为 `VueReact` 的子组件，并通过 `:component` 属性将一个 React 组件传递给该子组件。 在 `mounted` 钩子函数中，我们将一个 React 组件定义为一个返回 `<div>Hello React!</div>` 的函数，并将其赋值给 `MyReactComponent` 变量。 3. 在 Vue 项目中使用该组件 最后，我们可以像使用普通的 Vue 组件一样在 Vue 项目中使用该组件： ```javascript <template> <div> <MyVueComponent /> </div> </template> <script> import MyVueComponent from '@/components/MyVueComponent'; export default { name: 'App', components: { MyVueComponent, }, }; </script> ``` 在上面的例子中，我们通过 `import` 语句导入了 `MyVueComponent` 组件，并在 Vue 实例中注册了该组件。然后，我们就可以在模板中使用该组件了。 需要注意的是，由于 Vue 和 React 的生命周期钩子和状态管理方式不同，因此在将 React 组件包装在 Vue 组件中时需要格外小心。如果你需要在 Vue 项目中使用 React 组件，建议花一些时间学习如何正确地包装它们。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值