第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Bootstrap Carousel - 在活動幻燈片上自動播放視頻

Bootstrap Carousel - 在活動幻燈片上自動播放視頻

Helenr 2023-07-14 10:15:04
我一直在嘗試使用 Bootstrap Carousel 制作一部互動紀(jì)錄片。為此,我希望活動幻燈片上的視頻自動播放。我讀過,除非視頻靜音,否則不可能自動播放,但如果您只需單擊一次音量按鈕即可自動播放所有內(nèi)容,我不介意,但我還不知道如何做到這一點。在 Chrome 上,不會自動播放任何內(nèi)容,您必須手動播放每個視頻。使用 Safari 時,一旦用戶之前與頁面進行過交互,視頻就會自動播放,但問題是它們都會同時自動播放,即使視頻位于不活動的幻燈片上(有聲音)。有誰知道解決方案嗎?我的HTML:<div id="myCarousel" class="carousel slide" data-interval="false"><ol class="carousel-indicators">    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>    <li data-target="#myCarousel" data-slide-to="1"></li>    <li data-target="#myCarousel" data-slide-to="2"></li>  </ol>  <div class="carousel-inner">    <div class="carousel-item active">         <video controls autoplay loop muted class="myvid" id="player">            <source src="assets/img/intro.mp4" type="video/mp4">            </video>    </div>    <div class="carousel-item">         <video controls autoplay class="myvid" id="player2">            <source src="assets/img/Placeholder Video.mp4" type="video/mp4">            </video> </div>  </div>  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">    <span class="carousel-control-prev-icon" aria-hidden="true"></span>    <span class="sr-only">Vorige</span>  </a>  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">    <span class="carousel-control-next-icon" aria-hidden="true"></span>    <span class="sr-only">Volgende</span>  </a></div>我的 JavaScript:  }).on('slide.bs.carousel', function () {  document.getElementById('player').pause();});/* SLIDE ON CLICK */ $('.carousel-indicators > li > a').click(function() {    // grab href, remove pound sign, convert to number    var item = Number($(this).attr('href').substring(1));    // slide to number -1 (account for zero indexing)    $('#myCarousel').carousel(item - 1);    // remove current active class    $('.carousel-indicators .active').removeClass('active');    // add active class to just clicked on item    $(this).parent().addClass('active');    // don't follow the link    return false;});提前致謝。
查看完整描述

1 回答

?
千萬里不及你

TA貢獻(xiàn)1784條經(jīng)驗 獲得超9個贊

您可以這樣使用Bootstrap 4 Carousel 事件:


let allVids = $("#myCarousel").find('.carousel-item');


allVids.each(function(index, el) {

? if (index !== 0) {

? ? $(this).find('video')[0].pause();

? }

});


$("#myCarousel").on('slide.bs.carousel', function(ev) {

? let slides = $(this).find('.carousel-item');

? let pvid = slides[ev.from].querySelectorAll('video')[0];

? let vid = slides[ev.to].querySelectorAll('video')[0];

? let isPlaying = vid.currentTime > 0 && vid.readyState > 2;


? vid.play();


? if (isPlaying) {

? ? pvid.pause();

? }

});

#myCarousel {

? max-width: 1200px;

? margin: 0 auto;

}


.carousel-control-next, .carousel-control-prev {

? ? width: 9% !important;

}


.carousel-inner {

? background: #111;

}


.carousel-indicators {

? bottom: -13px !important;

}


.carousel-item {

? padding-bottom: 25px;

}


video {

? width: 100%;

}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>

<link rel="stylesheet" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">



<div id="myCarousel" class="carousel slide" data-interval="false">

? <ol class="carousel-indicators">

? ? <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

? ? <li data-target="#myCarousel" data-slide-to="1"></li>

? ? <li data-target="#myCarousel" data-slide-to="2"></li>

? </ol>


? <div class="carousel-inner">

? ? <div class="carousel-item active">

? ? ? <video controls autoplay loop muted class="myvid" id="player">

? ? ? ? ? ? <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">

? ? ? ? ? ? </video>

? ? </div>


? ? <div class="carousel-item">

? ? ? <video controls autoplay class="myvid" id="player2">

? ? ? ? ? ? <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">

? ? ? ? ? ? </video>

? ? </div>


? ? <div class="carousel-item">

? ? ? <video controls autoplay class="myvid" id="player2">

? ? ? ? ? ? <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">

? ? ? ? ? ? </video>

? ? </div>

? </div>


? <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">

? ? <span class="carousel-control-prev-icon" aria-hidden="true"></span>

? ? <span class="sr-only">Vorige</span>

? </a>

? <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">

? ? <span class="carousel-control-next-icon" aria-hidden="true"></span>

? ? <span class="sr-only">Volgende</span>

? </a>

</div>


查看完整回答
反對 回復(fù) 2023-07-14
  • 1 回答
  • 0 關(guān)注
  • 233 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號