🍖 ⛪️ 🗜️ Youtube Player-独自のJavaScriptプレーヤーを作成する 👩‍👧 🕺🏻 👨🏿‍🚒

エントリー

確かに多くのフロントエンド開発者、そして一般に、多くのユーザーは少なくとも一度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> <!-- jQuery --> <script src="https://www.youtube.com/iframe_api"></script> <!--    iframe_api--> <link rel='stylesheet' id='fortunato-style-css' href='http://your.styles.css' type='text/css' media='' /> <!--  (   css )--> </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ドキュメントで直接できます）。

すべてのJavascriptコード-関数

 //  function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '500', playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0}, width: '850', videoId: 'CyVuYAHiZb8', events: { 'onReady': onPlayerReady } }); } //   function onPlayerReady(event) { var player = event.target; iframe = document.getElementById('player'); setupListener(); updateTimerDisplay(); updateProgressBar(); time_update_interval = setInterval(function () { updateTimerDisplay(); updateProgressBar(); }, 1000); } /* */ function setupListener (){ document.getElementById('full').addEventListener('click', playFullscreen); } /* */ function playFullscreen (){ player.playVideo();//won't work on mobile var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; if (requestFullScreen) { requestFullScreen.bind(iframe)(); } } /* */ function loadPlaylistVideoIds(); { player.loadPlaylist({ 'playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'], 'listType': 'playlist', 'index': 0, 'startSeconds': 0, 'suggestedQuality': 'small' }); } /**/ function editVolume () { if (player.getVolume() == 0) { player.setVolume('100'); } else { player.setVolume('0'); } } /**/ function editQuality () { player.setPlaybackQuality('medium'); document.getElementById('quality').innerHTML = '480'; } //     -  function updateTimerDisplay(){ document.getElementById('time').innerHTML = formatTime(player.getCurrentTime()); } /* */ function formatTime(time){ time = Math.round(time); var minutes = Math.floor(time / 60), seconds = time - minutes * 60; seconds = seconds < 10 ? '0' + seconds : seconds; return minutes + ":" + seconds; } //   function updateProgressBar(){ var line_width = jQuery('#line').width(); var persent = (player.getCurrentTime() / player.getDuration()); jQuery('.viewed').css('width', persent * line_width); per = persent * 100; jQuery('#fader').css('left', per+'%'); } /* */ function progress (event) { var line_width = jQuery('#line').width(); //   var pos = jQuery('#line').offset(); var elem_left = pos.left; //     var Xinner = event.pageX - elem_left; var newTime = player.getDuration() * (Xinner / line_width); // Skip video to new time. player.seekTo(newTime); }

そして今、それはどのように機能しますか。まず、プレーヤーを作成します-これに必要な機能が必要です：

  //  function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '500', playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0}, width: '850', videoId: 'CyVuYAHiZb8', events: { 'onReady': onPlayerReady } }); }

すぐにそれ自体と呼ばれ、その中にパラメータを持つ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つの例を示します。

Youtube Player-独自のJavaScriptプレーヤーを作成する

エントリー

プレーヤーページ-レイアウト

プレーヤーコントロール-JavaScript

そのようなプレーヤーを実装するリソース

おわりに

More articles: