Question

改述问题

HTML5视频自动播放在chrome和safari上的slick.js中无效。在firefox中，everthing工作正常。

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

我试过这个： 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中，pverting是很好的。

我相对直接的实施

<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>

这不起作用!!!控件工作正常，但自动播放没有。我尝试通过双击，通过localhost和我自己的网站在浏览器中打开它......没有。

视频的网址很好，我测试了它们。我在macbook pro上使用最新版本的chrome和safari。在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 maniupulation之后，在Chrome for Android（版本56.0）中它仍然无法正常工作（视频不是自动播放）。

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

因此，在视频代码中使用autoplay muted属性可以在第53版的Chrome浏览器中自动播放视频。

以上链接的专家：

从版本53开始，Chrome for Android支持视频的静音自动播放。如果视频元素设置为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

HTML5视频自动播放无法使用slick.js

2 个答案: