gpt4 book ai didi

javascript - 如何在html中在小屏幕上显示图像和在大屏幕上显示视频

转载 作者:太空宇宙 更新时间:2023-11-04 11:43:56 26 4
gpt4 key购买 nike

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

最佳答案

是的,是的,它可以。假设您只有一个视频,您需要截取第一帧的屏幕截图并将其保存为图像。在 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;
}

关于javascript - 如何在html中在小屏幕上显示图像和在大屏幕上显示视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31129173/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com