html - 针对网站特定部分的移动检测

Question

我是 Web 开发的初学者，我无法解决这个问题。

我拍摄了一段视频并将其编码为 mp4 文件和 ism 文件。我有两个不同的视频标签——一个可以播放每个文件。对于我正在开发的网站，如果网站正在移动设备上查看，我希望它使用其中一个视频标签，如果不是，则使用另一个。目前该网站采用 HTML5 格式。感谢您提供的任何帮助！

Answer 1

video 标签已经支持备用来源。此处的文章描述了如何为视频包含多个源（因为某些浏览器不支持某些编解码器）。像这样：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

对于移动检查，您可以使用 JavaScript CSS 媒体查询：

function isMobile() {
    return window.matchMedia( "(max-width: 320px)" );
}

看这篇文章

Answer 2

您可以使用基于 UserAgent 的检测来决定显示什么（不推荐，因为您必须维护它）或canPlayType()使用您正在使用的编解码器来查看浏览器是否支持它（更好的选择）