HTML5 视频自动播放不适用于 slick.js

Question

重新表述问题

HTML5 视频自动播放在 chrome 和 safari 上的 slick.js 中不起作用。 在 Firefox 中一切正常。

自动播放在光滑的容器外工作正常。

我试过这个： Video auto play is not working in Safari and Chrome desktop browser

但似乎无法让它工作。

我的巧妙设置

$(document).ready(function () {
    $('.slick-hero').on('init', function (e, slick) {
        var $firstAnimatingElements = $('div.slick-hero:first-child').find('[data-animation]');
        doAnimations($firstAnimatingElements);
    });
    $('.slick-hero').on('beforeChange', function (e, slick, currentSlide, nextSlide) {
        console.log(nextSlide);

        var $animatingElements = $('div.slick-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
        console.log($animatingElements.length);
        doAnimations($animatingElements);
    });
    $('.slick-hero').slick({
        autoplay: true,
        autoplaySpeed: 7000,
        pauseOnHover: false,
        speed: 1000,
        dots: true,
        fade: true,
        adaptiveHeight: true
    });
    function doAnimations(elements) {
        var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        elements.each(function () {
            var $this = $(this);
            var $animationDelay = $this.data('delay');
            var $animationType = $this.data('animation');
            $this.css({
                'animation-delay': $animationDelay,
                '-webkit-animation-delay': $animationDelay
            });
            $this.addClass($animationType).one(animationEndEvents, function () {
                $this.css({});
                $this.removeClass($animationType);
            });
        });
    }
});

原问题： 我无法让简单的 HTML5 视频自动播放。

在 Firefox 中一切都很美好。

我相对简单的实现

<video poster="assets/video/ocean.jpg" id="bgvid" controls autoplay loop muted>
   <source src="assets/video/ocean.mp4" type="video/mp4">
   <source src="assets/video/ocean.webm" type="video/webm">
   <source src="assets/video/ocean.ogv" type="video/ogg">
</video>

这不行！！！控件工作正常，但自动播放却不行。 我尝试通过双击在浏览器中打开它，通过本地主机和我自己的网站......什么都没有。

视频的 URL 很好，我测试了它们。 我在使用最新版本的 chrome 和 safari 的 macbook pro 上。 在 Firefox 中一切正常。

这个例子运行良好： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay,

这个例子运行良好： https://codepen.io/dudleystorey/pen/knqyK

也试过用这个： https://github.com/VodkaBears/Vide/

演示文件运行良好。 但是当我尝试在我自己的代码上实现它时，它只会显示海报图像。

Answer 1

重新发布相关问题的答案：

按照其他答案的建议使用 jQuery play() 或 DOM 操作后，它在 Android 版 Chrome（版本 56.0）中仍然无法正常工作（视频未自动播放）。

根据 developers.google.com 中的 post，从 Chrome 53 开始，浏览器会尊重自动播放选项，如果视频静音。

因此，在视频标签中使用autoplay muted 属性可以使视频在 Chrome 浏览器 53 版本中自动播放。

来自上述链接的专家：

从 53 版开始，Android 版 Chrome 支持视频静音自动播放。如果设置了 autoplay 和 muted，则视频元素进入视野后将自动开始播放[...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• iOS 10 及更高版本上的 Safari 支持静音自动播放。
• 无论是否静音，Firefox 和 UC 浏览器都已在 Android 上支持自动播放：它们不会阻止任何类型的自动播放。

Answer 2

如果您的代码中此视频标签的任何父级对其进行了任何 DOM 操作，则自动播放在 Safari 和 Chrome 中将不起作用。这是一个类似的问题，其答案应该对您有所帮助：

Video auto play is not working in Safari and Chrome desktop browser