YouTube Player API を使った動画の再生
YouTube Player API を使うと JavaScript でYoutubeプレイヤーの操作を行うことができます。
動画の再生に必要な最小限のコードは以下になります。
<div id="player"></div> <script src="https://www.youtube.com/iframe_api" async></script> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { videoId: 'M7lc1UVf-VE', // Youtube動画のID events: { 'onReady': onPlayerReady, } }); } function onPlayerReady(event) { player.playVideo(); // 再生を開始 } </script>
プレイヤー作成時のパラメータ
イベントの種類
- onReady – プレーヤーが読み込みを完了し、API 呼び出しの受信を開始する準備ができると起動します。
- onStateChange – プレーヤーの状態が変わると起動します。
- onPlaybackQualityChange – 動画の再生画質が変わると起動します。
- onPlaybackRateChange – 動画の再生速度が変わると起動します。
- onError – プレーヤーでエラーが発生すると起動します。
playerVars に指定できるパラメータ
https://developers.google.com/youtube/player_parameters?playerVersion=HTML5&hl=ja
playerVars を使った例。
<div id="player"></div> <script src="https://www.youtube.com/iframe_api" async></script> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { width: 1280, height: 720, videoId: 'M7lc1UVf-VE', playerVars: { 'autoplay': 1, // 自動再生 'start': 10, // 00:10から開始 }, }); } </script>