怎样在html中不显示R代码,html5-video – 如何使用Coverr的代码解决html5视频无法播放的问题...

我已经从

Coverr上传了一个视频,并将HTML,CSS和JS添加到了我的主页.

但是,视频无法播放.

HTML：

Your browser does not support the video tag. I suggest you upgrade your browser.

Your browser does not support the video tag. I suggest you upgrade your browser.

CSS：

.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%;

}

JS：

//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');

});

}

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

帮助赞赏.