Slick Slider Video

[tdrsam]

I'm using Ken Wheeler's Slick Slider with some videos but for some reason the first video in the cue doesn't play.

It plays after the list has played through and it goes back to the first video, but I'm going to need it to play on page load as well.

This is the HTML:

<section class="col1">
    <div><video width="1280px" height="720px" autoplay class="video" src="video/video1.mp4" type="video/mp4">Your browser does not support video</video></div>
    <div><video width="1280px" height="720px" autoplay class="video" src="video/video2.mp4" type="video/mp4">Your browser does not support video</video></div>
    <div><video width="1280px" height="720px" autoplay class="video" src="video/video3.mp4" type="video/mp4">Your browser does not support video</video></div>
    <div><video width="1280px" height="720px" autoplay class="video" src="video/video4.mp4" type="video/mp4">Your browser does not support video</video></div>
    <div><video width="1280px" height="720px" autoplay class="video" src="video/video5.mp4" type="video/mp4">Your browser does not support video</video></div>
    <div><video width="1280px" height="720px" autoplay class="video" src="video/video6.mp4" type="video/mp4">Your browser does not support video</video></div>
</section>
 

This is the JS:

$(document).ready(function(){
    $('.col1').slick({
    autoplay: true,
    autoplaySpeed: 7000,
    fade: true,
    pauseOnHover: false,
  });
});
 
 
 
 
$('.col1').on('afterChange', function(event, slick, currentSlide)
{
    var vid = $(slick.$slides[currentSlide]).find('video');
    if (vid.length > 0)
    {
        $('.col1').slick('slickPlay');
    $(vid).get(0).play();
    }
});
 
$('video').on('ended',function()
{            
    console.log('Video Complete')
    $('.col1').slick('slickPlay');
});