I just started a new job and during my lunch brake I wanted to work on practicing some skills to prep for the MS 70-480 specialist exam. I prefer using Google Chrome, but the company has rules about installing software for personal use so I am stuck working on IE (version:11.0.9600.18015).
So in notepad++ I created the simple test for HTML5's video element.
<!DOCTYPE html>
<html>
<head>
<title>70-480 Test Page</title>
</head>
<body>
<header>
<h1>Practice makes perfect</h1>
</header>
<section id="sandbox">
<video width="400" controls="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" >
Your browser does not support the video element.
</video>
</section>
</body>
</html>
But the page came back without the video showing. I checked the Developer tools and found in the DOM Explorer elements native to the HTML5 (header, video, section, etc.) are not being recognized and instead are showing such as:
...
<body>
<header></header>
<h1>Practice makes perfect</h1>
</header><//header>
<section id="sandbox"></section>
<video controls="" width="400"></video>
<source src="http://www/w3schools.com/html/mov_bbb.mp4"></source>
</video><//video>
</section><//section>
</body>
....
I know IE11 supports the elements since when I copy my code to JSfiddle on that same browser it shows up fine. Is there an explanation for why Internet explorer is giving me this head ache?
Both Pedro Mendes and Lance Leonard's comments worked.
Pedro's solution:
Does your browser have the "Edge (default)" document mode set? Try this tag inside the header
Lance's solution:
Your page is likely being loaded in compatibility view. Please see this previous answer for more info.
I decided to go with Lance's solution so that if I make more pages in the future I won't have to include the meta tag every time.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With