Geek Answers Handbook

How to troubleshoot html5 video without playing using Coverr code

I downloaded the video from Coverr and added HTML, CSS, and JS to my homepage.

However, the video does not play.

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>

I don’t see errors in the console, so I don’t know why the video does not play in the latest versions of Chrome or Firefox.

Help evaluate.

+6
source share
1 answer

Your video is actually playing, but it is hidden under your div poster. If you have no other reason to use a separate separator for the poster, you should use the poster attribute for the video element, for example:

  <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>

But if you have an autoplay attribute, you won’t need a poster, except maybe when the video is loading slowly.

To annotate a video with text, you can do something like this:

 <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>

Then in 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; }
+4
source

More articles:


All Articles