HTML5 Video和Audio

1.视频
video提供了播放，暂停和音量空间来控制视频。
标签之间插入的内容是提供给不支持video元素的浏览器显示的。
video元素支持多个source元素，source元素可以连接不同的视频文件，浏览器使用第一个可识别的格式。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

2.为视频添加按钮

<div style="text-align:center"> <!--设置按钮和视频，每个按钮调用相应的函数-->
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 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> 

3.音频

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>