I am working on a project at work and they were interested in a video playing up top. I decided it might be more fun if you have a series of videos. I already had Bootstrap 4.3.1 doing things on the page and I almost always have JQuery you dont really need JQuery but I use it in this example. Anyway, I decided to play with the Bootstrap Carousel since its really simple. It works really well actually.
When you slide next it starts the video. If you click in the video it either starts or pauses the displayed video. When the video ends it asks to replay. I will likely add volume and other fancy things, who knows? Heres the html and JS code. It needs some clean up but it gives you an idea of how this thing works. You can also download all the files and just run it on your server if you prefer.
Download: bootstrap4_carousel.zip
Verify SHA256: 7ac41a9618f2ca8457cbbabf99ad5ebca07bf6a43ed86867ba7ef13c2de3f651
$[document].ready[function[]{
$['.carousel-item.active div'].hide[];
$['.carousel-item div'].hide[];
$['#index_carousel'].on['slide.bs.carousel', function [] {
$['.carousel-item.active div'].hide[];
$['.carousel-item div'].hide[];
$['.carousel-item video'].trigger['play']; // play next
$['.carousel-item.active video'].trigger['pause']; // stop previous
}]
$[".carousel-item video"].click[function[] {
$['.carousel-item.active div span'].text['PAUSED'];
$['.carousel-item div'].hide[];
if [this.paused] {
$['.carousel-item.active div'].hide[];
this.play[];
} else {
$['.carousel-item.active div'].show[];
this.pause[];
}
}];
$["video"].bind["ended", function[] {
$['.carousel-item div span'].text['REPLAY'];
$['.carousel-item div'].show[];
}];
$['.carousel-item div'].click[function[] {
$['.carousel-item video'].trigger['play'];
$['.carousel-item.active div'].hide[];
$['.carousel-item div'].hide[];
}];
}];
body { background-color: #444; }
#container { width:100%;}
#index_carousel { width:975px; margin-left:auto; margin-right:auto; top:10px;}
video { width:975px; border:2px solid #ccc;}
#vid_msg { color:#000; background-color:#fff; opacity:0.6; border-radius: 8px; margin-bottom:125px; font-size:32pt; }
Video or codec not supported.
PAUSED
Title One
Sub Title
Video or codec not supported.
PAUSED
Title Two
Sub Title
- Click to share on Twitter [Opens in new window]
- Click to share on Reddit [Opens in new window]
- Click to share on Tumblr [Opens in new window]
- Click to share on Pocket [Opens in new window]
Like this:
Like Loading...
Tags: bootstrap 4, carousel, html 5, jquery, video
Video liên quan