由于嵌入的视频过多，我的网站加载速度变慢 [英] My website loads slow because of too many embedded videos

问题描述

由于嵌入的视频太多，我的网站加载速度变慢。我看到有图像的位置（视频嵌入位置的上方），然后单击它，然后加载嵌入的视频。任何人都可以给我一些帮助，弄清楚如何做到这一点？也许一旦你将鼠标悬停在图片上，youtube嵌入如果加载？非常感谢！

解决方案

只需在用户点击图片后使用jQuery插入嵌入代码即可：

b
$ b

只是示例代码：HTML

 < div id =videostyle = background-color：red; width：560px; height：315px;>< / div> 
  

jQuery：

 < $（'＃video'）。on（'click'，function（）{
 $（this）.html（'< iframe width =560height =315src = //www.youtube.com/embed/9bZkp7q19f0?autoplay=1frameborder =0allowfullscreen>< / iframe>'）。css（'background'，'none'）; 
}）; 
  

如果您希望视频自动播放，请添加？autoplay = 1 到网址末尾，就像我做的那样。

无缩略图的代码： http://jsfiddle.net/KFcRJ/

提取视频缩略图：

HTML ：

 < div id =videostyle =background-color：red; width：560px; height：315px; > 
< a href =http://www.youtube.com/watch?v=9bZkp7q19f0class =youtube>< / a>< / div> 
  

jQuery：

 < $（'＃video'）。on（'click'，function（）{
 $（this）.html（'< iframe width =560height =315src = //www.youtube.com/embed/9bZkp7q19f0?autoplay=1frameborder =0allowfullscreen>< / iframe>'）。css（'background'，'none'）; 
}）; 
 
函数getYoutubeID（url）{
 var id = url.match（[\\？&; v =（[^&＃] *））; 
 id = id [1]; 
 return id; 
}; 
 $（'a.youtube'）。each（function（）{
 var id = getYoutubeID（this.href）; 
 this.id = id; 
 var thumb_url = http://img.youtube.com/vi/\"+id+\"/maxresdefault.jpg; 
 $（'< img width =100％src ='+ thumb_url +'/> '）.appendTo（$（'＃video'））; 
}）; 
  

带缩略图的代码： http://jsfiddle.net/89uVe/4/

My website loads slow because of too many embedded videos. I'm seen where there is an image (overtop of where the video is embedded) and you click it, at which point, the embedded video is loaded. Could anyone give me some help figuring out how to do this? Maybe once you hover over the image the youtube embed if loaded? Thanks so much!

解决方案

Just use jQuery to insert the embed code after the user clicks on the image:

Just sample code: HTML

<div id="video" style="background-color:red; width:560px; height:315px;"></div>

jQuery:

$('#video').on('click', function() {
    $(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none');
});

If you want the video to autoplay add ?autoplay=1 to the end of the url as I did.

Code without thumbnail: http://jsfiddle.net/KFcRJ/

To extract video thumbnail:

HTML:

<div id="video" style="background-color:red; width:560px; height:315px;">
<a href="http://www.youtube.com/watch?v=9bZkp7q19f0" class="youtube"></a></div>

jQuery:

$('#video').on('click', function() {
$(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none');
});

function getYoutubeID(url) {
    var id = url.match("[\\?&]v=([^&#]*)");
    id = id[1];
    return id;
};
$('a.youtube').each(function() {
    var id = getYoutubeID( this.href );
    this.id = id;
    var thumb_url = "http://img.youtube.com/vi/"+id+"/maxresdefault.jpg";
    $('<img width="100%" src="'+thumb_url+'" />').appendTo($('#video'));
});

Code with thumbnail: http://jsfiddle.net/89uVe/4/

这篇关于由于嵌入的视频过多，我的网站加载速度变慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！