Hello. My name is Cosmin and I am new on this forum and also I am new in Javascript programming, so I need some help please.
I tried to make a video carousel and I used for this Slick plugin. I wrote the code in Html and CSS and I imported the Javascript file from Slick and I manage to make the carousel working. The content of the carousel is video content not picture. So I put some video inside of the carousel.
The problem started when I want to make a custom controls bar for the video. I manage to make the Javascript code for the Play button and it works but…only when the video is in the first position of a carousel.If I slide the carousel to the next position, the play button doesn’t work and I don’t know why.
Maybe someone can help me please with this problem.
Thank you very much.
Here is the Javascript code:
“`
$(document).ready(function(){
$(‘.caruselPost’).slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
nextArrow: $(‘.next’),
prevArrow: $(‘.prev’),
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 860,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: “unslick”
// instead of a settings object
]
});
});
var video = document.querySelector(‘.video’);
var btn = document.getElementById(‘play-pause’);
function PlayPause() {
if(video.paused){
btn.className = ‘pause’;
video.play();
}else{
btn.className = ‘play’;
video.pause();
}
}
btn.onclick=function(){
PlayPause();
}
>I manage to make the Javascript code for the Play button and it works but...only when the video is in the first position of a carousel.
document.querySelector
</C> does: It gets the <STRONG>**first**</STRONG> element that matches the selector.<br/>
In order to get the slide currently visible you need to use:
<QUOTE><i>></i>slickCurrentSlide Returns the current slide index</QUOTE>
However one question pops up: <br/>
At <C>
breakpoint: 1024
</C> 3 slides are visible at the same time. Which video should be addressed by the play/pause button then?
BTW: Please use code tags when posting code: <C>
your code here
`>I made only one video with controls and a play pause button and I notice that when the slide that contain this video is in the first position of a carousel, and visible, the play pause button work. But when it slide in the second position and the third position, the play pause button doesn' work.
``<i>
</i> function PlayPause() {
if (video.paused) {
btn.className = 'pause';
if (video.classList.contains('slick-active')) {
video.play();
}
} else {
btn.className = 'play';
video.pause();
}
}<i>
</i>
``
``<i>
</i> <div class="caruselPost">
<div>
<video class="video" src="videos/whymelord-360.mp4" controls></video>
</div>
<!-- more slides here --><i>
</i>
`</CODE>
If so, the class is added to the wrapper not to the video and you have to extend the code like this:
<CODE>
`<i>
</i> // initializing slick slider unchanged
var video = document.querySelector('.video');
// get the video's wrapper:
var videoWrapper = video.closest('div');
var btn = document.getElementById('play-pause');
function PlayPause() {
if (video.paused) {
btn.className = 'pause';
// check if the video is visible currently:
if (videoWrapper.classList.contains('slick-active')) {
video.play();
}
} else {
btn.className = 'play';
video.pause();
}
}
btn.onclick = function () {
PlayPause();
}<i>
</i>
``
``<i>
</i><!DOCTYPE html>
<html>
<head>
<title>Video in Slick Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"
integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.caruselPost img,
.caruselPost video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="caruselPost">
<div>
<video class="video" src="videos/whymelord-360.mp4" controls></video>
</div>
<div>
<img src="images/bild1.jpg">
</div>
<div>
<img src="images/bild2.jpg">
</div>
<div>
<img src="images/bild3.jpg">
</div>
<div>
<img src="images/bild4.jpg">
</div>
</div>
<button id="play-pause">Play/Pause</button>
<button class="prev">Previous</button>
<button class="next">Next</button>
<script type="text/javascript">
$(document).ready(function () {
const slick = $('.caruselPost').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
nextArrow: $('.next'),
prevArrow: $('.prev'),
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 860,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
// callback for "after change"
// pause video if it's not in view:
slick.on('afterChange', function (slick, currentSlide) {
if (!videoWrapper.classList.contains('slick-active')) {
video.pause();
btn.className = 'play';
}
});
});
var video = document.querySelector('.video');
// get the video's wrapper:
var videoWrapper = video.closest('div');
var btn = document.getElementById('play-pause');
function PlayPause() {
if (video.paused) {
btn.className = 'pause';
// check if the video is visible currently:
if (videoWrapper.classList.contains('slick-active')) {
video.play();
}
} else {
btn.className = 'play';
video.pause();
}
}
btn.onclick = function () {
PlayPause();
}
</script>
</body>
</html><i>
</i>
``
<div class="caruselPost">
<div class="post">
<div class="c-video">
<video class="video" src="Video.mp4" ></video>
<div class="controls">
<div class="playBtn">
<button id="play-pause"></button>
</div>
</div>
</div>
</div>
<br/>
<i> </i> <!-- more slides here -->
<i> </i>
var videoWrapper = video.closest('div.post');
`>I am interested to make every video to have a play button that works and that I can't manage to do.
``<i>
</i> // add event listener for click to window:
window.addEventListener('click', playPause);
function playPause(event) {
// event.target is the element having been clicked
// check if the play/pause button was clicked:
if (event.target.classList.contains('play-pause')) {
const
btn = event.target,
// get the corresponding video:
parentCont = btn.closest('div.c-video'),
video = parentCont.querySelector('video');
// play or pause video according to current class:
if (!video.classList.contains('playing')) {
video.classList.add('playing')
video.play();
} else {
video.classList.remove('playing')
video.pause();
}
}
}<i>
</i>
`</CODE>
and used a class instead of IDs for the play/pause buttons:<br/>
<C>
<button class="play-pause"></button>
`
Maybe some additional features will be required: When playing a video, another one currently playing should be first.
But let's the above get working first.
<i>
</i>// add event listener for click to window:
window.addEventListener('click', playPause);
function playPause(event) {
// event.target is the element having been clicked
// check if the play/pause button was clicked:
if (event.target.classList.contains('play-pause')) {
const
btn = event.target,
// get the corresponding video:
parentCont = btn.closest('div.c-video'),
video = parentCont.querySelector('video');
// play or pause video according to current class:
if (!btn.classList.contains('playing')) {
btn.classList.add('playing')
video.play();
btn.className = 'pause';
} else {
btn.classList.remove('playing')
video.pause();
btn.className = 'play';
}
}
}
}``<i>
</i><!DOCTYPE html>
<html>
<head>
<title>Video in Slick Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"
integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://kit.fontawesome.com/064b9e5f27.js" crossorigin="anonymous"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.caruselContainer {
margin-top: 80px;
background-color: re;
width: 100%;
height: auto;
margin-bottom: 70px;
}
.caruselSlider {
background-color: gree;
position: relative;
width: 100%;
height: auto;
display: flex;
}
.continutLeft {
background-color: yellow;
height: auto;
}
.continutRight {
background-color: yellow;
height: auto;
}
.continutLeft .prev {
font-size: 5rem;
cursor: pointer;
height: 100%;
color: white;
background-color: rgba(32, 139, 227);
padding-right: 5px;
padding-left: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.continutRight .next {
font-size: 5rem;
cursor: pointer;
height: 100%;
color: white;
background-color: rgba(32, 139, 227);
padding-right: 5px;
padding-left: 5px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.caruselSlider .caruselPost {
margin-left: 10px;
margin-right: 10px;
overflow: hidden;
background-color: blu;
display: inline-block;
}
.caruselSlider .caruselPost .post {
height: auto;
margin-left: 5px;
margin-right: 5px;
display: inline-block;
background-color: cyan;
}
.video {
width: 100%;
}
.c-video {
height: auto;
background-color: yello;
position: relative;
}
.controls {
display: flex;
position: absolute;
bottom: 0px;
width: 100%;
flex-wrap: wrap;
height: 40px;
background: re;
}
.playBtn {
background-color: rgba(32, 139, 227);
width: 7.5%;
height: 100%;
margin-left: 20px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.playBtn button {
background: none;
border: 0px;
outline: 0px;
cursor: pointer;
}
.playBtn button::before {
content: "f04b";
font-weight: 900;
display: inline-block;
font-family: "Font Awesome 5 Free";
font-style: normal;
font-size: 2vw;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
color: white;
}
.playBtn button.playing::before {
content: "f04c";
}
</style>
</head>
<body>
<div class="caruselContainer">
<div class="caruselSlider">
<div class="continutLeft">
<i class="fas fa-chevron-left prev"></i>
</div>
<div class="caruselPost">
<div class="post">
<div class="c-video">
<video class="video" src="../videos/test.mp4"></video>
<div class="controls">
<div class="playBtn">
<button class="play-pause"></button>
</div>
</div>
</div>
</div>
<div class="post">
<div class="c-video">
<video class="video" src="../videos/test2.mp4"></video>
<div class="controls">
<div class="playBtn">
<button class="play-pause"></button>
</div>
</div>
</div>
</div>
<div class="post">
<div class="c-video">
<video class="video" src="Video2.mp4"></video>
<div class="controls">
<div class="playBtn">
<button class="play-pause"></button>
</div>
</div>
</div>
</div>
<div class="post">
<div class="c-video">
<video class="video" src="Video3.mp4"></video>
<div class="controls">
<div class="playBtn">
<button class="play-pause"></button>
</div>
</div>
</div>
</div>
<div class="post">
<div class="c-video">
<video class="video" src="Video4.mp4"></video>
<div class="controls">
<div class="playBtn">
<button class="play-pause"></button>
</div>
</div>
</div>
</div>
</div>
<div class="continutRight">
<i class="fas fa-chevron-right next"></i></i>
</div>
</div>
</div>
<script>
$('.caruselPost').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
nextArrow: $('.next'),
prevArrow: $('.prev'),
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
// add event listener for click to window:
window.addEventListener('click', playPause);
function playPause(event) {
// event.target is the element having been clicked
// check if the play/pause button was clicked:
if (event.target.classList.contains('play-pause')) {
const
btn = event.target,
// get the corresponding video:
parentCont = btn.closest('div.c-video'),
video = parentCont.querySelector('video');
// play or pause video according to current class:
if (!btn.classList.contains('playing')) {
btn.classList.add('playing')
video.play();
} else {
btn.classList.remove('playing')
video.pause();
}
}
}
</script>
</body>
</html><i>
</i>
``
>Maybe some additional features will be required: When playing a video, another one currently playing should be paused first.
``<i>
</i> function playPause(event) {
// event.target is the element having been clicked
// check if the play/pause button was clicked:
if (event.target.classList.contains('play-pause')) {
const
btn = event.target,
// get the corresponding video:
parentCont = btn.closest('div.c-video'),
video = parentCont.querySelector('video');
// play or pause video according to current class:
if (!btn.classList.contains('playing')) {
// first pause another video playing already
// the button of that video has the class "playing":
btnPlaying = document.querySelector('button.play-pause.playing');
// if such button exists, pause the video by simulating a click:
if (btnPlaying) {
btnPlaying.click();
}
btn.classList.add('playing')
video.play();
} else {
btn.classList.remove('playing')
video.pause();
}
}
}<i>
</i>
``
> the central button is on screen. When you click it, the video start, the button disapear and the bottom controls bar will be active.
>you made for the same event( which is click) 2 different if statements
> if I want to add other features like, progress bar or sound button, or full screen button, the way to do this is to add it inside this function. I mean the event function. And to asign the DOM elements related to the parentContainer( c-video).
Otherwise the event will not know who to assign the elements.
video.play();
controls.classList.remove(.'static');
} </code>
``<i>
</i>controls.classList.remove('static');<i>
</i>
``
const
screenBtn = event.target,
parentCont = screenBtn.closest('div.c-video'),
video = parentCont.querySelector('video');
if (!screenBtn.classList.contains('compress')){
video.requestFullscreen();
}
}
your code here
`if (event.target.classList.contains('fullSCBtn')){
<i> </i> const
<i> </i> screenBtn = event.target,
<i> </i> parentCont = screenBtn.closest('div.c-video'),
<i> </i> video = parentCont.querySelector('video');
<i> </i>
<i> </i> if (!screenBtn.classList.contains('compress')){
<i> </i> video.requestFullscreen();
<i> </i> }
>But if I want to exit the fullscreen mode by pressing the ESC key, the icon of the fullscreen button remains unchanged, what I mean, it is not toggle the class.
<i>
</i>if(!(here to put the condition that the DIV is not in fullscreen)){
screenBtn.classList.remove('compress');
}
<i>
</i>
if (event.target.classList.contains('fullSCBtn')){
<i> </i> const
<i> </i> screenBtn = event.target,
<i> </i> parentCont = screenBtn.closest('div.c-video');
<i> </i>
<i> </i>
<i> </i> if (!screenBtn.classList.contains('compress')){
<i> </i> if(!document.fullscreenElement){
<i> </i> screenBtn.classList.remove('compress');
<i> </i> }
<i> </i> parentCont.requestFullscreen();
<i> </i> }else{
<i> </i> document.exitFullscreen();
<i> </i> }
<i> </i> screenBtn.classList.toggle('compress');
<i> </i> }
``<i>
</i> if (event.target.classList.contains('fullSCBtn')) {
const
screenBtn = event.target,
parentCont = screenBtn.closest('div.c-video');
// is the video not in fullscreen mode?
if (!document.fullscreenElement) {
// request full screen for the parent container:
parentCont.requestFullscreen();
// toolbar should be visible now,
// remove class "compressed":
screenBtn.classList.remove('compress');
} else {
// video is in fullscreen mode,
// exit this mode:
document.exitFullscreen();
}
}<i>
</i>
``
<i>
</i>if (event.target.classList.contains('fullSCBtn')) {
const
screenBtn = event.target,
parentCont = screenBtn.closest('div.c-video');
// is the video not in fullscreen mode?
if (!document.fullscreenElement) {
// request full screen for the parent container:
parentCont.requestFullscreen();
// toolbar should be visible now,
// remove class "compressed":
<br/>
<i> </i> } else {
<i> </i> // video is in fullscreen mode,
<i> </i> // exit this mode:
<i> </i> document.exitFullscreen();
<i> </i>
<i> </i> }
<i> </i> screenBtn.classList.toggle('compress');
<i> </i> }
<i> </i>
0.1.9 — BETA 5.4