有人帮我关于网站上的视频内容，它对我的 网站造成了沉重的影响吗？

Question

我在网站上传了一段视频及其10mb视频。它将我的主页大小从4mb增加到14mb。任何人都有更好的解决方案在网站上传视频，它使我的网站速度更好。在上传视频之前，我的网站速度是52，现在只有27。

Answer 1

您可以阻止播放器自动加载视频或使用更好的解决方案：您可以将视频上传到youtube，然后将其延迟加载到您的网站中（它只需要一个请求：视频缩略图）以下是我的方法我用懒惰加载我的YouTube视频：

(function($){

	var youtube = document.querySelectorAll( ".youtubez" );
	
	for (var i = 0; i < youtube.length; i++) {
		youtube[i].addEventListener( "click", function() {

			var iframe = document.createElement( "iframe" );

					iframe.setAttribute( "frameborder", "0" );
					iframe.setAttribute( "allowfullscreen", "" );
					iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

					this.innerHTML = "";
					this.appendChild( iframe );
		} );	
	};

})(jQuery);

/* Lazy load youtube videos */
.youtubez{background-color:#000;margin-top:8px;position:relative;padding-top:56.25%;overflow:hidden;cursor:pointer}
.youtubez img{width:100%;top:-16.82%;left:0;opacity:.7}
.youtubez .play-button{width:90px;height:60px;background-color:#333;box-shadow:0 0 30px rgba(0,0,0,0.6);z-index:1;opacity:.8;border-radius:6px}
.youtubez .play-button:before{content:"";border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent #fff}
.youtubez img,.youtubez .play-button{cursor:pointer}
.youtubez img,.youtubez iframe,.youtubez .play-button,.youtubez .play-button:before{position:absolute}
.youtubez .play-button,.youtubez .play-button:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
.youtubez iframe{height:100%;width:100%;top:0;left:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="youtubez" data-embed="jNQXAC9IVRw"><div class="play-button">&nbsp;</div><img src="https://img.youtube.com/vi/jNQXAC9IVRw/0.jpg"></div>

我不知道为什么这个例子在stackoverflow中不起作用（可能出于安全原因阻止iframe）但这里有一个工作的jsbin http://jsbin.com/datobawuca/edit?html,css,js,output