Question

有一个带有背景悬停效果的空白图像（blank.png），它有效。我点击图像并隐藏，然后视频div显示，这是有效的。我无法弄清楚的是如何在点击原始空白图像时播放视频。

我大部分时间都在工作，但无法通过点击图片播放视频。

我不是最好的脚本。

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.custom-th').click(function() {
        $('.custom-th').fadeOut('fast', function() {
            $("#thevideo").css("display","block");
            });
        });
    });
</script>

<style>
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat;
height: 370px;
width: 100%;
}

#imageID:hover {
background: url(http://edigi.co/Video-Intro-Hover.jpg)  no-repeat;
}
</style>

<div style="width: 100%; height: 370px; background-color: #000;">

<div id="promovid">
    <div class="custom-th">
        <img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />    
    </div>

    <div id="thevideo" style="display:none; padding: 0px;">
        <center>
        <video onclick="this.play();" preload="auto" width="600" height="370">
            <source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
        </video>
        </center>
    </div>

</div>
</div>

任何帮助都表示赞赏，但由于我不是最好用脚本编写实际示例，或者编辑jsfiddle，因此非常棒。

提前感谢您的帮助。

Answer 1

只需添加$("video").click();

即可

像这样：

$(document).ready(function() {
        $('.custom-th').click(function() {
            $('.custom-th').fadeOut('fast', function() {
                $("#thevideo").css("display","block");
                $("video").click();
             });
        });
});

如果您在网页上有多个视频并在选择器中使用id而不是“video”，则为视频添加ID。

如何隐藏图像并播放隐藏在其下方的视频？

1 个答案: