在图像内播放视频

Question

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

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;
}

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" 的元素