2

有一个带有背景悬停效果的空白图像（blank.png），它可以工作。我单击图像并将其隐藏，然后显示视频 div，这很有效。我想不通的是如何让视频在点击原始空白图像时播放。

我大部分时间都在工作，但是单击图像时无法播放视频。

我不是最好的脚本。

我所做的一个例子：http: //jsfiddle.net/3s8EC/2/

<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 方面不是最好的，所以非常棒。

在此先感谢您的帮助。

4

1 回答 1

2

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

像这样：

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

如果页面上有多个视频，请为视频添加一个 id，并在选择器中使用它的 id 而不是“video”。

于 2013-06-25T14:13:06.377 回答