HTML视频具有控件，但不会加载视频或播放

Question

这是针对学校作业的，但我似乎无法让视频正常工作。

我正在使用chrome。按钮加载，播放器也是如此（黑屏），但我无法让它看起来有用。

<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="myVideo" width="420">
   <source src="audi.mp4" type="video/mp4">
 </video>
</div> 

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

 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>