悬停时自动播放视频

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

但当观众悬停在thumbnail上时，我需要向他们展示这个音乐视频包含的内容(基本上是一个5秒的视频(。

视频的大小(高度和宽度(应等于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>

您可以添加视频元素并将其隐藏。将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>

您可以将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();
});

相关内容

最新更新

热门标签：