Question

我正在尝试在png图像中播放视频，该视频应该用作我视频的帧。我在另一个SO问题中找到了我的问题的第一个解决方案：

但是这个问题对我来说没有解决的问题是视频无法点击。如果我想在自动播放中设置我的视频，这是一个很好的解决方案。但我的视频只有在我点击时播放。

我知道这个解决方案不允许我点击控件，因为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;
}

Answer 1

您找到的解决方案应该适用于您的情况。如果您在视频的样式中使用CSS z-index:11;，在包装中使用z-index:10;。然后，该视频应该是可点击的。

Answer 2

如果没有看到您的代码，我无法给出确切的答案，但您可以使用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”的元素

在图像中播放视频

2 个答案: