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

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

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

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

如何使用自动播放onclick功能嵌入YouTube视频的缩略图？

1 个答案: