HTML 如何通过html5的video标签检查浏览器是否可以播放mp4

在本文中，我们将介绍如何通过使用html5的video标签检查浏览器是否支持播放mp4格式的视频文件。

阅读更多：HTML 教程

HTML5的video标签

HTML5引入了video标签，允许我们在网页上直接播放视频。video标签有多种属性，可以用来控制视频的播放和展示效果。

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

在上面的例子中，我们使用了video标签来播放名为video.mp4的视频文件。如果浏览器支持播放mp4格式的视频文件，就会显示出视频控制条，否则就会显示后备内容”Your browser does not support the video tag.”。

检查浏览器是否支持mp4格式的视频

如果我们想要更精确地检查浏览器是否支持播放mp4格式的视频，可以使用canPlayType()方法来测试。

<script>
  var video = document.createElement('video');
  var canPlayMp4 = video.canPlayType('video/mp4');

  if (canPlayMp4 === 'probably') {
    console.log('浏览器支持播放mp4格式的视频');
  } else if (canPlayMp4 === 'maybe') {
    console.log('浏览器可能支持播放mp4格式的视频，但不确定');
  } else {
    console.log('浏览器不支持播放mp4格式的视频');
  }
</script>

在上面的例子中，我们首先创建了一个video元素，然后调用其canPlayType()方法来测试浏览器是否支持播放video/mp4类型的视频。如果返回的结果是’probably’，则说明浏览器支持；如果是’maybe’，则表示可能支持但不确定；如果是空字符串，则说明不支持。

浏览器支持的视频格式

除了mp4格式，HTML5的video标签还支持其他的视频格式，如webm、ogg等。如果我们希望检查浏览器支持的所有视频格式，可以使用以下代码：

<script>
  var video = document.createElement('video');
  var canPlayMp4 = video.canPlayType('video/mp4');
  var canPlayWebm = video.canPlayType('video/webm');
  var canPlayOgg = video.canPlayType('video/ogg');

  if (canPlayMp4 === 'probably' || canPlayWebm === 'probably' || canPlayOgg === 'probably') {
    console.log('浏览器支持播放多种视频格式');
  } else if (canPlayMp4 === 'maybe' || canPlayWebm === 'maybe' || canPlayOgg === 'maybe') {
    console.log('浏览器可能支持播放多种视频格式，但不确定');
  } else {
    console.log('浏览器不支持播放多种视频格式');
  }
</script>