youtube埋め込みプレロード

Question

埋め込みクロムレスYouTubeビデオには、ページが読み込まれても再生されずにビデオがプリロードされます。今は小さな問題（半分の秒のオーディオリークがあり、かなり失敗します）を引き起こすスクリプトを使っています。一見シンプルな機能のために、プリロードするためのより良い/よりエレガントな方法がありますか？

Answer 1

私は同じ質問を持っていたし、この質問に出くわしました。いくつかの研究の後で、私はクリーナーを見つけたと思います。

JavaScript APIがOnYouTubePlayerReadyを呼び出すと、再生を押して、プレーヤーがバッファリングから再生に変わるたびに呼び出されるonStateChangeにイベントリスナーを追加します。

例えば、関数内でバッファリングしている状態3をリッスンし、呼び出されるとすぐにビデオを一時停止します。

このテクニックはthis jsFiddleで確認できます。

私の例ではJavaScriptフレームワークを使用することを控えましたが、ここでは簡単に配置できます。

また、jsFiddleを使用してHTMLの本体からスクリプトタグを抽象化できませんでしたが、外部のscript.jsファイルは自分のサーバーで正常に動作します。

Answer 2

コール

player.cueVideoById(videoId:String); 

代わりの

player.loadVideoById(videoId:String); 

Answer 3

私は、この問題に対する解決策を探していると、この記事に出くわしました：

Embed YouTube Videos Responsively without Increasing Load Time

概要状態：あなたのサイトを作りながら、この方法では、300〜400キロバイトでウェブページのサイズを小さくしますモバイルフレンドリー。

ページでこれを貼り付けます。

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

ジャバスクリプト：

<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。