[英]Set “active” class to the current slider element
我正在嘗試制作一個包含 6 個視頻(所有視頻寬度相同)的 slider 專門用於手機觀看。 當我專注於視頻時,它必須自動開始並變大。
我的問題是我不知道如何確定顯示哪張幻燈片來啟動這張幻燈片上的視頻。
我以為有一些 function 可以找到 slider position 但沒有找到任何人。 我想獲得 slider 中間當前坐標,但不知道如何獲得它
<body>
<div class="example-wrapper">
<div class="container both-scroll both-mandatory align-center">
<div class="wrapper">
<div class="empty"></div>
<div class="element">
<video width="" height="" controls>
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="element">
<video width="" height="" controls>
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="element">
<video width="" height="" controls>
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="element">
<video width="" height="" controls>
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="element">
<video width="" height="" controls>
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="element">
<video width="" height="" controls>
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
<source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="empty"></div>
</div>
</div>
</div>
</body>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
video{
width: 50vw;
}
.align-center .element {
scroll-snap-align: center;
}
.example-wrapper {
text-align: center;
width: 350vw;
margin-left: auto;
margin-right: auto;
}
.container {
width: 100%;
height: 60vh;
margin-left: auto;
margin-right: auto;
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
scroll-snap-type: mandatory;
}
.element {
height: 60vh;
scroll-snap-stop: normal;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.both-mandatory {
scroll-snap-type: both mandatory;
}
.both-scroll .wrapper {
width: 50vw;
height: 100%;
display: grid;
grid-template-columns: 25vw 50vw 50vw 50vw 50vw 50vw 50vw 25vw;
grid-gap: 10px;
}
</style>
我希望確定哪個視頻顯示在屏幕中央,將其添加為 class(活動)。
感謝您的幫助
您可以收聽video
標簽的play
事件([更多信息]) 1
$("video").on("play", function(){
$(this).addClass("active");
}
如果視頻結束時刪除活動:
$("video").on("ended", function(){
$(this).removeClass("active");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.