悬停时自动播放视频

Question

我正在尝试创建一个音乐网站。

但是当我的观众悬停在 thumbnail .

视频的大小（高度和宽度）应等于 thumbnail。

这是我的代码

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #f2f2f2;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h5 {
  margin: 0px;
  font-size: 1.4em;
  font-weight: 700;
}

p {
  font-size: 12px;
}

.center {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* End Non-Essential  */

.property-card {
  margin: 5px;
  height: 18em;
  width: 14em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 16px;
  overflow: hidden;
  -webkit-box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}

/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image {
  height: 15em;
  width: 14em;
  padding: 1em 2em;
  position: Absolute;
  top: 0px;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image: url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

/* Bottom Card Section */

.property-description {
  background-color: #FAFAFC;
  height: 5em;
  width: 14em;
  position: absolute;
  bottom: 0em;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0.5em 1em;
  text-align: center;
}

/* Social Icons */

.property-social-icons {
  width: 1em;
  height: 1em;
  background-color: black;
  position: absolute;
  bottom: 1em;
  left: 1em;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Property Cards Hover States */

.property-card:hover .property-description {
  height: 0em;
  padding: 0px 1em;
}

.property-card:hover .property-image {
  height: 18em;

}

.property-card:hover .property-social-icons {
  background-color: white;
}

.property-card:hover .property-social-icons:hover {
  background-color: transparent;
}

<body>
    <h1 style="text-align: center;">Relax</h1>
    <div class="center">
      <div class="property-card">
          <a href="#">
              <div class="property-image">
                  <div class="property-image-title"></div>
              </div>
          </a>
          <div class="property-description">
            <h5> Card Title </h5>
            <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p>
          </div>
      </div>
    </div>
</body>

Answer 1

您可以在 video 上使用 poster 属性作为占位符图像。然后，您只需为悬停在您的元素内外的用户添加一个事件侦听器。您的代码中似乎没有任何与视频相关的内容，因此我在下面举了一个示例：

你的HTML：

<div class="video-container">
<video id="my_video" controls poster="/path/to/image.jpg"> <!-- put your image here -->
  <source src="/path/to/video.mp4" type="video/mp4"> <!-- path to your video here -->
</video>
</div>

你的CSS：

.video-container {
width:500px;
height:300px;
}

video {
width:100%;
height:100%;
object-fit:cover;
}

object-fit 将使您的视频尺寸扩大以填满其容器。

最后是你的 JS：

let myVideo = document.getElementById("my_video");

myVideo.addEventListener("mouseover", () => {
    this.play();
});

myVideo.addEventListener("mouseleave", () => {
    this.pause();
});

Answer 2

您可以添加视频元素并隐藏它。将 onmouseover 事件侦听器添加到您的图像并在将鼠标悬停在图像上时播放视频 5 秒，并在 5 秒视频预览后显示图像。

var video = document.getElementById('video')
var image = document.getElementById('image')

image.onmouseover = function() {
  video.style.display = 'block'
  image.style.display = 'none'
  video.play()
  setTimeout(function() {
        video.pause()
        video.currentTime = 0
        video.style.display = 'none'
        image.style.display = 'block'
  }, 5000)
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #f2f2f2;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h5 {
  margin: 0px;
  font-size: 1.4em;
  font-weight: 700;
}

p {
  font-size: 12px;
}

.center {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* End Non-Essential  */

#video {
  margin: 5px;
  height: 18em;
  width: 14em;
  display: none;
  object-fit: cover
}

.property-card {
  margin: 5px;
  height: 18em;
  width: 14em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 16px;
  overflow: hidden;
  -webkit-box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}

/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image {
  height: 15em;
  width: 14em;
  padding: 1em 2em;
  position: Absolute;
  top: 0px;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image: url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

/* Bottom Card Section */

.property-description {
  background-color: #FAFAFC;
  height: 5em;
  width: 14em;
  position: absolute;
  bottom: 0em;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0.5em 1em;
  text-align: center;
}

/* Social Icons */

.property-social-icons {
  width: 1em;
  height: 1em;
  background-color: black;
  position: absolute;
  bottom: 1em;
  left: 1em;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Property Cards Hover States */

.property-card:hover .property-description {
  height: 0em;
  padding: 0px 1em;
}

.property-card:hover .property-image {
  height: 18em;

}

.property-card:hover .property-social-icons {
  background-color: white;
}

.property-card:hover .property-social-icons:hover {
  background-color: transparent;
}

<body>
    <h1 style="text-align: center;">Relax</h1>
    <div class="center">
      <div class="property-card">
          <a href="#">
              <div class="property-image" id="image">
                  <div class="property-image-title"></div>
              </div>
              <video id="video">
                <source control src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
                        type="video/webm">
            </video>
          </a>
          <div class="property-description">
            <h5> Card Title </h5>
            <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p>
          </div>
      </div>
    </div>
</body>

悬停时自动播放视频

Auto play video when hover

html

javascript

css

web-deployment