-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
129 lines (102 loc) · 3.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み（IFrameプレーヤーAPI（JavaScript））</title>
<script type="text/javascript">
/*
* 解説ページ
* https://wisdommingle.com/youtube-iframe-api-player-video-end-point-redirect/
*
* 倉田幸暢(Yukinobu Kurata)
* https://wisdommingle.com
*
* Copyright (c) 2013 Yukinobu Kurata
* Released under the MIT license
* https://github.com/YukinobuKurata/YouTubeEndPointRedirect/blob/master/MIT-LICENSE.txt
*
* MITライセンスについて
* https://wisdommingle.com/mit-license/
*/
//**************************************************************************
//★ユーザー用の設定項目
//★動画プレーヤーの横幅と縦幅を設定する（ピクセル数）。
//横幅
var videoWidth = 530;
//縦幅
var videoHeight = 298;
//★表示させるYouTube動画の「動画ID」を設定する。
var youtubeVideoID = "8Ayz1oxy6pY";
//★リダイレクトさせる移動先のページのURLを設定する。
var redirectUrl = "https://commons.wikimedia.org/wiki/File:USMC-110917-M-VF198-019.jpg";
//★リダイレクト先のページを新しいウィンドウ（新しいタブ）で開くか、
// 同じページ内で開くかを設定する
//新しいウィンドウ（新しいタブ）で開く「1」 / 同じページ内で開く「0」
var redirectTargetBlank = 0;
//**************************************************************************
</script>
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="iframe_player_api"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('iframe_player_api', {
height: '360',
width: '640',
videoId: '8Ayz1oxy6pY',
playerVars: {
//左の値は「パラメータの名前」。
//右の値は「パラメータの値」。
'modestbranding': 1,
'autohide': 1,
'controls': 0,
'showinfo': 0,
'rel': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event){
switch(event.data){
case YT.PlayerState.ENDED:
if( redirectTargetBlank ){
var redirectATag = document.createElement('a');
redirectATag.href = redirectUrl;
redirectATag.target = '_blank';
document.body.appendChild(redirectATag);
redirectATag.click();
}else{
location.href = redirectUrl;
}
break;
case YT.PlayerState.PLAYING:
break;
case YT.PlayerState.PAUSED:
break;
case YT.PlayerState.BUFFERING:
break;
case YT.PlayerState.CUED:
break;
}
}
</script>
</body>
</html>