Question

我希望在我的响应式网站上有2个不同的视频，一个应该显示在PC屏幕上，另一个应该在1025px以下的屏幕尺寸上显示。我必须这样做的原因是因为我希望视频在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：

import matplotlib.pyplot as plt
import numpy as np
x = np.linspace(0, 2 * np.pi, 100)
fig = plt.figure()
plt.close()
for f in [np.sin, np.cos]:
    plt.figure()
    fm = plt.get_current_fig_manager()
    fm.canvas.figure = fig
    fig.canvas = fm.canvas
    plt.plot(x, f(x))
    plt.show()
    plt.close()

HTML for Small：

<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>

jQuery代码

<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>

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可以提供帮助。

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

3 个答案: