css - 响应式 HTML5 CSS 使用媒体查询为不同的屏幕尺寸创建不同的视频设置

Question

我想在我的响应式网站中有 2 个不同的视频，一个应显示在 PC 屏幕上，另一个应显示在 1025 像素以下的屏幕尺寸上。我必须这样做的原因是因为我希望视频在 PC 上自动播放但自动播放在移动设备上不可用，因此对于移动设备我必须添加控件并从 html 中删除自动播放。

所以这是我当前的代码，其中一个视频仅适用于所有屏幕尺寸，由于上述原因未设置为自动播放。我的问题是如何更改 CSS 媒体查询中的此代码以包含 2 个具有不同设置的视频:1 个用于 PC 屏幕自动播放，1 个用于移动屏幕播放器。我下面的当前代码工作正常，在播放器中使用控件在所有设备上显示视频。我只有 1 个 CSS 样式表文件与此分隔:

@media only screen and (min-width: 150px) and (max-width: 1025px)

html:

<div class="videoScreen">

        <video src="video/somevideo.mp4" controls="controls"></video>

    </div>

@media 上面的 CSS

.videoScreen video {
    width:99.8%;
    height: auto;
    margin: 0.5% 0 0 0;

}

@media 下方的 CSS

.videoScreen video {
    width:100%;
    height: auto;
    margin: 3% 0% 0% 0%;


    }

Answer 1

这对我有用。

注意:我省略了额外的 BootstrapCSS 代码，这些代码实际上调整了每个视频的大小和位置以及显示的视频。

大型 HTML:

<video id="large-video" class="embed-responsive-item" controls>
        <source src="somevideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
</video>

小型 HTML:

<video id="small-video" class="embed-responsive-item" controls>
        <source src="somevideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
</video>

JQuery 代码

$(document).ready(function () {
  if ($(window).width() > 1025) {
    $('#large-video').attr('autoplay', 'autoplay');
  } else {
    $('#small-video').attr('autoplay', 'autoplay');
  }
});