Có cách nào để tải video YouTube nhúng nhanh hơn trên trang web của tôi không?

Question

Tôi đang viết một bài đăng blog sử dụng nhiều video từ YouTube và Yahoo Video, nhưng tôi không hài lòng với thời gian để trang hiển thị. Ngoài việc sử dụng phương pháp ajax-y để tải video, có bất kỳ thủ thuật nào khiến trang tải nhanh hơn với nhiều video từ các nguồn khác nhau không?

Answer 1

Phương thức "ajax-y" của bạn sẽ là cách duy nhất để tăng tốc độ này. Các trang web lớn sẽ sử dụng CDN và có bộ nhớ đệm tốt. Không có cách nào xung quanh các tệp lớn mất nhiều thời gian ...

Giữ đối tượng hoặc thẻ video ra khỏi HTML và sau đó thêm nó sau khi tải trang, sẽ cải thiện hiệu suất tải trang được cảm nhận. Có thể hoán đổi một hình ảnh đáng sợ có cùng kích thước với video cuối cùng ...

Đó là ngày đầu cho thẻ video, nhưng có khả năng là thời gian khởi chạy sẽ nhanh hơn Flash vì nó là một phần của trình duyệt và không phải là plugin của bên thứ ba.

Phần lớn thời gian tải video tùy thuộc vào cách video được mã hóa/truyền mà nằm ngoài tầm kiểm soát của bạn, có vẻ như.

Answer 2

Không có câu hỏi nào nhận được nhiều video từ các trang web khác nhau cần có thời gian. Bạn đã thử lấy bản sao của những video đó chưa, tải nó lên máy chủ web của bạn và nhúng video của bạn theo cách đó? Nó có thể tăng tốc độ hiển thị trang của bạn nếu video đến từ một nguồn duy nhất.

Answer 3

Sự cố với video YouTube được nhúng là bản thân trình phát cần tải. Bạn có thể thêm "controls = 2" vào URL của mã nhúng, nhưng điều đó sẽ chỉ làm cho người chơi AS2/3 tải trình phát sau khi nhấp.

Giải pháp thay thế mà Google+ dành cho vấn đề này không phải là tải trình phát. Thay vào đó, nó tải một hình ảnh thu nhỏ với một nút play chồng lên nhau. Khi nhấp vào, hình ảnh được thay thế bằng mã nhúng iframe của trình phát YouTube thực sự và nó được tải và tự động phát.

Điều này có thể được thực hiện ở bất kỳ trang web nào thực sự sử dụng javascript đơn giản bên dưới. https://skipser.googlecode.com/files/gplus-youtubeembed.js

Answer 4

Giải pháp Google Plus là cách duy nhất để cải thiện hiệu suất: tải ảnh gốc, sau đó tải toàn bộ trình phát khi người dùng nhấp.

xây dựng trên giải pháp từ @boscharun đây là giải pháp tôi sử dụng:

<style> 
div.video-container a img.playbutton {visibility: hidden; 
    content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAQAAABJACE7AAAEvklEQVR4AdyYX0hbVxzHv5CH4kMZVUighTLxKXmMCBGF/MKC26Qy5x6njMEsGCgU8zBQygaDsJVC2IOCoIPhAqtjbFxmXsJl4EPgPpSGhTDSQDPXEbUNRSpGZ/6cwSHk5MaYa8498WGf39sVrt/c8/vz/R38X+mDE4PwwAsfxuEHwY9x+OCFB4Nwog9XjgMuuDEKsoxRuOGCA1fCADwg8Jic2VwyNvKJYvq4cHZULbNatXx2dFwopvMJY2NzaXKmIdGDAfSUWxgB/1cri5mtN8+ZJW+eZ7ZWFuvyRnALPeEmfCDQwmwqVjpgXVE6SMUWZrk8H25CKTfgBYEioV2dSbOrR0Jcnhc3oIgh8K+VTzDb5BP1rzcE21zHMAhkbLC2HD7Lanp0NRyaG5vqDzoC/cGxqdDcaliPZrXDZ6wtxgYXN4zrsIELftDyfDHNzvFiR4tMTIM6xcS0Fnmxw85RTC/P8x7ogiS3QaD4Q1ZrSeq95JpZlJXA5Fppj5mpxR/yv96GBIMgUCrGTJy81KMgmdCjJy+ZiVSM/2VQSlgu3voyZxAkG85g6w/NxbsXx48ynzAn/KN7ILvx6J65OPKJ7o7Vdf6L5bavBUAq4logt93my7ku1y78rTlmrINUhrF+Luf8l2klw7wqm5BMfIuiYE3wah2+ROdfnmc1eWFS4mq8zw11npUEKqZlj1L+WItp/qzDbPWaR1JuG9TLyG23jC/vxbaHFmab24X9qrSq1uZWwgf/BZbJZ+5lEn1Mos+19DhfewdLkZC5pC+KfeP+J4rEmdoU93NtnPAIaFcXs7LTSGKsWvnz1/c+VCHNGRSzdVfnNr2FAZFn1i2DccolY/3td9W2EZ5vAzDhaf60pb3OL2t2/T9/5bBdLKU9Uxp5zHslgcQyklyzliZ4neE5YiOSa+Kn8icO00BfWWQNrIwia6X29++ffSwvbWKaNVhZNA97NyizJaw1qCtpnEo5/Xjkjqw4YdMzWyC40WAUJBZeLSIhjfPvoR596x0ZaVpELNUgjIpLFZqcMR2npDT+6r+++9zekfLriD5wnKDNJTGeQHLSBK+ecifRVYiRtbkEgrOxB4ihntXkpQmqtVz8zkfdSMtqYtCLfcHTPDv1qH1pMi1Zj4pZKnqbt9mjrYZVSBN96revL+dfVsMm7+ZtOI7jAqsTmlMlTWTvt/et3xmaY3WOC8KBjIPOjlidsSnF0jj/7Fi15LEpVufsCIRxcPygapnV6Q/alybTkvuDjRIq8w2LQyCxqDgCvZFWrWU1+uDidzoCYuzxJ1f11V5nvrgLEmH91Xqfa3x8xb/hVSqRaz2rUO6Gf+EZJlGhvetr4oqP5PtaT6bBaVGLiJKSnQbKZ2i1kvlJHKP8DFXuPF49DX8Ksu88FPu106JYY+z7NWUut1L+40f3+yAVLlfpbnDwhG/0yncDmxtV6eDxlyD1G5XNPbRSTv0gjlH9Hiq9ve8bd2dB6rd3m3cepf3YA1Bv7zwkbooqp0++F75f/U2R9P1aIck965Xdr/3XrB0IAAAAMAzyt06jY3zFr2T95T4P+N8N/tryN6q67MU9tK7ITXv/xcLvPH4d85uiWmLlfq1Wf7mVfIVp4HIDzfwP/+fzW/C0yiYAAAAASUVORK5CYII=") 
} 
div.video-container a:hover .playbutton {visibility: visible;} 
</style>    

<div class="video-container"> 
    <a style="position: relative; left: 0; top: 0;" href="https://www.youtube.com/watch?v=IJl2C8QPVjQ&amp;rel=0"> 
    <img src="//img.youtube.com/vi/IJl2C8QPVjQ/0.jpg" style="position: relative; top: 0; left: 0; width:100%; height:auto"> 
    <img class="playbutton" style="position: absolute; top: 50%; left: 50%; margin-left:-38px; margin-top:-38px"> 
    </a> 
</div> 

<script> 
$('.video-container').click(
    function(e){ 
    e.preventDefault(); 
    var imgURL = $(this).find("img").attr('src'); 
    var rx = /\/vi\/([^\/]+)/ 
    var arr = rx.exec(imgURL); 
    var url = "//www.youtube.com/embed/"+arr[1]+"?rel=0&autoplay=1"; 
    $(this).find("img").hide(); 
    $(this).append('<iframe width="100%" height="315" src="'+url+'" frameborder="0" allowfullscreen></iframe>'); 
    } 
); 
</script>      

Bạn có thể nhìn thấy nó trong hành động sống tại địa chỉ: https://www.acls.net/videos.htm

tính năng bao gồm:

• thoái hóa để IMG nếu cần
• Semantic
• Responsive
• Sử dụng jQuery

Answer 5

Bạn có thể làm theo hướng dẫn từ: https://varvy.com/pagespeed/defer-videos.html

chỉ thay vì sử dụng các mã như thế này:

<iframe width="560" height="315" src="" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe> 

tôi sẽ thay đổi bởi:

<iframe width="560" height="315" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe> 

Bởi vì, src = "" có thể được hiểu là src = "/" trên một số trình duyệt, sẽ tải bản sao trang web của bạn vào iframe ...