logo标签列表

如何在我的网站上模拟手机屏幕播放视频？

javascripthtmlcsshtml5-video
5
我想在我的网站上展示视频，但我希望这些视频被放在手机框架内，例如 enter image description here 我希望视频能够在类似于白色手机框架的东西里播放。
希望我表述清楚了。但我不知道如何实现这个想法。 谢谢
在编程中，使用手机框架图像作为背景或伪元素:before、:after。 - Aman
2个回答
9
希望这能对某些人有所帮助：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="smartphone">
  <div class="content">
    <iframe src="https://wpcoder.co.uk/links/mixkit-man-holding-neon-light-1238-large.mp4" style="width:100%;border:none;height:100%" />
  </div>
</div>

</body>
</html>

CSS：

/* The device with borders */
.smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone .content {
  width: 360px;
  height: 640px;
  background: white;
}

实例演示：https://codepen.io/neilbannet/pen/WNvqNLR

5

视频托管

您有两个选项：

  1. 在您的服务器上自行托管视频，并使用video和source标签将其嵌入网页。 HTML:
<video>
   <source src="video.mp4" type="video/mp4" />
   <!-- src and type are an example -->
</video>
  1. （最受欢迎的选项）将视频托管到第三方服务，如YouTube、Vimeo或Dailymotion。然后，您只需要嵌入视频，这个选项通常可以在共享菜单中找到。

将视频放置在手机图像上

一旦您将视频嵌入网页，您需要在网页上嵌入一个手机图像。您可能有想使用的手机图像，或者您可以从最大的三个版权免费图像网站之一导入：

  1. Unsplash
  2. Pexels
  3. Pixabay

一旦您将视频和图片嵌入网页，就开始编辑HTML和CSS：

  1. 将视频的 z-index 值设置为比图片高，以使其在图片之上显示。 CSS：
/* For Video: */

/* Use this if you hosted the video yourself: */

video {
    z-index: 999; /* any value greater than img's */
}

/* Use this if you used a host: */
iframe {
    z-index: 999; /* any value greater than img's */
}

/* For Image: */

img {
    z-index: -999; /* any value smaller than video's */
}
  1. 在CSS中将视频的position设置为absolute，以便它不会与图像同时出现，并且添加像素值到left、right、top和/或bottom，以使它恰好位于手机图像上方。 CSS：
/* Use this if you hosted yourself: */

video {
    position: relative;
    top: 10px; /* example */
    left: 5px; /* example */
}

/* Use this if you use a host: */

iframe {
    position: relative;
    top: 10px; /* example */
    left: 5px; /* example */
}

现在调整视频的高度和宽度，直到它完美地适配手机屏幕。 HTML:
<!-- Use this if you hosted the video yourself: -->

<video>
   <source src="video.mp4" type="video/mp4" width="100px" height="500px" />
   <!-- src, type, width and height are an example -->
</video>

<!-- If you used a host, edit width and height in embed tag(s) they provided: -->

<iframe width="100px" height="500px"></iframe>
<!-- Width and height are an example -->

我成功地做到了这一点，通过将来自YouTube的音乐视频放置到来自Unsplash的手机图像上：JSBin 或从此处运行代码片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Video in Phone</title>
  <style>

    iframe {
      position: absolute;
      z-index: 9999;
      left: 115px;
      top: 133px;
    }

    img {
      z-index: -9999;
    }

  </style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1505156868547-9b49f4df4e04?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80" height="500px" />
<iframe width="140px" height="250px" src="https://www.youtube.com/embed/uYg4cUyJ7v0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
你为什么要将它上传到Youtube，而不是直接将视频放在<video>标签中，而不是<iframe>标签中？这样做有什么好处吗？ - user8585349
提醒：您的指令中有错误。您说：“2. 在CSS中将视频的位置设置为absolute...”，但是在随后的代码中，您使用了position: relative。 - inspirednz
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接