如何在 jQuery 图像滑块中播放视频？答案

【问题标题】：How to play a video in jQuery image slider?如何在 jQuery 图像滑块中播放视频？
【发布时间】：2019-02-03 10:13:12
【问题描述】：

我有一个 jQuery 滑块，我在 WordPress 网站中用 jQuery 编写。

如果 src 扩展名为“mp4”，我想启用它来播放视频。

有什么想法吗？

以下是生成的 HTML 示例：（请注意第一个 img src 是指向视频的链接）

我想让访问者点击播放按钮开始播放视频。

<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>

【问题讨论】：

<img> 标签仅用于图像。对于您需要<video> 的视频。 W3Schools上有教程
@user78403 是的。我正在寻找js代码在线替换它
所以您正在寻找代码来扫描您的页面以查找包含视频的<img>s 并替换它们？

标签： javascript php jquery wordpress mp4

【解决方案1】：

这是我正在寻找的代码：（将用视频标签替换每个 mp4 链接）：

$('.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() 在这里不起作用。

仍然缺少一些修复以正确放置它，但它可以工作。

【讨论】：