Skip to main content
laxus
laxus
Participating Frequently
July 31, 2018
Answered

My HTML video does not appear in Chrome, Opera and IE while appears in MS Edge

  • July 31, 2018
  • 2 replies
  • 20902 views

Hello

i just tried to create a fullscreen video background using HTML in Dreamweaver, but when i previewed it, it only appears in MS Edge but not in Chrome, Opera or IE, can anyone help explain what's going on please

<body>

   <header class="vid-bg container">

      <div class="fullscreen-video">

         <video src="assets/Showcase.mp4" autoplay="true" loop="true"></video>

      </div>

   </header>

</body>

This topic has been closed for replies.
Correct answer Jon Fritz

Chrome is reading the play time of the video file, as it is showing the length of the video in the controls. Which indicates the file format may be the problem, the poster image will not show in such circumstances.

Have you tried including the video in webm format or any other format along with mp4?


There's definitely something wrong with the .mp4 itself.

All of the programs I have on my system, that typically handle .mp4 without issue, refuse to open it at all. The closest I get is Chrome, with the 12 second run time in the control bar.

I'm guessing the file is corrupt or maybe exported from whatever program using a strange video codec.

2 replies

pziecina
pziecina
Legend
July 31, 2018

Not all videos that say they are mp4 are mp4 as required for all browsers.

The easy way to check if it is the mp4 video format causing the problem is to insert a poster image as fallback with the video code. That way if the image shows in none supporting browsers you will know it is a problem with the mp4 format being used.

laxus
laxusAuthor
Participating Frequently
July 31, 2018

Not all videos that say they are mp4 are mp4 as required for all browsers.

The easy way to check if it is the mp4 video format causing the problem is to insert a poster image as fallback with the video code. That way if the image shows in none supporting browsers you will know it is a problem with the mp4 format being used.

i tried this but still doesn't show, i also tried adding controls, all i can see is the controls but not the video nor its poster

Microsoft Edge

Google Chrome

pziecina
pziecina
Legend
July 31, 2018

Chrome is reading the play time of the video file, as it is showing the length of the video in the controls. Which indicates the file format may be the problem, the poster image will not show in such circumstances.

Have you tried including the video in webm format or any other format along with mp4?

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
July 31, 2018

Have a look at How To Create a Fullscreen Video Background

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
laxus
laxusAuthor
Participating Frequently
July 31, 2018

still the same problem, i can see it in Microsoft Edge browser only, you see, there is nothing wrong with the code

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 31, 2018

Your issue is most likely tied to code errors, browser security or caching.

For code errors, go to http://validator.w3.org/nu and clean up anything it lists.

If your browsers are set to the higher security levels, they may be blocking locally linked files. The best way around this is to upload your page to a test location on your server and test it in each browser from there. Typically it's Microsoft browsers that are overzealous with local file security though.

To see if it's a caching issue, try opening Chrome's Developer Tools (F12) and clicking the Network heading. That will give you the option to Disable Cache. Check that box and reload the page with the Dev Tools open. If your video appears, it was a cache issue. A note, the Dev Tools panel needs to be open in Chrome in order to see your page with cache disabled. Once you close it, the browser goes back to caching normally (which is terribly sticky).

I checked, no errors

About browser security i uploaded the page to a test location (theghostsoldier.rf.gd) still can't see it (only in MS Edge/takes about 15 seconds for the video to start)

About caching, i didn't understand what you mean i pressed F12 but i didn't understand, after all i'm just a beginner here, but i used incognito, i'm sure it doesn't store cache...

incognito


Try using a different video file.  Yours is corrupted.

Also, many older devices don't support loop & autoplay unless audio is muted.

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>HTML5 Video Example</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

video {

height:100%; width:100%;

display:block; margin: 0 auto }

</style>

</head>

<body>

<video controls poster="https://placeimg.com/525/300/nature">

<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">

</video>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices