重叠两个视频以制作一个不透明的视频[关闭]答案

【问题标题】：Overlap two video to make one video with opacity [closed]重叠两个视频以制作一个不透明的视频[关闭]
【发布时间】：2019-04-16 23:20:16
【问题描述】：

有 2 个视频和 1 个图片。必须使用 HTML5、javascript 和 css 将视频作为不透明的图片覆盖在图片上进行流式传输。我研究过图书馆的文件。但还是没有成功。这是我的 Css Javascript 和 Html 文件。您必须使用唯一的 javascript。我正在尝试为网站制作视频横幅

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style>
      callout {
    position: relative;
    overflow: hidden;
}
.video-bg,
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
}
.video-overlay {
    background: rgba(0,0,0,0.5);
    pointer-events: none; /* Allows right clicking on the video to pause etc */
}
.video-bg video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.callout-content {
    position: relative;
    text-align: center;
    margin: 50px 0; /* This adds some space around the video */
    color: #FFF;
    text-shadow: 0 0 5px rgba(0,0,0,0.4);
}

  </style>
  <title>videojs-overlay Demo</title>
  <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
  <link href="dist/videojs-overlay.css" rel="stylesheet">
</head>
<body>

<section class="callout">
    <div class="video-bg">
        <video autoplay loop muted poster="path/to/poster.jpg">
            <source src="dog.mp4" type="video/mp4">
    <source src="tree.mp4" type="video/mp4">
        </video>
    </div>
    <div class="video-overlay"></div>
    <div class="callout-inner">
        <!-- Our callout content goes here -->
    </div>
</section>


</body>
</html>

【问题讨论】：

标签： javascript jquery css html reactjs

【解决方案1】：

我认为您需要简化。

opacity 似乎可以工作。

#video {
  position: absolute;
  top: 0;
  left: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
}

<video id="video" width="320" autoplay loop>
    <source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0063.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>
<video id="overlay" width="320" autoplay loop>
    <source src="https://lab-uvpgzbvzbl.now.sh/videos/IMG_0074.mov" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

【讨论】：

它不会自动播放。是他们的任何cdn调用的东西。 @will
在 Safari 中工作。 ¯_(ツ)_/¯