HTML视频自动播放功能无法在Chrome上使用bxSlider

Question

所以我使用bxSlider制作了这个滑块，效果很好。除Chrome之外。在Chrome中，嵌套在滑块内时，它不会读取<video>标记内的任何属性。所以没有自动播放和控件仍然可用。

这里是代码，它非常简单：

<ul class="slider bxslider" id="slider">
    <li id="01" class="slide">
        <video autoplay loop muted poster="img/01.jpg">
            <source src="img/pickup.webm" type="video/webm">
            <source src="img/pickup.mp4" type="video/mp4">
        </video>
    </li>
    <li id="02" class="slide">
        <img src="img/02.jpg">
    </li>
</ul>

这适用于所有其他浏览器。如果我在滑块<ul>之外使用相同的代码，一切正常。我发现一些使用JS的黑客可以解决这个问题，但是我更喜欢在不使用JS的情况下解决这个问题。有什么想法吗？

Answer 1

我能得到的最佳解决方法是在</video>标记之后添加此代码。

<script>
    document.getElementById('vid').play();
</script>

不漂亮，但不知怎的，它对我有用。

Answer 2

添加video: true和fitvids.js插件解决了这个问题。