如何嵌入youtube视频的缩略图与自动播放onclick功能？

我想减少我的页面加载时间，所以我只显示视频的缩略图，如果点击它，它会加载并自动播放视频。如何嵌入youtube视频的缩略图与自动播放onclick功能？

我的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。

当我点击他们的缩略图时，必须更改以启动视频吗？

来源

2016-07-24 Shifty

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

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

要保持指针光标，您可以将cursor: pointer;添加到用于一致UX的锚元素的CSS。

来源

2016-07-24 14:14:00 bluefog

如何嵌入youtube视频的缩略图与自动播放onclick功能？

回答

相关问题