HTML5中的<audio>和<video>元素是新增的多媒体标签，它们使得在网页中嵌入音频和视频内容变得更加简单和方便。这些元素可以替换之前使用的Flash和其他浏览器插件来播放音频和视频，并且支持跨浏览器兼容性。

<audio>元素用于在网页中嵌入音频内容，可以通过<source>子元素指定音频文件的路径，或者直接在<audio>标签中使用<source>子元素来指定多个音频格式。例如：

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

上述代码中，<audio>标签包含一个controls属性，用于显示音频播放器的控件面板。在<audio>标签中，可以添加多个<source>子元素来指定不同格式的音频文件，以便在不同浏览器上播放。如果浏览器不支持<audio>元素，将显示最后一个<source>子元素中的文本内容。

<video>元素用于在网页中嵌入视频内容，同样可以通过<source>子元素指定视频文件的路径，或者直接在<video>标签中使用<source>子元素来指定多个视频格式。例如：

<video controls width="320" height="240">  
  <source src="video.mp4" type="video/mp4">  
  <source src="video.ogg" type="video/ogg">  
  您的浏览器不支持视频元素。  
</video>

上述代码中，<video>标签包含一个controls属性，用于显示视频播放器的控件面板。在<video>标签中，可以添加多个<source>子元素来指定不同格式的视频文件，以便在不同浏览器上播放。如果浏览器不支持<video>元素，将显示最后一个<source>子元素中的文本内容。同时，通过设置width和height属性来定义视频播放器的大小。

<video>和<audio>元素提供了许多共同的属性，这些属性可以用于确定媒体的当前状态。以下是一些主要的共有属性：

• currentTime：这个属性用于获取或设置当前播放位置（以秒为单位）。它可以帮助开发者确定媒体文件的播放进度。

• duration：这个属性用于获取媒体文件的总长度（以秒为单位）。它可以帮助开发者确定媒体文件的全长。

• paused：这个属性用于检查媒体文件是否处于暂停状态。如果媒体文件暂停播放，那么这个属性将返回true，否则返回false。

• ended：这个属性用于检查媒体文件是否已经播放完毕。如果媒体文件已经播放完毕，那么这个属性将返回true，否则返回false。

• buffered：这个属性用于获取媒体文件的部分缓冲信息。它可以帮助开发者了解媒体文件已经缓冲了多长时间，或者已经缓冲了文件的哪个部分。

• seeking：这个属性用于检查媒体播放器是否正在搜索（或跳转）到新的播放位置。如果正在搜索或跳转，那么这个属性将返回true，否则返回false。

• readyState：这个属性用于获取媒体元素的当前状态。它可以帮助开发者了解媒体文件是否已经加载、准备播放，或者正在播放。

媒体元素有很多事件，这些事件可以监控由于媒体回放或用户交互导致的不同属性的变化。以下是一些常见的事件：

• canplay：当媒体播放器准备开始播放媒体文件时，会触发此事件。

• play：当媒体播放器开始播放媒体文件时，会触发此事件。

• pause：当媒体播放器暂停播放媒体文件时，会触发此事件。

• ended：当媒体播放器播放完媒体文件时，会触发此事件。

• timeupdate：当媒体播放器正在播放媒体文件时，会定期触发此事件。这个事件用于更新媒体播放的进度。

• seeked：当用户已经成功跳转到媒体文件的某个特定位置时，会触发此事件。

• volumechange：当媒体播放器的音量发生变化时，会触发此事件。

可以使用 <audio> 和 <video> 的 play() 和 pause() 方法来手动控制媒体文件的播放，同时结合使用属性、事件和这些方法，可以方便地创建自定义的媒体播放器。

以下是一个简单的示例，展示如何使用 <video> 元素和相关事件来创建一个自定义的视频播放器：

<div class="mediaplayer">  
  <div class="video">  
    <video id="player" src="movie.mov" poster="mymovie.jpg" width="300" height="200">  
      Videoplayernotavailable.  
    </video>  
  </div>  
  <div class="controls">  
    <input type="button" value="Play" id="video-btn">  
    <span id="curtime">0</span>/<span id="duration">0</span>  
  </div>  
</div>

在上面的示例中，使用了一个 <video> 元素来显示视频，同时设置了视频的源文件、封面图片和尺寸。在 <video> 元素外，还创建了一个包含播放按钮和控制时间的 <div> 元素。

接下来，可以使用 JavaScript 来添加控制视频播放的功能：

// 获取视频元素和播放按钮  
var video = document.getElementById('player');  
var playButton = document.getElementById('video-btn');  
  
// 添加事件监听器，在视频加载完成后显示播放时间  
video.addEventListener('load', function() {  
  // 设置当前播放时间和总时长  
  var curTime = video.currentTime;  
  var duration = video.duration;  
  document.getElementById('curtime').textContent = curTime.toFixed(2);  
  document.getElementById('duration').textContent = duration.toFixed(2);  
});  
  
// 添加点击事件监听器，点击播放按钮时播放视频  
playButton.addEventListener('click', function() {  
  if (video.paused) {  
    video.play(); // 播放视频  
  } else {  
    video.pause(); // 暂停视频  
  }  
});

在上面的 JavaScript 代码中，首先获取了视频元素和播放按钮元素。然后，为视频元素的 load 事件添加了一个处理程序，在视频加载完成后显示当前播放时间和总时长。最后，为播放按钮添加了一个点击事件监听器，点击播放按钮时播放或暂停视频。

不同的浏览器对于 <video> 和 <audio> 元素的编解码器支持情况可能会有所不同。为了确保跨浏览器的兼容性，通常需要提供多个媒体源，以覆盖不同的编解码器和格式。

JavaScript 提供了一个名为 MediaDevices 的接口，可以用来检测浏览器是否支持给定的媒体格式和编解码器。下面是一个简单的示例，演示如何使用 MediaDevices 接口来检测浏览器是否支持 H.264 视频编解码器：

// 获取 MediaDevices 接口  
var mediaDevices = navigator.mediaDevices;  
  
// 检查是否支持 H.264 视频编解码器  
if (mediaDevices && mediaDevices.supportedFormats) {  
  var supportedFormats = mediaDevices.supportedFormats('video');  
  if (supportedFormats.includes('mp4')) {  
    console.log('浏览器支持 H.264 视频编解码器');  
  } else {  
    console.log('浏览器不支持 H.264 视频编解码器');  
  }  
} else {  
  console.log('无法获取 MediaDevices 接口或不支持视频格式检查');  
}

在上面的示例中，首先获取了 MediaDevices 接口。然后，检查 mediaDevices.supportedFormats 是否为真，以确定是否可以检查支持的格式。最后，通过调用 mediaDevices.supportedFormats('video') 来获取浏览器支持的视频格式列表，并检查是否包含 'mp4'（H.264）。

注意：MediaDevices 接口可能不在所有浏览器中都可用。此外，即使浏览器支持特定的编解码器，也可能由于用户设备的硬件限制而不一定可用。因此，为了提供最佳的用户体验，通常建议提供多个媒体源，并使用 HTML 的 <source> 元素来指定备用媒体源。

HTML 的 <audio> 元素和原生的 JavaScript Audio 构造函数都是用于在网页中嵌入音频内容的方法。

<audio> 元素是一种HTML5标准中的多媒体元素，用于在网页上嵌入音频内容。它有许多属性，如 src、autoplay、controls 等，可以控制音频的来源、播放行为和显示方式。

而 Audio 构造函数是一个JavaScript原生对象，它允许创建一个音频对象，然后可以控制这个音频对象的行为，比如播放、暂停、改变音量等。这个对象不一定要插入到文档中就可以工作，这使得它在处理一些动态的音频内容时非常有用。

以下是一个使用 Audio 构造函数的基本示例：

var audio = new Audio('http://example.com/audio.mp3');  
audio.play();

在这个例子中，创建了一个新的 Audio 对象，并指定了一个音频文件的URL。然后调用了 play 方法开始播放音频。注意：因为安全问题，音频文件需要与网页在同一个域上，或者需要用户手动允许跨域播放。

也可以在音频播放过程中添加事件监听器来处理播放状态的变化：

var audio = new Audio('http://example.com/audio.mp3');  
audio.onplay = function() {  
    console.log('音频开始播放');  
};  
audio.onpause = function() {  
    console.log('音频暂停');  
};  
audio.onended = function() {  
    console.log('音频播放结束');  
};  
audio.play();

在这个例子中，添加了 onplay、onpause 和 onended 事件监听器，当音频的播放状态发生变化时，就会执行相应的处理函数。