Highlighted

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

New Here ,
Jul 30, 2018

Copy link to clipboard

Copied

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>

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

5.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Jul 30, 2018

Copy link to clipboard

Copied

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>

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

5.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 30, 2018 0
Adobe Community Professional ,
Jul 30, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 30, 2018 0
New Here ,
Jul 31, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
LEGEND ,
Jul 31, 2018

Copy link to clipboard

Copied

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:

<video autoplay muted loop id="myVideo">
  <source src="assets/Showcase.mp4" type="video/mp4">
</video>

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
New Here ,
Jul 31, 2018

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
Mentor ,
Jul 31, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 1
Adobe Community Professional ,
Jul 31, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 1
New Here ,
Jul 31, 2018

Copy link to clipboard

Copied

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

Check.jpg

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
Adobe Community Professional ,
Jul 31, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 1
LEGEND ,
Jul 31, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 1
New Here ,
Jul 31, 2018

Copy link to clipboard

Copied

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

Edge.jpg

Google Chrome

Chrome.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
LEGEND ,
Jul 31, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 1
Adobe Community Professional ,
Jul 31, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 1
LEGEND ,
Jul 31, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
New Here ,
Jul 31, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
laxus LATEST
New Here ,
Jul 31, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0