如何嵌入youtube视频';s缩略图,具有点击自动播放功能


How to embed youtube video's thumbnail with auto play onclick function?

我想减少页面加载时间,所以我只显示视频的缩略图,如果点击它,它会加载并自动播放视频。

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

现在缩略图出现了,悬停按钮也工作了,但如果我点击图像,整个网站就会重新加载,视频也不会启动。

我想要这样的。

当我点击他们的缩略图时,哪些必须更改才能开始视频?

您的播放按钮被定义为锚元素,具有href = "",即当前页面。

当用户单击时,链接将被激发,页面将重新加载。要防止重新加载,请从锚点中删除href属性。

为了保持指针光标,可以将cursor: pointer;添加到锚点元素的CSS中,以实现一致的用户体验。