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 generat

Solution 1:

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.