javascript - 将“活动”类设置为当前滑块元素
问题描述
我正在尝试制作一个包含 6 个视频(所有视频宽度相同)的滑块,专门用于手机视图。当我专注于视频时,它必须自动开始并变大。
我的问题是我不知道如何确定显示哪张幻灯片来启动这张幻灯片上的视频。
我认为有一些功能可以找到滑块位置,但没有找到任何人。我想过让滑块中间当前坐标,但不知道如何得到它
<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>
我希望确定哪个视频显示在屏幕中央以将其添加一个类(活动)。
感谢您的帮助
解决方案
您可以收听标签的play
事件([更多信息]) 1video
$("video").on("play", function(){
$(this).addClass("active");
}
如果视频结束时删除活动:
$("video").on("ended", function(){
$(this).removeClass("active");
}
推荐阅读
- libgdx - 渲染多边形时Libgdx崩溃
- amazon-cognito - Cognito 身份 ID 持久性
- swift - UIDatePicker 在 macCatalyst 中不起作用(Xcode 11 Beta 5)
- ruby - 比较函数内的数组
- php - 如何在wordpress中递归解码简码
- react-native - 如何在反应原生快速图像中显示覆盖整个图像的灰色图像(而不是背景整个图像)
- haskell - 如何在 Haskell 上定义链表?
- php - (输入 [type='file'])值在提交表单后未显示
- node.js - 使用 React 在 Loopback 中设置访问令牌
- python - 熊猫计算数据框行中的日期差异