why my video doesnt play in html5?

I am trying to play a video with html5. Its not working in any browser.

I create buttons for play/pause etc. I use functions to enable the button functionalities.

I use a w3schools example but my video is not working.

I just see a black screen.

I get below error i firebug when i click on buttons.

TypeError: myVideo is null

My code is below. Why my video doesnt work?

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body>
</html>

Solution

Your code is fine see here - if I plug the sample URL from videojs it works fine.

May I suggest you try reading this article to get started with HTML5 video rather than W3schools.

You either have a file format issue with your video file or a server config issue (probably with your mime types but everything is explained in the above link).

If you want to know more about the exact reason for your error code you can try the code at the end of this section.

HTML5 video can be tricky in the beginning but you will get to it :)

JSfiddle code:

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br /> 
  <video id="video1" width="420">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    Your browser does not support HTML5 video.
  </video>
</div> 

<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
if (myVideo.paused) 
myVideo.play(); 
else 
 myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script>