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 的 hack 应该可以解决这个问题，但我更愿意在不使用 JS 的情况下解决这个问题。有什么想法吗？

Answer 1

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

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

不漂亮，但不知何故对我有用。

Answer 2

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

HTML Chrome 上的 bxSlider 无法使用视频自动播放

HTML Video autoplay not working with bxSlider on Chrome

html

google-chrome

html5-video

bxslider