当前位置： 文江博客话题详情

如果在移动设备上，将 html 背景更改为视频中的图像

发布于 2025-01-13 04:25:04 字数 1050 浏览 3 评论 0原文

我目前正在开发一个使用自动播放视频背景的网站，但是这在移动设备上扩展得很差，并且仅位于屏幕的前三分之一...

是否可以在 CSS 中检测移动用户，并将背景更改为合适的肖像图像？

您可以在此处查看网页： https://content.obstrude.com/login

如您所见，该视频在 PC 上效果很好，但在移动设备上却占据了屏幕的前三分之一！

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
  opacity: 0;
  filter: alpha(opacity=50);
  /* For IE8 and earlier */
}
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="/static/img/login.mp4" type="video/mp4">
    </video>
</body>

</html>

原文

I'm currently developing a website which uses an autoplay video background, however this scales badly on mobile and only sits in the top third of the screen...

Would it be possible in CSS to detect a mobile user, and change the background to a suitable portrait image?

You can view the webpage here: https://content.obstrude.com/login

As you can see, the video works nicely on PC, however on mobile fills the top third of the screen!

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
  opacity: 0;
  filter: alpha(opacity=50);
  /* For IE8 and earlier */
}
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="/static/img/login.mp4" type="video/mp4">
    </video>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

甜是你 2025-01-20 04:25:04

是的，您可以使用 媒体查询 来检测屏幕宽度窄。

像这样的事情：

// this would affect screen widths up to 600px
@media screen and (max-width: 600px) {
  .className {
    /* put your mobile styles here */
  }
}

查看这篇关于此事的文章https： //css-tricks.com/a-complete-guide-to-css-media-queries/

对于您的确切用例，我建议完全取消视频，而使用 css 动画来实现相同的效果影响。然后，您可以调整它们，以便按照您想要的方式在移动设备上制作动画。

Yep you could use a media query to detect a narrow screen width.

Something like this:

// this would affect screen widths up to 600px
@media screen and (max-width: 600px) {
  .className {
    /* put your mobile styles here */
  }
}

Check out this article on the matter https://css-tricks.com/a-complete-guide-to-css-media-queries/

For your exact use case, I would recommend doing away with the video altogether and instead using css animations to achieve the same effect. You can then instead adjust them to also animate on mobile in the way that you want.

回复 原文
绅刃 2025-01-20 04:25:04

这是使用media-queries的基本示例。

调整浏览器大小以查看其工作情况。

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
  opacity: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  /* For IE8 and earlier */
}

@media only screen and (max-width: 600px) {
  img {
    opacity: 1;
  }
  video {
    opacity: 0;
  }
}
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
    </video>
  <img src="https://dummyimage.com/600x400/000/fff&text=Could+also+use+this+as+poster.">
</body>

</html>

Here is a basic example using media-queries.

Resize the browser to see it work.

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
  opacity: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  /* For IE8 and earlier */
}

@media only screen and (max-width: 600px) {
  img {
    opacity: 1;
  }
  video {
    opacity: 0;
  }
}
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
    </video>
  <img src="https://dummyimage.com/600x400/000/fff&text=Could+also+use+this+as+poster.">
</body>

</html>

回复 原文
长发绾君心 2025-01-20 04:25:04

您还可以将display属性从none切换到block，反之亦然，以根据屏幕的大小在视频和图像之间切换。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      img {
        display: none;
      }
      @media screen and (max-width: 480px) {
        video {
          display: none;
        }
        img {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <video autoplay muted>
        <source src="sample.mp4" type="video/mp4" />
      </video>
      <img src="https://via.placeholder.com/300" />
    </div>
  </body>
</html>

You can also toggledisplay property from none to block and vise-versa to switch between video and image depending upon the size of the screen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      img {
        display: none;
      }
      @media screen and (max-width: 480px) {
        video {
          display: none;
        }
        img {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <video autoplay muted>
        <source src="sample.mp4" type="video/mp4" />
      </video>
      <img src="https://via.placeholder.com/300" />
    </div>
  </body>
</html>
回复 原文
菩提树下叶撕阳。 2025-01-20 04:25:04
video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
     display: none;
}
@media screen and (max-width: 480px) {
video {
      display: none;
      }
img {
     display: block;
     }
   }
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="/static/img/login.mp4" type="video/mp4">
    </video>
    <img src="/static/img/image.png">
</body>

> You just need to make display hide and show when you want.For example at mobile view you can simply make display of video none and for image make it display block

</html>

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
     display: none;
}
@media screen and (max-width: 480px) {
video {
      display: none;
      }
img {
     display: block;
     }
   }
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="/static/img/login.mp4" type="video/mp4">
    </video>
    <img src="/static/img/image.png">
</body>

> You just need to make display hide and show when you want.For example at mobile view you can simply make display of video none and for image make it display block

</html>

回复 原文
绝情姑娘 2025-01-20 04:25:04

您可以使用媒体查询来实现：

@media only screen and (max-width: 600px) {
  .background {
    background-image: xyz.png;
  }
  
  video {
   display: none;
  }
}

You can use media queries for that:

@media only screen and (max-width: 600px) {
  .background {
    background-image: xyz.png;
  }
  
  video {
   display: none;
  }
}
回复 原文
~没有更多了~

关于作者

知你几分

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文