for a school project I’m trying to create a carousel consisting of both images and video, but I can’t seem to find specific documentation to insert a progress bar in slides that have a video. Is it possible to create this progress bar? Can anyone suggest an option to implement this? Thank you very much in advance to anyone who wants to help me
<code>var videoSlider = $('.owl-carousel');
videoSlider.owlCarousel({
loop: true,
margin: 0,
nav: false,
dots: false,
dotsContainer: '.owl-dots',
autoplay: false,
items: 1
});
videoSlider.on('translate.owl.carousel', function(e) {
$('.owl-item .item video').each(function() {
// pause playing video - after sliding
$(this).get(0).pause();
});
});
videoSlider.on('translated.owl.carousel', function(e) {
// check: does the slide have a video?
if ($('.owl-item.active').find('video').length !== 0) {
// play video in active slide
$('.owl-item.active .item video').get(0).play();
}
else {
setTimeout(function () {
$('.owl-next').trigger('click');}, 10);
}
});
$(".video-item").on('ended', myHandler)
function myHandler(ev) {
// there is no method 'next'
// so we will fake a click
$('.owl-next').trigger('click');
}
window.onload = (function() {
// Get the position on the page of the SVG
var svgLocation = document.querySelector(".owl-carousel").getBoundingClientRect();
// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;
// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
var viewBottom = window.scrollY + window.innerHeight;
if (viewBottom > offsetToTriggerAnimation) {
if ($('.owl-item.active').find('h4')) {
setTimeout(function () {
$('.owl-next').trigger('click');}, 1000);
} else {
// do something else
}
// Remove the event handler so it doesn't trigger again
document.removeEventListener("scroll", scrollAnimTriggerCheck);
}
}
// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);
});
$('video').on('mouseover mouseout', function(e) {
const evt = e.type;
if (evt === 'mouseover') {
this.pause();
}
if (evt === 'mouseout') {
this.play();
}
});</code>
<code>var videoSlider = $('.owl-carousel');
videoSlider.owlCarousel({
loop: true,
margin: 0,
nav: false,
dots: false,
dotsContainer: '.owl-dots',
autoplay: false,
items: 1
});
videoSlider.on('translate.owl.carousel', function(e) {
$('.owl-item .item video').each(function() {
// pause playing video - after sliding
$(this).get(0).pause();
});
});
videoSlider.on('translated.owl.carousel', function(e) {
// check: does the slide have a video?
if ($('.owl-item.active').find('video').length !== 0) {
// play video in active slide
$('.owl-item.active .item video').get(0).play();
}
else {
setTimeout(function () {
$('.owl-next').trigger('click');}, 10);
}
});
$(".video-item").on('ended', myHandler)
function myHandler(ev) {
// there is no method 'next'
// so we will fake a click
$('.owl-next').trigger('click');
}
window.onload = (function() {
// Get the position on the page of the SVG
var svgLocation = document.querySelector(".owl-carousel").getBoundingClientRect();
// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;
// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
var viewBottom = window.scrollY + window.innerHeight;
if (viewBottom > offsetToTriggerAnimation) {
if ($('.owl-item.active').find('h4')) {
setTimeout(function () {
$('.owl-next').trigger('click');}, 1000);
} else {
// do something else
}
// Remove the event handler so it doesn't trigger again
document.removeEventListener("scroll", scrollAnimTriggerCheck);
}
}
// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);
});
$('video').on('mouseover mouseout', function(e) {
const evt = e.type;
if (evt === 'mouseover') {
this.pause();
}
if (evt === 'mouseout') {
this.play();
}
});</code>
var videoSlider = $('.owl-carousel');
videoSlider.owlCarousel({
loop: true,
margin: 0,
nav: false,
dots: false,
dotsContainer: '.owl-dots',
autoplay: false,
items: 1
});
videoSlider.on('translate.owl.carousel', function(e) {
$('.owl-item .item video').each(function() {
// pause playing video - after sliding
$(this).get(0).pause();
});
});
videoSlider.on('translated.owl.carousel', function(e) {
// check: does the slide have a video?
if ($('.owl-item.active').find('video').length !== 0) {
// play video in active slide
$('.owl-item.active .item video').get(0).play();
}
else {
setTimeout(function () {
$('.owl-next').trigger('click');}, 10);
}
});
$(".video-item").on('ended', myHandler)
function myHandler(ev) {
// there is no method 'next'
// so we will fake a click
$('.owl-next').trigger('click');
}
window.onload = (function() {
// Get the position on the page of the SVG
var svgLocation = document.querySelector(".owl-carousel").getBoundingClientRect();
// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;
// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
var viewBottom = window.scrollY + window.innerHeight;
if (viewBottom > offsetToTriggerAnimation) {
if ($('.owl-item.active').find('h4')) {
setTimeout(function () {
$('.owl-next').trigger('click');}, 1000);
} else {
// do something else
}
// Remove the event handler so it doesn't trigger again
document.removeEventListener("scroll", scrollAnimTriggerCheck);
}
}
// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);
});
$('video').on('mouseover mouseout', function(e) {
const evt = e.type;
if (evt === 'mouseover') {
this.pause();
}
if (evt === 'mouseout') {
this.play();
}
});
<code>/* ---------------- */
/* HTML Reset Stuff */
/* ---------------- */
* {
box-sizing: border-box;
outline: none;
}
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: Tahoma;
background: #222;
}
h1 {
color: white;
margin: 30px;
font-size: 25px;
}
button span {
color: white;
}
video {
max-width: 100%;
}
/* --------------- */
/* Content Wrapper */
/* --------------- */
.wrapper {
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* ----------------- */
/* Owl Styling Stuff */
/* ----------------- */
.owl-carousel {
width: 100%;
max-width: 400px;
position: relative;
z-index: 1;
}
.owl-item {
width: 100%;
max-width: 400px;
height: 220px;
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
overflow: hidden;
}
.owl-nav {
font-size: 60px;
}
.owl-next {
float: right;
}
.owl-carousel.owl-loaded {
position: relative;
}
.owl-dots {
position: relative;
margin-top: 15px;
}
button > img {
width:50px;
}</code>
<code>/* ---------------- */
/* HTML Reset Stuff */
/* ---------------- */
* {
box-sizing: border-box;
outline: none;
}
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: Tahoma;
background: #222;
}
h1 {
color: white;
margin: 30px;
font-size: 25px;
}
button span {
color: white;
}
video {
max-width: 100%;
}
/* --------------- */
/* Content Wrapper */
/* --------------- */
.wrapper {
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* ----------------- */
/* Owl Styling Stuff */
/* ----------------- */
.owl-carousel {
width: 100%;
max-width: 400px;
position: relative;
z-index: 1;
}
.owl-item {
width: 100%;
max-width: 400px;
height: 220px;
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
overflow: hidden;
}
.owl-nav {
font-size: 60px;
}
.owl-next {
float: right;
}
.owl-carousel.owl-loaded {
position: relative;
}
.owl-dots {
position: relative;
margin-top: 15px;
}
button > img {
width:50px;
}</code>
/* ---------------- */
/* HTML Reset Stuff */
/* ---------------- */
* {
box-sizing: border-box;
outline: none;
}
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: Tahoma;
background: #222;
}
h1 {
color: white;
margin: 30px;
font-size: 25px;
}
button span {
color: white;
}
video {
max-width: 100%;
}
/* --------------- */
/* Content Wrapper */
/* --------------- */
.wrapper {
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* ----------------- */
/* Owl Styling Stuff */
/* ----------------- */
.owl-carousel {
width: 100%;
max-width: 400px;
position: relative;
z-index: 1;
}
.owl-item {
width: 100%;
max-width: 400px;
height: 220px;
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
overflow: hidden;
}
.owl-nav {
font-size: 60px;
}
.owl-next {
float: right;
}
.owl-carousel.owl-loaded {
position: relative;
}
.owl-dots {
position: relative;
margin-top: 15px;
}
button > img {
width:50px;
}
<code><link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<header>
<h1>Owl Slider - Play / Stop / Continue HTML5 Video</h1>
</header>
<main class="wrapper" style="margin-top:2000px;">
<div class="owl-carousel owl-theme">
<div class="item"><h4 class="photo">1</h4></div>
<div class="item">
<video id="myVideo" class="video-item" muted>
<source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.webm" type="video/webm">
<source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.mp4" type="video/mp4">
</video>
</div>
<div class="item" data-delay="1000"><h4 id="myPhoto">3</h4></div>
<div class="item">
<video class="video-item" muted>
<source src="https://ak4.picdn.net/shutterstock/videos/1014705914/preview/stock-footage--rd-happy-anniversary-text-greeting-and-wishes-card-made-from-glitter-particles-from-golden.mp4" type="video/mp4">
</video>
</div>
<div class="item"><h4>5</h4></div>
<div class="item">
<video class="video-item" muted>
<source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.webm" type="video/webm">
<source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="owl-dots">
<button role="button" class="owl-dot active"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
</div>
</main></code>
<code><link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<header>
<h1>Owl Slider - Play / Stop / Continue HTML5 Video</h1>
</header>
<main class="wrapper" style="margin-top:2000px;">
<div class="owl-carousel owl-theme">
<div class="item"><h4 class="photo">1</h4></div>
<div class="item">
<video id="myVideo" class="video-item" muted>
<source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.webm" type="video/webm">
<source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.mp4" type="video/mp4">
</video>
</div>
<div class="item" data-delay="1000"><h4 id="myPhoto">3</h4></div>
<div class="item">
<video class="video-item" muted>
<source src="https://ak4.picdn.net/shutterstock/videos/1014705914/preview/stock-footage--rd-happy-anniversary-text-greeting-and-wishes-card-made-from-glitter-particles-from-golden.mp4" type="video/mp4">
</video>
</div>
<div class="item"><h4>5</h4></div>
<div class="item">
<video class="video-item" muted>
<source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.webm" type="video/webm">
<source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="owl-dots">
<button role="button" class="owl-dot active"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
</div>
</main></code>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.8/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<header>
<h1>Owl Slider - Play / Stop / Continue HTML5 Video</h1>
</header>
<main class="wrapper" style="margin-top:2000px;">
<div class="owl-carousel owl-theme">
<div class="item"><h4 class="photo">1</h4></div>
<div class="item">
<video id="myVideo" class="video-item" muted>
<source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.webm" type="video/webm">
<source src="https://ak9.picdn.net/shutterstock/videos/5007479/preview/stock-footage-christmas-snow-globe-snowflake-with-snowfall-on-blue-background.mp4" type="video/mp4">
</video>
</div>
<div class="item" data-delay="1000"><h4 id="myPhoto">3</h4></div>
<div class="item">
<video class="video-item" muted>
<source src="https://ak4.picdn.net/shutterstock/videos/1014705914/preview/stock-footage--rd-happy-anniversary-text-greeting-and-wishes-card-made-from-glitter-particles-from-golden.mp4" type="video/mp4">
</video>
</div>
<div class="item"><h4>5</h4></div>
<div class="item">
<video class="video-item" muted>
<source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.webm" type="video/webm">
<source src="https://ak9.picdn.net/shutterstock/videos/1027722329/preview/stock-footage-ramadan-candle-lanterns-are-hanging-on-dawn-sky-background-with-glowing-stars-and-a-crescent-there.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="owl-dots">
<button role="button" class="owl-dot active"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
<button role="button" class="owl-dot"><img src="https://cdn-icons-png.flaticon.com/512/15745/15745651.png"></button>
</div>
</main>