HTML5 对媒体元素进行了增强,引入了 <audio> 和 <video> 元素,使得在网页中嵌入音频和视频变得更加简单。以下是关于这两个元素的基本用法:

<audio> 元素
<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>

  •  controls 属性添加了音频播放器的控件,如播放、暂停、音量控制等。

  •  <source> 元素用于指定音频文件的源和类型。您可以提供多个 <source> 元素,浏览器将选择支持的第一个源。


<video> 元素
<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

  •  width 和 height 属性用于设置视频播放器的宽度和高度。

  •  controls 属性添加了视频播放器的控件。

  •  <source> 元素用于指定视频文件的源和类型。


此外,HTML5 还引入了一些 JavaScript API,允许通过脚本控制媒体的播放、暂停等操作。例如,可以使用 play() 方法开始播放媒体,使用 pause() 方法暂停播放。
<script>
  var audio = document.getElementById("myAudio");
  
  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }
</script>

这是一个简单的示例,展示了如何通过 JavaScript 控制音频的播放和暂停。


转载请注明出处:http://www.zyzy.cn/article/detail/12495/HTML5