我想减少页面加载时间,所以我只显示视频的缩略图,如果点击它,它会加载并自动播放视频。
我的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中,以实现一致的用户体验。