エントリー
確かに多くのフロントエンド開発者、そして一般に、多くのユーザーは少なくとも一度Youtube Playerの操作と操作に興味を持っています。 この記事では、それがどのように機能するか、そしてインターフェースでYoutubeビデオを再生できるようにする方法を説明します。 また、これがどのように機能するかを理解するための例を示します。
一般ユーザーの場合、外部のビデオへのリンクは
www.youtube.com/watch?v= {video_id}のようになります。 または、たとえば、次のようになります。youtu.be/{video_id
} -ここで、video_idはYoutubeデータベース内のビデオの識別子です（ビデオごとに一意であり、ビデオが伸びる、リンクが形成されるなど、最も重要な情報です）。 たとえば、誰かを怒らせないように（そして神は禁じます）video_id = CyVuYAHiZb8-Ray Charlesのビデオクリップ-Hit the Roadです。
多くの人が知っているように、ビデオ自体をあなたのウェブサイトに埋め込むには、Youtubeでビデオを右クリックしてiframeバッファに入ると「HTMLコードをコピーする」簡単な機会があります：
<iframe width="640" height="360" src="https://www.youtube.com/embed/CyVuYAHiZb8" frameborder="0" allowfullscreen></iframe>
このようなiframeは、サイトで管理できます。 次に、Javascript + Jqueryでコントロールとイベントハンドラーを作成する例を使用して、これを行う方法を説明します。
プレーヤーページ-レイアウト
最初に、プレーヤーをアタッチするいくつかのdivブロックがある単純なhtmlページを作成します。
HTMLページコード <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="https://www.youtube.com/iframe_api"></script> <link rel='stylesheet' id='fortunato-style-css' href='http://your.styles.css' type='text/css' media='' /> </head> <body> <div class="panel"> <button id="back" onclick="player.previousVideo();">Back</button> <button id="play" onclick="player.playVideo();">Play</button> <button id="pause" onclick="player.pauseVideo();">Pause</button> <button id="next" onclick="player.nextVideo();">Next</button> <div id="time">00:00</div> <div id="line" onclick="progress (event);"> <div class="viewed"></div> <div id="fader" onclick="alert('fader');"></div> </div> <button id="volume" onclick="editVolume ();"></button> <div id="quality">Auto</div> <button id="full" onclick="playFullscreen ();">FullScreen</button> </div> <div> <button id="playlist" onclick="loadPlaylistVideoIds();">Load New Playlist</button> <button id="qual" onclick="editQuality ();"> 480</button> </div> </body> </html>
ボタンとプレーヤーのスタイル body { margin: 0; } .panel { width: 850px; height: 40px; background: grey; margin-top: -5px; border: 1px solid #aaa; } #play, #back, #next, #pause{ float: left; width: 50px; height: 40px; } #time{ float: left; width: 50px; height: 40px; color: #fff; padding-top: 10px; margin-left: 10px; } #line{ margin-top: 15px; height: 4px; width: 350px; background: #fff; float: left; margin-right: 15px; } #volume { float: left; width: 80px; height: 40px; } #quality{ float: left; width: 50px; height: 40px; color: #fff; padding-top: 10px; margin-left: 10px; } #full { float: left; width: 75px; height: 40px; } #fader { background: black; border-radius: 5px; width: 10px; height: 10px; position: relative; z-index: 4; bottom: 3px; } #playlist { margin-top: 20px; } .viewed { position: absolute; background: red; height: 4px; }
そして最も重要なこと-javascript。
iframe APIを使用してプレーヤーを作成および初期化するには、iframeが動画に添付される識別子を持つdivが必要です。 私たちの場合、これ
<div id="player"></div>
プレーヤーコントロール-JavaScript
どこに置いても構いませんが、主なものは接続されたライブラリの下にあります（簡単にするために、htmlドキュメントで直接できます）。
そして今、それはどのように機能しますか。 まず、プレーヤーを作成します-これに必要な機能が必要です：
すぐにそれ自体と呼ばれ、その中にパラメータを持つYT.Playerオブジェクトが作成されます。 最初の「プレーヤー」は識別子です
<div id="player"></div>
初期化中にどのiframeにしがみつきますか。 さらに、高さと幅はiframeの寸法であり、videoId： 'CyVuYAHiZb8'-ビデオの識別子はレイチャールズです。 playerVars：{'autoplay'：0、 'controls'：0、 'showinfo'：0、 'rel'：0}-これらはプレーヤーの設定であり、それらは自分自身のために話します。
イベント：{'onReady'：onPlayerReady}は、準備完了イベントを処理するためのフックフックメソッドです。 次はこの関数です。イベントなどを処理するメソッドが含まれています。
プレーヤーオブジェクトの場合。 これは作成され、html-ボタンのコントロールパネルのようにメソッドを呼び出すことで制御できます。
プレーヤーパネルHTML <div class="panel"> <button id="back" onclick="player.previousVideo();">Back</button> <button id="play" onclick="player.playVideo();">Play</button> <button id="pause" onclick="player.pauseVideo();">Pause</button> <button id="next" onclick="player.nextVideo();">Next</button> <div id="time">00:00</div> <div id="line" onclick="progress (event);"> <div class="viewed"></div> <div id="fader" ></div> </div> <button id="volume" onclick="editVolume ();"></button> <div id="quality">Auto</div> <button id="full" onclick="playFullscreen ();">FullScreen</button> </div> <div> <button id="playlist" onclick="loadPlaylistVideoIds();">Load New Playlist</button> <button id="qual" onclick="editQuality ();"> 480</button> </div>
再生ボタンと一時停止ボタン <button id="play" onclick="player.playVideo();">Play</button>
-プレイ
<button id="pause" onclick="player.pauseVideo();">Pause</button>
-一時停止
それはすべて再生の一時停止です。
戻るボタンと次へボタン <button id="back" onclick="player.previousVideo();">Back</button> <button id="next" onclick="player.nextVideo();">Next</button>
これらのボタンは、プレイリスト内のビデオを切り替えるために必要です。
プレイリストを作成するボタンがあります <button id="playlist" onclick="loadPlaylistVideoIds();">Load New Playlist</button>
-クリックで関数を呼び出します。
この関数はplayer.loadPlaylist（{....}）メソッドを呼び出します。
function loadPlaylistVideoIds(); { player.loadPlaylist({ 'playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'], 'listType': 'playlist', 'index': 0, 'startSeconds': 0, 'suggestedQuality': 'small' }); }
プレイリストパラメータ付き：['9HPiBJBCOq8'、 'Mp4D0oHEnjc'、 '8y1D8KGtHfQ'、 'jEEF_50sBrI']-プレイリスト内の動画のリスト。 'listType'： 'playlist'-タイプ、 'index'：0-開始するビデオのインデックス。他のパラメーターは明らかです。 これがプレイリストのロード方法です。 プレイリストを最初から初期化することもできます。次に、YT.PlayerオブジェクトのパラメーターにplayerVarsを設定する必要があります：{'autoplay'：0、 'controls'：0、 'showinfo'：0、 'rel'：0、playlist '：[' 9HPiBJBCOq8 '、' Mp4D0oHEnjc '、' 8y1D8KGtHfQ '、' jEEF_50sBrI ']}、
ボリュームコントロールボタンも実装 <button id="volume" onclick="editVolume ();"></button>
-押すと、音がオンまたはカットされます。 メソッドは類推によって使用されます：
function editVolume () { if (player.getVolume() == 0) { player.setVolume('100'); } else { player.setVolume('0'); } }
品質だけでなく <button id="qual" onclick="editQuality ();"> 480</button>
function editQuality () { player.setPlaybackQuality('medium'); document.getElementById('quality').innerHTML = '480'; }
フルスクリーン <button id="full" onclick="playFullscreen ();">FullScreen</button>
function playFullscreen (){ player.playVideo(); var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; if (requestFullScreen) { requestFullScreen.bind(iframe)(); } }
ここでは、ソケットの機能に関する関数について簡単に説明します。 その結果、再生、一時停止ボタン、3つのビデオのプレイリストをダウンロードするボタン、プレイリストの次へと戻る、フェーダーと読み込みライン、更新された時間、音量、品質、フルスクリーンの動作を示すボタンがあります-これらはすべて、独自のプレーヤーを開発するための初期情報ですYoutube Iframeとのやり取り。
デモオプションは
こちらから入手でき
ます。記事を書くとき、Youtube iframe APIの操作に関する詳細な説明を
ここで見つけることができるYoutubeマニュアルが使用され
ましたそのようなプレーヤーを実装するリソース
- 全画面表示のボタンの操作について、 コードペンの例を見つけました
- Youtubeデモで YouTubeからデモバージョンを見ることができますが、ここでは正しくありません。
- まだインターネット上で、私はValera.tvのウェブサイトで、そのような面白いデザインのプレーヤーを実装しています。
- ちなみに、VKontakteで同様のプレーヤーが作成されましたが、何らかの理由でそれを拒否し、YouTubeボタン付きの標準iframeを挿入するだけです。
- また、参照のために、同様のプレーヤーとYoutubeを介したプレーヤーのiframe APIの実装はUppodによって行われますが、部分的に支払われており、何度も書いています。
おわりに
一般に、この記事では、JavaScriptを使用してサイトでYoutubeビデオをブロードキャストする独自のプレーヤーを作成する1つの例を示します。