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

Question

我从Coverr 上传了一个视频，并将 HTML、CSS 和 JS 添加到我的主页。

但是，视频无法播放。

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, 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 中播放。

帮助表示赞赏。

Answer 1

您的视频实际上正在播放，但它隐藏在您的海报 div 下。除非您有其他理由为海报使用单独的 div，否则您应该考虑为视频元素使用海报属性，如下所示：

    <video autoplay loop class="fillWidth"  poster="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.jpg"> 
        <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.mp4" type="video/mp4" ></source> 
        <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="video-container">
    <div class="filter"></div> 
    <video loop class="fillWidth"  poster="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.jpg"> 
        <source src="https://doig.website.technology/wp-content/uploads/2016/09/Escalate.mp4" type="video/mp4" ></source>
        <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="video-annotation-layer">
      <div id="video-annotation-1">Hello there!!</div>
      <div id="video-annotation-2">Hey buddy!!</div></div>
</div>

然后在 CSS 中：

.video-annotation-layer{
    width:100%;
    height:100%;
}
#video-annotation-1{
    position:absolute;
    top:40%;
    left:40%;
    font-size:50px;
    text-align:center;
}
#video-annotation-2{
    position:absolute;
    top:60%;
    left:30%;
    color:blue;
    background-color:white;
    font-size:40px;
    text-align:center;
}