javascript - YoutubeChromelessPlayer-ビッグスタート再生ボタンを変更

Question

私はこのようなクロムレスプレーヤーを作成しました。プレーヤーの状態が-1（ビデオが再生されない）のときに表示される大きな赤い再生ボタンを変更できますか？クラシックの代わりに自分の画像を追加したい。

Answer 1

このハックを試すことができます。

function onYouTubePlayerReady(playerId){
    document.getElementById(playerId).playVideo();
    document.getElementById(playerId).pauseVideo();
}

ビデオを再生して一時停止すると、大きな赤いボタンが消えます。

（onYouTubePlayerReadyはローカルホストでは機能しないことに注意してください。オンラインサーバーでテストする必要があります）

Answer 2

私はそれを行うための最良の方法を見つけました。

ハックしてくれてありがとう@crazyphoton：

function onYouTubePlayerReady(playerId){
    document.getElementById(playerId).playVideo();
    document.getElementById(playerId).pauseVideo();
}

そのコードを使用すると、デフォルトのボタンを簡単に削除できます。

私の質問は、独自のボタンを追加することについてです。このデモはその部分への答えです。の画像position: absoluteは、ビデオの中央にある再生/一時停止/リピートボタンです。

Answer 3

動画の冒頭にカスタム再生アイコンが必要な場合は、最初にサムネイル+サムネイルの前に再生アイコンを読み込むことができます。また、ユーザーがこの再生ボタンをクリックすると、サムネイルが削除され、自動再生機能を備えたYouTube動画が読み込まれます。たとえば、nirvanatikku/jQuery-TubePlayer-Plugin経由

サムネイル読み込み可能：https ：//img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg