轮播swiper中加视频video滑动不顺畅报错 property on ‘HTMLMediaElement‘: The provided double value is non-finite.

已于 2022-10-28 10:28:15 修改
阅读量3.7k 收藏 1
点赞数 2
文章标签： vue.js css3 es6 javascript css
于 2021-01-25 14:34:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TAAAAAB/article/details/113111682
版权

轮播swiper中加视频video滑动不顺畅报错TypeError: Failed to set the ‘currentTime’ property on ‘HTMLMediaElement’: The provided double value is non-finite.

在视频这里插入图片描述轮播图swiper中要求加图片和视频，swiper手动滑动时出现报错，并且滑动不顺畅
在这里插入图片描述找了很多地方测试了很多，发现是手动滑动轮播时触发到了video标签的事件
在这里插入图片描述
将video滑动事件禁用解决
在这里插入图片描述

super5⁢
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
swiper-bundle.min.js
06-21
swiper-bundle.min.js
Video-Lightbox:一个 wordpress 插件，可以在灯箱中播放视频
07-02
视频灯箱 一个 wordpress 插件，可以在灯箱中播放视频
Uncaught TypeError: Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not of type ‘El
小哈力----一个小前端工程师
07-03 1万+
swiper报错如下 Uncaught TypeError: Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’. 原因及解决办法： 如下代码的加粗位置的元素必须是 .swiper-container，否则就会报错，并且轮播无法使用 ··· var indexBanner = ...
谷歌浏览器中设置控件video的currentTime无效
qq_42858057的博客
04-21 1069
在网页中实现视频课程功能，重点是要能够保存用户的观看进度。比如，用户观看一个视频，这个视频看到2秒，这时用户离开此页面，下次打开这个视频，这个视频就要从2秒开始播放。
Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element
热门推荐
阿涩的博客
07-30 2万+
Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. 这个错是给input的file赋...
报错：property on ‘HTMLMediaElement‘: The provided double value is non-finite.
weixin_45898996的博客
12-09 1565
property on ‘HTMLMediaElement‘: The provided double value is non-finite.
如何使Swiper的无限自动轮播更流畅，没有停顿感！
m0_67053382的博客
09-15 1753
相信大家都用过Swiper的无限自动轮播吧，虽然基本的功能能满足大部分需求，但是它轮播的时候明显有停顿感，这个时候给别人的视觉感受就不是很好了。这允许你更精确地控制过渡的速度曲线。时间函数可以影响过渡的速度曲线，使得过渡可以是线性的、缓慢开始、缓慢结束、或者有弹性效果等。：这是默认的时间函数，它提供了一种缓慢开始和结束的效果，通常用于使过渡看起来更加自然。：线性时间函数表示属性值在整个过渡期间都是以相同的速度变化，没有缓慢开始或结束的效果。的变体，它提供了一个较慢的开始和结束，中间部分是较快的。
uni-app，swiper轮播图片加视频卡顿问题
luozaiyong的博客
03-09 1239
uni-app，swiper 包涵video标签滑动卡顿问题
uniapp中swiper的大坑，在swiper-item中嵌套video在移动端无法实现上下滑动的，要用nvue代替，从而实现抖音滑视频效果
07-25 7581
在移动端的时候，就会出现虽然切换到第二个视频了，声音也出来了，但是画面就是没有动。研究了一天，发现在swiper-item中嵌套视频时，移动端只能滑动切换背景，视频在原位置是不会动的。那就只能这么写了，为什么不动态设置宽度呢？为移动端创建单独的页面包括视频组件也是要单独创建一个nvue的。想做一个抖音滑屏切换视频的效果，结果。为什么要动态设置这个高度呢？使用nvue的教程；......
15个有用的WordPress的lightbox插件
weixin_30527143的博客
04-11 217
原文地址：http://www.goodfav.com/zh/wordpress-lightbox-plugin-3568.html 关于WordPress的lightbox插件，它通常是一个非常简单呈现图像，视频和HTML内容的方式，是为了吸引更多的注意。基本上，一个WordPress的lightbox插件就像任何其他扩展，例如Lightbox jQuery插件，唯一的区别是在一般情况下，Wo...
swiper-bundle.min_swiper-bundle.min_swiper-bundle_Modified_jquer
10-02
A Modified Jquery Library which include app inventor capabilities
video.js-swipe视频进度 自动轮播特效.zip
09-09
swiper视频自动播放，自动切换，视频加图片轮播特效，效果拿来就能用，简单好用
swiper-video:用react和antd-mobile实现类似抖音上下滑动视频的效果
05-06
在h5中实现一个类似于抖音中可以上下滑动观看视频的效果。 将自己工作中经常碰到的组件归类 2、依赖 react， antd-mobile, axios 3、启动项目 npm install cd app npm run start / npm run build 4、视频数据来源 ...
swiper移动端触屏滑动图片轮播切换代码.zip
07-11
swiper.js移动端banner图片轮播插件制作带索引的左右按钮控制图片轮播切换、触屏滑动图片切换、响应式的图片切换代码。
swiper-4.5.0.zip
05-14
用于移动端网站开发的 swiper-4.5.0！Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用...
解决Angular.js中使用Swiper插件不能滑动的问题
10-18
下面小编就为大家分享一篇解决Angular.js中使用Swiper插件不能滑动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome...
js滑动插件swiper-4.4.2.zip
11-09
js滑动插件swiper-4.4.2.zip
微信小程序触摸内容滑动解决方案we-swiper.zip
最新发布
01-15
这种数据驱动的方法有助于减少不确定性，提高决策的准确性。 团队协作： 复杂的问题通常需要多个人的协同努力。方案提供了一个共同的框架，帮助团队成员理解各自的职责和任务，促进协作并确保整个团队朝着共同的...
tarball tarball data for vue-awesome-swiper@http://172.168.251.67:4873/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz
08-31
引用:npm ERR! 404 Not Found - GET https://registry.npmmirror.com/@vue/vue-loader-v15 - [NOT_FOUND] @vue/vue-loader-v15 not found vue 安装npm i element-ui -S 等 组件 报错 npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmmirror.com/@vue/vue-loader-v15 - [NOT_FOUND] @vue/vue-loader-v15 not found npm ERR! 404 npm ERR! 404 '@vue/[email protected]' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 It was specified as a dependency of '@vue/cli-service' npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. 根据引用的内容,这个错误是由于找不到vue-awesome-swiper的tarball数据所导致的。vue-awesome-swiper的tarball数据位于http://172.168.251.67:4873/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [npm install -g cnpm --registry=https://registry.npm.taobao.org报错](https://blog.csdn.net/qq_36853469/article/details/99900961)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [ist的matlab代码-gitlab-uberspace-tutorial:如何在https://uberspace.de上安装GitLab](https://download.csdn.net/download/weixin_38543120/19078868)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [ 404 Not Found - GET https://registry.npmmirror.com/@vue%2fvue-loader-v15 - [NOT_FOUND] @vue](https://blog.csdn.net/qq_51307593/article/details/127484795)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值