woocommerce / FlexSlider

An awesome, fully responsive jQuery slider plugin
http://www.woocommerce.com/flexslider/
GNU General Public License v2.0
4.92k stars 1.69k forks source link

HTML5 Video autoplay not working on Edge browser #1761

Closed lauraholz closed 1 month ago

lauraholz commented 5 years ago

Hi,

I built a simple flexslider and one of the slides is supposed to display a HTML5 video with an autoplay attribute. This works fine on every browser except for Edge as the video freezes and I can't figure out why. If I add controls to my video and press play, the video plays perfectly and I also tested my slider with several videos, so the video shouldn't be the problem. If I autoplay a HTML5 video in Edge that is not in a slider or if I change the animation to fade, it also works.

The code simply looks like this:

<head>
    <meta charset="utf-8" />
    <title>Responsive Flexslider</title>
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(window).load(function () {
            $('.flexslider').flexslider({controlNav: false});
        });
    </script>
</head>
<body>
    <div class="flexslider">
        <ul class="slides">
            <li>
                <video src="media/SampleVideo.mp4" autoplay muted loop></video>
            </li>
            <li>
                <img src="media/img01.jpg" />
            </li>
            <li>
                <img src="media/img02.jpg" />
            </li>
            <li>
                <img src="media/img03.jpg" />
            </li>
        </ul>
    </div>
</body>

Thanks in advance! Greetings, Laura