我正在尝试在png图像中播放视频,该视频应该用作我视频的帧。我在另一个SO问题中找到了我的问题的第一个解决方案:
HTML : play a video inside an image
但是这个问题对我来说没有解决的问题是视频无法点击。如果我想在自动播放中设置我的视频,这是一个很好的解决方案。但我的视频只有在我点击时播放。
我知道这个解决方案不允许我点击控件,因为png图像将位于视频前面,并且控制按钮不会被访问。
有解决方案吗?
修改
我的HTML代码:
<div id="video">
<video id="my_video_1" class="video-js vjs-default-skin"
preload="auto" width="501" height="282" poster="images/video.gif" onclick="this.play();"controls
data-setup="{}">
<source src="video/final.webm" type='video/webm'/>
<source src="video/final.mp4" type='video/mp4'/>
</video>
</div>
我的CSS:
video {
padding-left:2px;
padding-top: 2px;
z-index: 5;
}
#video{
margin-top:70px;
background-size: cover;
width:501px;
height:286px;
text-align: left;
cursor: pointer;
position:relative;
}
#video:after {
content: '';
display: block;
background: url(images/vecto.png) no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
答案 0 :(得分:0)
您找到的解决方案应该适用于您的情况。如果您在视频的样式中使用CSS z-index:11;
,在包装中使用z-index:10;
。然后,该视频应该是可点击的。
答案 1 :(得分:0)
如果没有看到您的代码,我无法给出确切的答案,但您可以使用javascript在img上设置点击事件来播放视频。
<div id="video">
<video id="my_video_1" class="video-js vjs-default-skin"
preload="auto" width="501" height="282" poster="images/video.gif" onclick="this.play();"controls
data-setup="{}">
<source src="video/final.webm" type='video/webm'/>
<source src="video/final.mp4" type='video/mp4'/>
</video>
</div>
的JavaScript
$("#video").click(function() {
$("#my_video_1").play();
});
或
$("#video").click(funciton() {
var Video1 = $("#my_video_1").get(0);
Video1.play();
});
我没有测试过这个答案,所以我给了两个版本的JS应该做同样的事情。 基本上JS说当点击ID =“video”的元素时,然后播放ID为“my_video_1”的元素