javascript - 如何嵌入 youtube 视频的缩略图并具有自动播放 onclick 功能？

Question

我想减少页面加载时间，因此我只显示视频的缩略图，如果单击它，它会加载并自动播放视频。

我的CSS:

.art_video_preroll {
    width:565px;
    height:318px;
    margin-left:65px;
    position:relative;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}
.art_play_button {
    width:565px; /*624px;*/
    height:318px; /*351px;*/
    display:block;
    text-indent: -99999px;
    background: url(gfx/play.png) no-repeat center center;
}
.art_play_button:hover {
    background: url(gfx/play_hover.png) no-repeat center center;
}

视频div:

<div class="art_video_preroll" id="embed_video_VIDEOID" style="background-image: url(http://img.youtube.com/vi/VIDEOID/hqdefault.jpg);">
<a href="" onclick="return startVideo('VIDEOID', {});" class="art_play_button"></a>
</div>

startVideo函数:

function startVideo(code, settings) {

    // Starts video or preroll banner (requirements: CookieHandler, Base64)

    if (typeof(settings) == 'undefined') settings = {};

    // some default values
    var width  = (typeof(settings.width)  != 'undefined') ? settings.width  : 565;
    var height = (typeof(settings.height) != 'undefined') ? settings.height : 318;
    var type   = (typeof(settings.type)   != 'undefined') ? settings.type   : 'youtube';

    var html = '';
    switch (type) {
        case 'youtube':
            html = '<iframe width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/' + code + '?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>';
            break;
    }

    var days = 1;
    var expires = new Date();
    expires.setTime(expires.getTime() + (days*24*60*60*1000));

    if (
        CookieHandler.GetCookie('video_preroll_views_left') > 0 &&
        typeof(video_preroll_content)   != 'undefined' &&
        typeof(video_preroll_totaltime) != 'undefined'
    ) {
        // We have to show the preroll banner

        var vp_vl = CookieHandler.GetCookie('video_preroll_views_left') - 1;
        CookieHandler.SetCookie('video_preroll_views_left', vp_vl, expires);

        document.getElementById('embed_video_'+code).style.background = 'none';
        document.getElementById('embed_video_'+code).innerHTML = Base64.decode(video_preroll_content);

        setTimeout(function(){

            if (document.getElementById('embed_video_'+code)) {
                document.getElementById('embed_video_'+code).innerHTML = html;
            }

        }, video_preroll_totaltime+300);

    } else {
        document.getElementById('embed_video_'+code).style.background = 'none';
        document.getElementById('embed_video_'+code).innerHTML = html;
    }

    return false;
}

现在缩略图出现并且悬停按钮可以工作，但是如果我单击图像，整个网站将重新加载并且视频不会开始。

我想要类似this的东西.

当我点击他们的缩略图时，必须进行哪些更改才能启动视频？

Answer 1

您的播放按钮被定义为 anchor 元素，其中 href = ""，即。当前页面。

当用户单击时，链接将被触发并重新加载页面。要防止重新加载，请从 anchor 中删除 href 属性。

要保留指针光标，您可以将 cursor:pointer; 添加到 anchor 元素的 CSS 中，以获得一致的用户体验。