javascript - 如何根据屏幕尺寸播放 2 个不同的视频？

Question

我现在正在编写一个网站的预览，我想知道如何根据用户在移动设备或桌面上播放 2 个不同的视频。

原因是，我有 2 个视频格式正确，适用于桌面和移动设备，但似乎无法弄清楚如何根据屏幕尺寸隐藏一个并显示另一个。

我研究过媒体查询，但不知道从哪里开始。

任何帮助，将不胜感激！

标签： javascripthtmlcss

Answer 1

window.innerWidth; // returns the width in pixels of the window

所以你可以使用类似的东西：

if (window.innerWidth > 425) {
    // display video for desktop
} else {
    // display video for mobile
}