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

Report · Jul 30, 2018

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>

Report · Jul 30, 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!

Report · Jul 31, 2018

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

Report · Jul 31, 2018

laxus wrote
there is nothing wrong with the code

Not trying to split hairs, but the code you provided in your post does not match the same format as:

Is the above code also not appearing in IE, Chrome, or Opera? Check browser settings for security that is too high, or even network settings. Something is amiss, and I don't think it's the code.

V/r,

^ _ ^

Report · Jul 31, 2018

Yes it does not match the same format as the one you gave me, but i think there are different ways to write a code and both should work, that's what i learned so far (my first week learning HTML/CSS )

anyway i thought the problem is in my browsers first but i uploaded my website and tried to view it in two of my friends laptops, still the same problem, such a weird problem, i really like this background video thing (Note:i can see other stuff, images, texts... just fine)

Report · Jul 31, 2018

laxus wrote
Yes it does not match the same format as the one you gave me, but i think there are different ways to write a code and both should work, that's what i learned so far (my first week learning HTML/CSS )
anyway i thought the problem is in my browsers first but i uploaded my website and tried to view it in two of my friends laptops, still the same problem, such a weird problem, i really like this background video thing (Note:i can see other stuff, images, texts... just fine)

Get a test page online and post a link. That is the only way to test your code and eliminate little debates

Note to audience... this is why we make extensions

PVII Video Background Magic for Dreamweaver

Report · Jul 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).

Report · Jul 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

Report · Jul 31, 2018

Try using a different video file. Yours is corrupted.

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

<!doctype html>

<head>

<title>HTML5 Video Example</title>

<style>

video {

height:100%; width:100%;

display:block; margin: 0 auto }

</style>

</head>

<body>

</video>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 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.

Report · Jul 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

Report · Jul 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?

Report · Jul 31, 2018

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.

Report · Jul 31, 2018

Hi Jon,

There is a mp4 codex that is proprietary but is supported in windows 10 (Edge and Windows 10 media player, but not IE11).

See the mp4 (h264) section, and other mp4 formats in -

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Report · Jul 31, 2018

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

Yes, it was the mp4 file itself who's causing the problem after all, originally i exported the video from Premiere Pro under the h264 format, but the size exported was about 25mb, and the web host i'm using limits the upload size to 10mb so i had to convert it using Format Factory, to reduce the file size. so that's where i went wrong, now i ditched some seconds from the video to reduce the size and used the original video, and it worked

Thank you and to everyone who helped. much appreciated!

Report · Jul 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?

Yes, the webm file worked even without the mp4 file, even though i converted an already converted mp4 video with Format Factory to webm still has worked!

Thanks for the help!

Online converter i used: Convertio — File Converter

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

1 Correct answer

incognito