How to play a video in jQuery image slider?

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>

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.