如何在html的大屏幕上以小屏幕和视频显示图像

时间:2015-06-30 03:48:23

标签: javascript jquery html5 css3

我有一个Python / Flask应用程序需要在大屏幕上显示背景 - 视频,如台式机,笔记本电脑和平板电脑。但对于手机,它应该只显示图像而不是视频?我该怎么做?并且可以仅使用CSS / Jquery来完成吗?

2 个答案:

答案 0 :(得分:1)

是的,是的,它可以。假设您只有一个视频,则需要截取第一帧的屏幕截图并将其另存为图像。在Javascript中,您要检查设备的性质,然后隐藏视频并在检测到移动浏览器时显示图像,否则显示视频并隐藏图像。有一种简洁的方法可以在this question获取设备类型。

我就是这样做的,但是YMMV:

的Javascript

$('document').ready(function() {
     if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|UC Browser/i.test(navigator.userAgent) ) {
      $('#videoID').hide();
      $('#imageID').show();
     }

     else {
      $('#videoID').show();
      $('#imageID').hide();
     }
});

HTML

<body>
 <!--Try to support multiple formats. The best way to do this is to create
 different elements for each possible file type and dynamically swap them
 out by browser. There are other tutorials to help you do this-->

<video id="videoID" source="video.format" codecs="relevantCodec"></video>

<img src="img.format" id="imageID" />
</body>

CSS

#videoID{
    display:none;
}

#imageID{
    display:block;
}

答案 1 :(得分:0)

您需要了解响应式设计。是的,响应式设计主要通过CSS和Jquery实现。这是最好的方式