-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (99 loc) · 3.98 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
<!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-unstoppable-player/
*
* 倉田幸暢(Yukinobu Kurata)
* https://wisdommingle.com
*
* Copyright (c) 2013 Yukinobu Kurata
* Released under the MIT license
* https://github.com/YukinobuKurata/YouTubeUnstoppablePlayer/blob/master/MIT-LICENSE.txt
*
* MITライセンスについて
* https://wisdommingle.com/mit-license/
*/
//**************************************************************************
//★ユーザー用の設定項目
//★動画プレーヤーの横幅と縦幅を設定する（ピクセル数）。
//横幅
var videoWidth = 530;
//縦幅
var videoHeight = 298;
//★表示させるYouTube動画の「動画ID」を設定する。
var youtubeVideoID = "Xye1sEOG0CA";
//**************************************************************************
</script>
</head>
<body>
<!-- この<div>タグは、下記のJavaScriptの働きによって、ページが表示される前に自動的に<iframe>タグ（動画プレーヤー）に置き換えられます。 -->
<div id="iframe_player_api"></div>
<script type="text/javascript">
// YouTubeのウェブサイト上にある「IFrameプレーヤーAPI」のコードを
// 非同期的に読み込む。
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var iframePlayerApiScriptTag = document.getElementsByTagName('script')[0];
iframePlayerApiScriptTag.parentNode.insertBefore(tag, iframePlayerApiScriptTag);
// 「IFrameプレーヤーAPI」のコードが読み込まれた後、
// 「iframe_player_api」というIDがついている<div>タグが
// YouTube動画プレーヤーの<iframe>タグに置き換えられる。
var player;
function onYouTubeIframeAPIReady() {
//ここで指定しているID名（「iframe_player_api」）がついた
//<div>タグ（上記）は、ページが表示される前に
//自動的に<iframe>タグ（動画プレーヤー）に置き換えられます。
player = new YT.Player('iframe_player_api', {
//動画プレーヤーの横幅（width）と縦幅（height）
width: videoWidth,
height: videoHeight,
//表示させるYouTube動画の「動画ID」
videoId: youtubeVideoID,
//動画プレーヤーの設定をおこなう「パラメータ」
playerVars: {
//左の値は「パラメータの名前」。
//右の値は「パラメータの値」。
'modestbranding': 1,
'autohide': 1,
'controls': 0,
'showinfo': 0,
'rel': 0
},
//「イベントリスナー」
events: {
//左の値は「イベントリスナー」。
//右の値はそのイベントが発生した時に実行される関数。
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
//動画を再生する準備が整ったときに実行される関数
function onPlayerReady(){
}
//動画の再生状態が変わったときに実行される関数
function onPlayerStateChange(event){
switch(event.data){
case YT.PlayerState.ENDED:
break;
case YT.PlayerState.PLAYING:
break;
case YT.PlayerState.PAUSED:
//動画が一時停止されたときに即座に「playVideo()」を実行して
//一時停止ができないようにする。
player.playVideo();
break;
case YT.PlayerState.BUFFERING:
break;
case YT.PlayerState.CUED:
break;
}
}
</script>
</body>
</html>