在图像内播放视频 [英] play a video inside an image

问题描述

我想在png图片中播放视频，该视频应该作为我的视频的框架。我找到了第一个解决我的问题在这个其他SO问题：

I am trying to play a video inside a png image that should work as a frame for my video. I found a first solution for my problem in this other SO question:

HTML：在图像内播放视频

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

But the thing that this question doesn't solve for me is that the video is not clickable. this is a good solution if I want my video to be set on autoplay. But I my video to play only when I click on it.

我知道这个解决方案不允许我点击控件，因为png图像将在视频前面，控制按钮不会

And I know that this solution will not allow me to click on the controls, as the png image will be in front of the video, and the control buttons won't be accessible.

有没有解决方案？

EDIT

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

推荐答案

给出一个确切的答案，但你可以设置一个点击事件上的img与javascript将播放视频。

Without seeing your code I cannot give an exact answer but you could set up a click event on the img with javascript which will play the video.

<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

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

I haven't tested this answer so I have given two version of the JS which should do the same thing. Basically the JS says when an element with ID="video" is clicked then play element with ID="my_video_1"

这篇关于在图像内播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！