I have two bootsrap div rows. The first row contains a HTML5 video tag where I want to play video.
The second row contains JQuery Slider showing images that corresponds to the videos that need to be played by their index. The slider is using a https://github.com/kenwheeler/slick/ plugin.
If image in position 1 is clicked, I want to play video_1 in the player, and so on.
The URL of video will be in this format <source src="videos/video_1.mp4"
Here is my markup
<body style="background-color: #0094ff">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<video width="640" height="360" controls id="player">
<source src="videos\video_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="row">
<div class="col-md-12 slider">
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest1.jpg" alt="Image I"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest2.jpg" alt="Image 2"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest3.jpg" alt="Image 3"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest4.jpg" alt="Image 4"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest5.jpg" alt="Image 5"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest6.jpg" alt="Image 6"/></div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
})
$('.slider').on('click', '.slick-slide', function () {
alert("Slide clicked");
//how can I show the video with the position of the clicked slide?
})
</script>
</body>
How can I show an a video using the position/index of the clicked slide to create the src="" of the video tag with the id of "player"?
UPDATE
Here is a screenshot of what the screen looks like currently, an I want to show a different video when each of the image is clicked.
To answer your question exactly do this:
$('.slider').on('click', '.slick-slide', function () {
var index = $('.slider').slick('slickCurrentSlide');
$('#player source').attr('src', 'videos/video_'+index+'.mp4');
})
But better control would be:
Add a data-video to each img tag:
<div class="col-md-5 col-xs-3">
<img id="image_1" src="images\guest1.jpg" data-video="videos\video_1.mp4" alt="Image I" />
</div>
You can then swap out the video like so:
$('.slider').on('click', 'img', function () {
var data = $(this).data(); // Grab data from IMG
$('#player source').attr('src', data.video);
})
Related
thank you so much for taking time to look in to this issue .
I have a page where it contains multiple videos from youtube , i want to replace that video content with the image whenever the user scrolls down beyond that div , it is working fine for one video but when there is multiple videos it is taking the image of last video for all the videos .
Here is my initial html :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<img src="/sites/default/files/image1.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<img src="/sites/default/files/image2.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
Let's say for example if user plays the video 1 the html becomes like this :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/s6OusrTxwxA?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/DKpkL3ZyLBo?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
So if users scroll's down while playing the video , i want replace that video with the image for that specific div similar to like this :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<img src="/sites/default/files/image1.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/DKpkL3ZyLBo?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
Here is my jquery :
$(document).ready(function() {
$('.main-paragraph').each(function() {
let old_html = $(this).find('.video-content').html();
// Stop playing the video and show image when scrolled past.
$(window).scroll(function() {
$('.video-content').each(function() {
let windowScroll = $(window).scrollTop(); // how many pixels you've scrolled
let containerDistance = $(this).offset().top;
let containerHeight = $(this).height(); // height of container in pixel
// If you've scrolled further than the top of the container + it's height
// stop the video.
if (windowScroll > containerDistance + containerHeight) {
$(this).html(old_html);
}
});
});
});
I have a jQuery slider that I wrote in jQuery in WordPress site.
I want to enable it to play video if the src extension is "mp4".
Any ideas?
Here is an example of the HTML generated: (please note the first img src is a link to a video)
I would like to enable the visitor click play button to start the video.
<div id="img-container" style="width: 2828.1px; padding-right: 886px;">
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2015/12/VideoClip.mp4" height="1080" width="842" alt="" title="" style="height: 414px; width: 323px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2017/03/railings.png" height="612" width="600" alt="" title="" style="height: 414px; width: 230px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2017/03/railing-1.png" height="600" width="462" alt="" title="" style="height: 414px; width: 177px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div style="clear: left;"></div>
</div>
Here is the code I was looking for: (will replace every mp4 link with video tag):
$('.picture_holder .picture > img').each(function(index){
console.log("index="+index+" Video src = "+ $(this).attr('src') + "<<<");
let imgsrc = $(this).attr('src');
if (imgsrc.indexOf(".mp4") >0) {
console.log("want to replace");
$(this).parent().prepend('<video width="320" height="600" controls><source src="'+imgsrc+'" type="video/mp4"></video>');
$(this).remove();
}
});
It replaces the img element with video element.
I use parent().prepend() simply because replaceWith() is not working here.
Few fixes are still missing to place it correctly, but it works.
I have a page setup with links that hide/show divs. The last link is a contact form. Contact forms are super messy with code so I wanted to load the file externally
I found many snippets on simply loading html into div with jquery. But the issue is I already have jquery setup to show and hide the divs
How can I have the contact link show the contact div and also load the external contact form into it?
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function(){
var $menu = $(this);
if (!$menu.is($clicked))
{
$($menu.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
$(".contactmenu").click(function(){
$("#menu-contact").load("contactform.htm");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>
<div align="center" class="logoclass" id="logo"><img src="media/logo.png"/></div>
<div id="topmenu">
Home
Videos
Follow
Contact
</div>
</header>
<article>
<div id="bodycontent">
<div id="menu-contact" style="display: none">Contact</div>
<div id="menu-follow" style="display: none">Follow</div>
<div id="menu-videos" style="display: none"><br />
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
<div id="menu-home" style="display: none">..</div>
</div>
</article>
contactmenu class doesn't exist, try:
$("#contact-menu-item").click(function(){
I wrote this to find a video element within an owl-carousel slide and then set owl-carousel control's CSS only (this control appears on runtime of webpage) for that specific slide.
The code is not working at all, I'm new to use js.
$(".item").children().find("video").each(function(){
var d = document.getElementByClass('owl-controls');
d.style.bottom = y_pos+'10px';
});
For the HTML
<div id="post-media" class="owl-carousel item-2">
<div class="item"><img src="images/fullimage1.jpg" alt="The Last of us"></div>
<div class="item">
<video controls="" class="embed-responsive-item" style="width:100%; height:100%">
<source src="video/clip1.mp4" type="video/mp4">
</video>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
</div>
</div>
</div>
If you only desire shifting the position of owl-controls no need for jquery. You can use CSS only:
.owl-carousel .owl-controls
{
margin-top:10px;
}
If you know css3, you can use same queries with jQuery
$(".item video").each(function(){
var d = document.getElementByClass('owl-controls');
d.style.bottom = y_pos+'10px';
});
I was assigned to do a photo gallery.
A big picture (1000x1000) in the middle, three little thumbnails picture(200x200) below it.
I was given this useful function
getBigImg(thumbnail); // Returns big image
We assume the CSS is already given for us and we do not need to worry.
<div class="big image">
<img src="big picture"/>
</div>
<div class = "thumbnails">
<div id="placement1> img src thumbnail 1 </div>
<div id="placement2> img src thumbnail 2 </div>
<div id="placement3> img src thumbnail 3 </div>
</div>
What I did is simple create 3 copies of the .HTML and do infront of each of the thumbnails. Whenever the user click on the image it will redirects to the .html where the big image is big image of the thumbnail.
I was told I can save all this hassle by using JQuery. What are they referring to?
you can do something like this example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".galImg").click(function() {
var image = $(this).attr("rel");
$('#feature').fadeOut('slow');
$('#feature').html('<img src="' + image + '"/>');
$('#feature').fadeIn('slow');
});
});
</script>
use this HTML: little bug fixes
<div class="big image">
<img class="bigImage" src="big picture"/>
</div>
<div class="thumbnails">
<div id="placement1" > <img src="thumbnail1" /> </div>
<div id="placement2" > <img src="thumbnail2" /> </div>
<div id="placement3" > <img src="thumbnail3" /> </div>
</div>
and add this to your HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click', '.thumbnails > div', function(){
var img = $(this).find('img').attr('src');
$('.bigImage').attr('src', img);
});
});
</script>