play a video inside an image

问题

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 : play a video inside an image

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.

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.

Is there a solution for this?

EDIT

my HTML code:

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

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

回答1:

The solution you found should work with your situation. If you use CSS z-index:11; in the style for your video and z-index:10; for your wrapper. The video should then be clickable.

回答2:

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

$("#video").click(function() {
    $("#my_video_1").play();
});

$("#video").click(funciton() {
    var Video1 = $("#my_video_1").get(0);
    Video1.play();
});

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"

来源：https://stackoverflow.com/questions/23013601/play-a-video-inside-an-image

标签

javascript

css

video

html5-video