[英]How to play a video in jQuery image slider?
我有一個 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>
這是我正在尋找的代碼:(將用視頻標簽替換每個 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()
在這里不起作用。
仍然缺少一些修復來正確放置它,但它有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.