如何在jQuery图像滑块中播放视频? [英] How to play a video in jQuery image slider?

问题描述

我有一个jQuery滑块，该滑块是我在WordPress网站的jQuery中编写的.

I have a jQuery slider that I wrote in jQuery in WordPress site.

如果src扩展名是"mp4"，我想启用它来播放视频.

I want to enable it to play video if the src extension is "mp4".

有什么想法吗?

以下是生成的HTML的示例:(请注意，第一个img src是视频的链接)

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>

推荐答案

这是我正在寻找的代码:(将用视频标签替换每个mp4链接):

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();
               } 
        });

它将img元素替换为video元素.

我之所以使用parent().prepend()仅仅是因为replaceWith()在这里不起作用.

I use parent().prepend() simply because replaceWith() is not working here.

仍然缺少一些修复程序来正确放置它，但是它可以正常工作.

Few fixes are still missing to place it correctly, but it works.

这篇关于如何在jQuery图像滑块中播放视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！