响应式HTML5 CSS使用媒体查询为不同的屏幕大小创建不同的视频设置

Question

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

因此，这是我目前的代码，其中一个视频仅适用于所有屏幕大小，由于上述原因，没有设置为自动播放。我的问题是，如何在CSS媒体查询中更改此代码，使其具有两个不同设置的视频：1个用于PC屏幕的自动播放，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');
  }
});

Answer 2

自动播放并不是真正的css问题。您可以使用javascript/jquery根据屏幕大小更改视频标签的html-

 if (  $(window).width() > 1025px ) {
$(‘.videoScreen’).html(‘whatever your autoplay html is’);
}

Answer 3

最简单的事情就是重写视频的iframe，更改自动播放设置。

 if (  $(window).width() > 1025px ) {
$(‘.videoScreen’).html(‘<iframe width="640" height="390" src="http://www.youtube.com/embed/R95V8u9ZQAw?vq=hd720&amp;autohide=1&amp;autoplay=1&amp;showinfo=0&amp;controls=2&amp;rel=0&amp;color=white" frameborder="0" style="max-height:100%;max-width:100%;"></iframe>’);
}

理想情况下，您可以对触摸设备进行功能检测，而不是根据屏幕宽度进行设置。

http://modernizr.com可以帮上忙。