将图片替换为图库中的视频

Question

这是我用于图库的代码，基于bootstrap的模板

<div class="col-md-4 ftco-animate">
<div class="gallery img d-flex align-items-end" style="background-image: url(images/gallery/leopardshark.jpg);">
<a href="images/gallery/leopardshark.jpg" class="icon image-popup d-flex justify-content-center align-items-center">
<span class="icon-expand"></span></a>
<div class="desc w-100 px-4">
<div class="text w-100 mb-3">
</div>
</div>
</div>
</div>

我想用视频代替背景图像，有没有办法做到这一点，并使其在所有浏览器中自动播放?如果我只是替换图像url，我可以让mp4s在Safari中工作。

Answer 1

您可以将img替换为:

<video autoplay>
<source src="/path" type="video/mp4">
error message
</video>

这将在Firefox中自动播放，但在Chrome中不能(他们阻止它)。因此，如果你不想添加控件，你还需要使用这样的东西:

$('.class_name').on('load', function(){
$('video').load();
$('video').play();
});