YouTube APIで動画の途中から途中をループさせたい

やりたいこと

APIを使った動画埋め込みで、パラメータを指定して
50秒から100秒までの50秒間のみをループさせたい。

前提として
・動画を全画面で背景表示
・音声on-offボタンを設置（最初はmuteでオートプレイ）

##うまくいかない点
1巡目は50秒から100秒までが再生されるのですが
2巡目からは動画全編が再生されてしまいます。

APIを使う理由、他に検討した方法等

jQueryのmb.YTPlayer.jsを使っても似たようなことはできるのですが
このライブラリを使うと音声制御については
youtubeのコントロールバーのボリュームを表示するしかなく、
全画面表示で動画の縦横比を変わると
コントロールバーが左右に見切れてしまうため不採用としました。

上記の点以外は問題なく動作し、
該当部分のみをループ再生させることはできました。

##試したコード

html
1<div id="youtube"></div>

js
1// IFrame Player API の読み込み
2var tag = document.createElement('script');
3tag.src = "https://www.youtube.com/iframe_api";
4var firstScriptTag = document.getElementsByTagName('script')[0];
5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
6
7// YouTubeの埋め込み
8var player;
9function onYouTubeIframeAPIReady() {
10	ytPlayer = new YT.Player(
11		'youtube', // 埋め込む場所の指定
12		{
13			videoId: 'XXXXXXXXXX', // YouTubeのID
14			rel: 0, // 再生終了後に関連動画を表示するかどうか設定
15			// パラメータの設定
16			playerVars: {
17				autoplay: 1, // 自動再生するかどうか設定
18				playlist:'XXXXXXXXXX',
19				controls: 0,
20				modestbranding: 0,
21				loop: 1,
22				start: 50,
23				end: 100,
24			},
25			
26			// イベントの設定
27			events: {
28				'onReady': onPlayerReady, // プレーヤーの準備ができたときに実行
29			}
30		}
31	);
32}

loopとendのパラメータを共存させるのは無理なのでしょうか？
解決方法をお教えいただけますと幸いです。

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

・動画に直接触れなくするためのカバー<div>を設置
・jsでコントロールバーを表示しないパラメータを追記
・音声ON/OFFボタンを設置

下記で動作できました。

html
1<section class="movBox">
2	<div id="youtube"></div>
3	<div id="youtube_cover"></div>
4	<div id="mute"><span class="on">ON</span><span class="off">OFF</span></div>
5</section>

js
1var tag = document.createElement('script');
2      tag.src = "https://www.youtube.com/iframe_api";
3      var firstScriptTag = document.getElementsByTagName('script')[0];
4      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
5
6      var player;
7      function onYouTubeIframeAPIReady() {
8        player = new YT.Player('youtube', {
9          videoId: 'XXXXXXXXXX', //動画ID
10          
11		  // パラメータの設定
12			playerVars: {
13				controls: 0, //コントロールバーを表示しない
14			},
15		  // イベントの設定
16		  events: {
17            'onReady': onPlayerReady,
18            'onStateChange': onPlayerStateChange
19          }
20        });
21      }
22
23      function onPlayerReady(event) {
24        event.target.mute();
25        event.target.seekTo(5, true);    // 5秒後から開始
26      }
27
28      var timer;
29      function onPlayerStateChange(event) {
30        if (event.data == YT.PlayerState.PLAYING) { // 再生中の場合
31          timer = setInterval(repeatVideo, 1000);   // 再生時間の監視開始
32        } else{
33          clearInterval(timer);　　　　　　　　　　 // 再生時間の監視停止
34          timer = null;
35        }
36      }
37
38      function repeatVideo() {
39        if(player.getCurrentTime() >= 15){  // 15秒超えたら
40          player.seekTo(5, true);           // 5秒後から開始
41        }
42      }
43
44//音声on/off
45$(function() {
46	// ミュート
47    $('#mute').click(function() {
48        // playerReadyがtrueのときだけ実行
49        if(player.isMuted()) {
50				// ミュートの解除
51                player.unMute();
52				$(this).addClass("on");
53            } else {
54                // ミュート
55                player.mute();
56				$(this).removeClass("on");
57            }
58    });
59	// 再生
60    $('#play').click(function() {
61        player.playVideo();
62    });
63	
64});
65

投稿2020/09/27 05:18

san3san

総合スコア44

ベストアンサー

YTPlayerなんかヘルプで書いてある事ができない。
IFrame Player API
ただサンプルで書いてある内容を真似ればできるので試してみました。

HTML
1<!DOCTYPE html>
2<html>
3  <body>
4    <div id="player"></div>
5    <script>
6      var tag = document.createElement('script');
7      tag.src = "https://www.youtube.com/iframe_api";
8      var firstScriptTag = document.getElementsByTagName('script')[0];
9      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
10
11      var player;
12      function onYouTubeIframeAPIReady() {
13        player = new YT.Player('player', {
14          height: '360',
15          width: '640',
16          videoId: 'M7lc1UVf-VE',
17          events: {
18            'onReady': onPlayerReady,
19            'onStateChange': onPlayerStateChange
20          }
21        });
22      }
23
24      function onPlayerReady(event) {
25        event.target.mute();
26        event.target.seekTo(5, true);	// 5秒後から開始
27      }
28
29      var timer;
30      function onPlayerStateChange(event) {
31        if (event.data == YT.PlayerState.PLAYING) { // 再生中の場合
32          timer = setInterval(repeatVideo, 1000);   // 再生時間の監視開始
33        } else{
34          clearInterval(timer);　　　　　　　　　　 // 再生時間の監視停止
35          timer = null;
36        }
37      }
38
39      function repeatVideo() {
40        if(player.getCurrentTime() >= 15){  // 15秒超えたら
41          player.seekTo(5, true);           // 5秒後から開始
42        }
43      }
44
45    </script>
46  </body>
47</html>
48