autoplay

swiper在vue项目中的循环轮播bug以及点击事件

一世执手 提交于 2019-12-03 04:48:57
 一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播、自动播放都比较正常。   但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽。   解决办法:在从后台获取完数据之后再初始化swiper,同时启动动态检查器observer,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper,默认是false。这时候使用autoplay开启自动播放是可以的,    然而 当加上loop让其循环播放时,会发现是有问题的。如果不要循环播放的话,上述方法勉强可行,但是如果想要自动播放与循环轮播同时生效的话,还得另寻他法。   解决方法:在获取完数据后,将swiper放在$nextTick下一个UI帧再初始化。 this.$nextTick(() => { // 下一个UI帧再初始化swiper this.initSwiper(); });   然后在initSwiper方法中,完成swiper初始化,如: initSwiper () { const _this = this var mySwiper = new Swiper ('.swiper-container1', { loop: true, autoplay:true, observer:true, observeParents

小程序――banner轮播

匿名 (未验证) 提交于 2019-12-03 00:30:01
这是效果图。将默认的圆点变成短横线,当前活动的短横线较长并切是红色背景。以及轮播高度随着图片高度自适应。 代码如下: xml: <swiper class='swiper-box' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height:{{Height}}'> <block wx:for="{{ bannerUrls }}"> <swiper-item> <view> <image class="slide-image" src="{{ item.url }}" bindload='imgHeight' mode='widthFix'></image> </view> </swiper-item> </block> </swiper> js: Page({ data: { // 轮播 bannerUrls: [ { url: 'https://www.71big.com/heqing/zhaojingwang/common/images/banner1.jpg', linkUrl: '' }, { url: 'https://www.71big.com/heqing/zhaojingwang

js --自动播放音频

匿名 (未验证) 提交于 2019-12-02 23:57:01
简介 基本使用 chrome下无法自动播放问题处理 简介 属性 ֵ 描述 autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。 controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 loop loop 如果出现该属性,则每当音频结束时重新开始播放。 muted muted 规定视频输出应该被静音。 preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 src url 要播放的音频的 URL。 基本使用 <audio id="myaudio" src="exa.wav" autoplay="autoplay" controls="controls" loop="loop" preload="preload" muted="muted"> 不支持audio标签 </audio> <script type="text/javascript"> document.getElementById("myaudio").play(); </script> ②js版本 <button onclick="voicePaly()">启动</button> <button onclick="voiceClose()">停止</button> <script type

Chrome Vimeo Iframe autoplay not working anymore

ぃ、小莉子 提交于 2019-12-02 20:50:57
since some days my vimeo iframe will not autoplay anymore. I know the chrome update, which will block autoplay videos with sound. Is the block already active? The Vimeo Example code doesn't work: <iframe src="https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> But netflix.com and vimeo itself has an autoplay video on the homepage, which works. EDIT: Chrome version 66.0.3359.139 macOS High Sierra 10.13.4 Does anyone have an idea or answer? Thanks! yes, according to their

JavaScript实现简单轮播图动画

我怕爱的太早我们不能终老 提交于 2019-12-02 11:08:37
运行效果: 源代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <style type="text/css"> * { margin: 0px; padding: 0px } #container { margin: 30px auto; width: 1280px; height: 720px; position: relative; overflow: hidden; } #inner-list { width: 400%; position: absolute; top: 0; left: 0; } #inner-list li { float: left; } #dot-list { position: absolute; bottom: 20px; right: 20px; } #dot-list li { float: left; display: inline-block; width: 20px; height: 20px; border-radius: 50%; line-height: 20px; text-align: center; background: rgba(255, 255, 255, .3); cursor:

There's no way method to do autoplay video on android platform?

时光毁灭记忆、已成空白 提交于 2019-12-02 07:58:53
问题 I read in billions of foruns and posts on the stackoverflow, and nothing. When I found a solution or something like that, not work anymore. I tried with Google API and nothing too. I can autoplay video in the IOS native player, putting de direct mp4 link on tag '' But in Android, I try with iframe, video tag, direct mp4 link, nothing works. There's no way to do this works on the Android platform? 回答1: <div id="player"></div> <script> var tag = document.createElement('script'); tag.src =

Add autoplay to this jQuery Carousel

丶灬走出姿态 提交于 2019-12-02 07:27:38
问题 I've created a carousel using jQuery and I would like to add auto-play functionality to it. Here's my existing JS: $(document).ready(function (){ $('#button a').click(function(){ var integer = $(this).attr('rel'); $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)}) $('#button a').each(function(){ $(this).removeClass('active'); if($(this).hasClass('button'+integer)){ $(this).addClass('active')} }); }); });​ And here's a working fiddle. Question: I have no idea where to start with

There's no way method to do autoplay video on android platform?

与世无争的帅哥 提交于 2019-12-02 04:15:51
I read in billions of foruns and posts on the stackoverflow, and nothing. When I found a solution or something like that, not work anymore. I tried with Google API and nothing too. I can autoplay video in the IOS native player, putting de direct mp4 link on tag '' But in Android, I try with iframe, video tag, direct mp4 link, nothing works. There's no way to do this works on the Android platform? <div id="player"></div> <script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0];

Android webview video autoplay success, but same apk fails on android Tv mini pc?

风流意气都作罢 提交于 2019-12-01 23:08:18
问题 I have managed to get my video autoplay inside my webview.apk, tested on my phone (4.1.2) and it works, while on my android mini pc (4.2) has to be clicked to start the playback...:( Could WebChromeClient may be the reason? If it has something in common with chromium, which fails to autoplay as well, while the stock web browser plays nicely?? The javascript I use to get the autoplay working is the following: <html> <head> <script> function callback () { document.querySelector('video').play();

HTML 5 Autoplay Google Chrome Android Not Playing

风格不统一 提交于 2019-12-01 21:33:23
问题 I'm trying to play automatically a video when the user open the page on browser. On my laptop autoplay works on all browsers, but on android it doesn´t work on Google Chrome and in Iphone it doesn't works in safari. I already did a search and google chrome in android doesn't support html5 video tag so i used some javascript but it doesn't work too. Why? What should i do? Here's my code <video id="video" autoplay autobuffer controls="controls" allowFullScreen > <source src="video.mp4" type=