html5-video – 如何使用Coverr的代码解决html5视频无法播放的问题

但是,视频无法播放.

HTML：

<div class="homepage-hero-module">
    <div class="video-container">
        <div class="filter"></div> 
        <video autoplay loop class="fillWidth"> 
            <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.mp4" type="video/mp4" ></source>Your browser does not support the video tag. I suggest you upgrade your browser. 
            <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.webm" type="video/webm" ></source>Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <div class="poster hidden"><img src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.jpg" alt="Escalate your Business Internet success with the Help of a web professional"></div> 
    </div>
</div>

CSS：

<style>
.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    BACkground: #000;
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    BACkground: rgba(0,0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}
</style>

JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
//jQuery is required to run this code
jQuery( document ).ready(function() {

    scaleVideoContainer();

    initBAnnerVideoSize('.video-container .poster img');
    initBAnnerVideoSize('.video-container .filter');
    initBAnnerVideoSize('.video-container video');

    jQuery(window).on('resize',function() {
        scaleVideoContainer();
        scaleBAnnerVideoSize('.video-container .poster img');
        scaleBAnnerVideoSize('.video-container .filter');
        scaleBAnnerVideoSize('.video-container video');
    });

});

function scaleVideoContainer() {

    var height = jQuery(window).height() + 5;
    var unitHeight = parseInt(height) + 'px';
    jQuery('.homepage-hero-module').css('height',unitHeight);

}

function initBAnnerVideoSize(element){

    jQuery(element).each(function(){
        jQuery(this).data('height',jQuery(this).height());
        jQuery(this).data('width',jQuery(this).width());
    });

    scaleBAnnerVideoSize(element);

}

function scaleBAnnerVideoSize(element){

    var windowWidth = jQuery(window).width(),windowHeight = jQuery(window).height() + 5,videoWidth,videoHeight;

    console.log(windowHeight);

    jQuery(element).each(function(){
        var videoAspectRatio = jQuery(this).data('height')/jQuery(this).data('width');

        jQuery(this).width(windowWidth);

        if(windowWidth < 1000){
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            jQuery(this).css({'margin-top' : 0,'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});

            jQuery(this).width(videoWidth).height(videoHeight);
        }

        jQuery('.homepage-hero-module .video-container video').addClass('fadeIn animated');

    });
}
</script>

我在控制台中看不到任何错误,因此我不知道为什么视频无法在最新版本的Chrome或Firefox中播放.

帮助赞赏.