Tải trước một youtube youtube

Question

Tôi muốn có một video YouTube không có chromid được nhúng trước khi tải video của nó mà KHÔNG phát khi tải trang. Ngay bây giờ tôi đang sử dụng một kịch bản "chơi sau đó nhanh chóng tạm dừng" vụng về gây ra vấn đề nhỏ (rò rỉ âm thanh nửa giây và thất bại một chút). Đối với chức năng này dường như đơn giản, có cách nào tốt hơn/thanh lịch hơn để tải trước không?

Answer 1

Tôi có cùng một câu hỏi và đã xem qua câu hỏi này. Sau một số nghiên cứu, tôi nghĩ rằng tôi đã tìm thấy một câu trả lời sạch hơn, mặc dù tương tự.

Khi JavaScript API gọi OnYouTubePlayerReady, bạn nhấn phát và thêm trình xử lý sự kiện vào onStateChange sẽ được gọi mỗi khi người chơi thay đổi từ bộ đệm để phát.

Ví dụ: bên trong hàm bạn lắng nghe trạng thái 3 đang lưu vào bộ đệm và ngay sau khi được gọi, bạn tạm dừng video.

Bạn có thể xem kỹ thuật này hoạt động trong this jsFiddle.

Lưu ý phụ: Tôi không sử dụng khung JavaScript trong ví dụ của mình, nhưng bạn có thể dễ dàng đặt một vị trí vào đây.

Ngoài ra, tôi không thể trừu tượng thẻ tập lệnh ra khỏi phần nội dung của HTML bằng jsFiddle, nhưng tệp script.js bên ngoài hoạt động tốt trên máy chủ của riêng tôi.

Answer 2

Gọi

player.cueVideoById(videoId:String); 

Thay vì

player.loadVideoById(videoId:String); 

Answer 3

tôi đang tìm kiếm một giải pháp cho vấn đề này và chạy trên bài viết này:

Embed YouTube Videos Responsively without Increasing Load Time

Các trạng thái tóm tắt: Phương pháp này sẽ làm giảm kích thước của trang web của bạn bằng cách 300-400 KB trong khi làm cho trang web của bạn thân thiện với thiết bị di động.

Dán này trên trang:

<div class="youtube-container"> 
<div class="youtube-player" data-id="VIDEOID"></div> 
</div> 

Các javascript:

<script> 
(function() { 
    var v = document.getElementsByClassName("youtube-player"); 
    for (var n = 0; n < v.length; n++) { 
     var p = document.createElement("div"); 
     p.innerHTML = labnolThumb(v[n].dataset.id); 
     p.onclick = labnolIframe; 
     v[n].appendChild(p); 
    } 
})(); 

function labnolThumb(id) { 
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>'; 
} 

function labnolIframe() { 
    var iframe = document.createElement("iframe"); 
    iframe.setAttribute("src", "//www.youtube.com/embed/" + 
     this.parentNode.dataset.id + "? autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0"); 
    iframe.setAttribute("frameborder", "0"); 
    iframe.setAttribute("id", "youtube-iframe"); 
    this.parentNode.replaceChild(iframe, this); 
} 
</script> 

CSS:

<style> 
.youtube-container { 
    display: block; 
    margin: 20px auto; 
    width: 100%; 
    max-width: 600px; 
} 
.youtube-player { 
    display: block; 
    width: 100%; 
    /* assuming that the video has a 16:9 ratio */ 

    padding-bottom: 56.25%; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    cursor: hand; 
    cursor: pointer; 
    display: block; 
} 
img.youtube-thumb { 
    bottom: 0; 
    display: block; 
    left: 0; 
    margin: auto; 
    max-width: 100%; 
    width: 100%; 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: auto 
} 
div.play-button { 
    height: 72px; 
    width: 72px; 
    left: 50%; 
    top: 50%; 
    margin-left: -36px; 
    margin-top: -36px; 
    position: absolute; 
    background: url("http://i.imgur.com/TxzC70f.png") no-repeat; 
} 
#youtube-iframe { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
</style> 

Refe r cho các bình luận bài viết gốc cho các đề xuất sửa đổi bổ sung và cải tiến.