Video And Audio

1、Video，视频文件在浏览器中播放

有多少种视频文件的格式我没看，我用的是mp4，在所有浏览器,IE9及以上的浏览器中都能播放。

<video src="sources/1.mp4" 
          width="500" height="400" 
          controls="controls" 
          preload="auto" 
          poster="1.png" 
          muted="muted" 
          loop="loop" 
          autoplay="autoplay"
></video>

<video controls width="500" height="400" 
          preload="auto" 
          poster="1.png" 
          muted="muted">
      <source src="sources/1.mp4" type="video/mp4" />
      <source src="sources/1.ogg" type="video/ogg" />
      Your browser does not support the video tag.
</video>

下面的写法可以播放多种格式。

• src：要播放的视频的URL。
• width：视频显示的宽。
• height：视频显示的高。
• controls：显示控件。
• preload：是否在页面加载后载入视频。
  • auto，在页面加载后载入整个视频。
  • meatadata，在页面加载后载入视频文件的元数据。
  • none，当页面加载后不载入视频。
• poster：规定在视频下载时显示的图像，或在点击播放按钮前显示的图像。
• muted：规定视频的音频输出应该被静音。
• loop：在完成播放后再次开始播放。
• autoplay：自动播放。

var video = document.getElementById('video');
video.play(); //播放
video.pause(); //暂停

2、Radio，音频

<audio src="sources/1.mp3" 
      loop="loop" 
      controls="controls" 
      autoplay="autoplay">
      您的浏览器不支持 audio 标签。
</audio>

• src：歌曲的路径。
• controls：播放控件。
• loop：歌曲循环。
• autoplay：自动播放。

var audio = document.getElementById('audio');
audio.play(); // 播放
audio.pause(); // 暂停
audio.load(); // 重新加载歌曲

我发现了，不管是视频还是音频，在各个浏览器中的控件显示的都是不一样的。