WEBVTT

1
00:00:00.000 --> 00:00:00.932
こんにちは。

2
00:00:00.932 --> 00:00:04.349
エイチティーエムエル、リファレンス解説です。

3
00:00:04.349 --> 00:00:07.611
HTMLタグ編の二本目は、ビデオタグです。

4
00:00:07.611 --> 00:00:14.446
これは、動画ファイルをウェブページの中に埋め込み、その場で再生できるようにするタグです。

5
00:00:14.446 --> 00:00:23.610
以前は専用のプラグインが必要でしたが、今はタグを一つ置くだけで、再生や一時停止の仕組みをブラウザーが用意してくれます。

6
00:00:23.610 --> 00:00:28.736
記事では、教材動画を操作できる状態で提供する場面を例にしています。

7
00:00:28.736 --> 00:00:35.726
今回は、主な属性と字幕の付け方、自動再生に頼らない作り方を、初心者向けに順番に解説します。

8
00:00:35.726 --> 00:00:43.492
動画は文字や画像とは違う伝わり方ができるので、操作の手順や雰囲気を伝えたい場面で特に力を発揮します。

9
00:00:43.492 --> 00:00:45.432
基本の書き方です。

10
00:00:45.432 --> 00:00:51.684
ビデオタグは、開始タグと終了タグを向かい合わせに書きます。

11
00:00:51.684 --> 00:00:55.564
その中に、動画ファイルを指定します。

12
00:00:55.564 --> 00:01:01.169
ここで一番大切なのが、コントロールズという属性です。

13
00:01:01.169 --> 00:01:08.283
これは値を持たない真偽属性で、書くだけで、再生ボタンや進み具合を示すバー、

14
00:01:08.283 --> 00:01:15.397
音量調整といった、ブラウザー標準の操作画面が表示されます。

15
00:01:15.397 --> 00:01:23.589
逆にこれを付けないと、見ている人が再生も停止もできない動画になりかねません。

16
00:01:23.589 --> 00:01:31.134
特別な理由がない限り、まずはコントロールズを付ける、と覚えてください。

17
00:01:31.134 --> 00:01:42.560
真偽属性は、書けば有効、書かなければ無効という仕組みで、値を書くものではない点も一緒に覚えておきましょう。

18
00:01:42.560 --> 00:01:45.481
動画ファイルの指定方法は二通りあります。

19
00:01:45.481 --> 00:01:49.278
一つ目は、ビデオタグ自身にエスアールシー属性を書いて、一つのファイルを直接指定する方法で、

20
00:01:49.278 --> 00:01:53.075
シンプルです。

21
00:01:53.075 --> 00:01:59.792
二つ目は、中にソースという子要素を置き、そこにファイルとタイプ属性で形式を指定する方法です。

22
00:01:59.792 --> 00:02:06.364
ソース要素なら複数の候補を並べることもでき、ブラウザーは対応できる形式を選んで再生します。

23
00:02:06.364 --> 00:02:10.453
記事の例では、ソース要素を使う書き方が採用されています。

24
00:02:10.453 --> 00:02:16.586
ファイルのパスが間違っていると再生できないので、保存場所と名前はよく確認しましょう。

25
00:02:16.586 --> 00:02:24.180
どちらの書き方でも結果は同じですが、形式を分けたいときや候補を増やしたいときはソース要素の方が柔軟です。

26
00:02:24.180 --> 00:02:26.514
次に、ポスターとプリロードです。

27
00:02:26.514 --> 00:02:30.598
ポスターは、再生が始まる前に表示しておく画像のことです。

28
00:02:30.598 --> 00:02:36.433
動画の内容が伝わる一枚を設定すると、見ている人が何の動画か判断しやすくなります。

29
00:02:36.433 --> 00:02:40.883
プリロードは、ページを開いたときに、動画をどこまで先読みするかというヒントで、

30
00:02:40.883 --> 00:02:45.332
ノン、メタデータ、オートの三つから選びます。

31
00:02:45.332 --> 00:02:49.270
メタデータなら、長さやサイズなどの情報だけを読みます。

32
00:02:49.270 --> 00:02:56.127
ただし、これはあくまでヒントで、ブラウザーが必ず従うとは限らない点も、記事で触れられています。

33
00:02:56.127 --> 00:03:03.712
動画が重いページでは、先読みしすぎると通信量が増えるので、ページ全体の重さとのバランスも考えて選びます。

34
00:03:03.712 --> 00:03:07.093
自動再生に関わる属性をまとめて確認します。

35
00:03:07.093 --> 00:03:11.842
オートプレイは、ページを開くと同時に再生を始める指定ですが、音が出る動画の自動再生は、

36
00:03:11.842 --> 00:03:16.591
多くのブラウザーで制限されます。

37
00:03:16.591 --> 00:03:24.318
そのため、自動再生させたい場合は、ミューテッドで最初は音を消しておく組み合わせがよく使われます。

38
00:03:24.318 --> 00:03:32.206
プレイズインラインは、スマートフォンで全画面ではなく、ページの中でそのまま再生するための指定です。

39
00:03:32.206 --> 00:03:35.909
ループは、終わったら最初に戻って繰り返します。

40
00:03:35.909 --> 00:03:42.831
記事の注意通り、自動再生だけに頼らず、利用者が自分で再生できる構成を基本にしましょう。

41
00:03:42.831 --> 00:03:45.890
音が突然出る体験は利用者を驚かせます。

42
00:03:45.890 --> 00:03:51.524
自動再生を使う場合でも、止め方や音量の調整ができる状態を保ちましょう。

43
00:03:51.524 --> 00:03:53.133
幅と高さの指定です。

44
00:03:53.133 --> 00:03:59.086
ビデオタグには、ウィドスとハイトという属性があり、数字で寸法を指定します。

45
00:03:59.086 --> 00:04:05.040
記事の例では、幅六百四十、高さ三百六十で、画面比は十六対九になっています。

46
00:04:05.040 --> 00:04:10.591
あらかじめ寸法を伝えておくと、ブラウザーは動画を読み込む前から必要な場所を確保できるので、

47
00:04:10.591 --> 00:04:16.142
ページのレイアウトが途中でがたつくのを防げます。

48
00:04:16.142 --> 00:04:22.578
実際の表示サイズの調整はシーエスエスで行い、属性の寸法とは役割を分けて考えます。

49
00:04:22.578 --> 00:04:28.370
スマートフォンでは、横幅いっぱいに収まる指定と組み合わせるのが基本です。

50
00:04:28.370 --> 00:04:36.576
縦長の動画や正方形の動画では比率が変わるので、実際のファイルの比率に合わせて数値を書き換えてください。

51
00:04:36.576 --> 00:04:37.781
字幕の付け方です。

52
00:04:37.781 --> 00:04:43.537
ビデオタグの中にトラックという子要素を置き、カインド属性にキャプションズを指定します。

53
00:04:43.537 --> 00:04:49.560
字幕そのものは、ダブリューブイティーティー形式、ウェブブイティーティーと呼ばれる別のテキストファイルに、

54
00:04:49.560 --> 00:04:55.584
表示する時刻と文章を書いて用意し、エスアールシーでそのファイルを指定します。

55
00:04:55.584 --> 00:05:03.080
エスアールシーラングには言語を、ラベルには日本語のような表示名を書き、デフォルト属性で最初に使う字幕を示します。

56
00:05:03.080 --> 00:05:08.568
音を聞き取りにくい人や、音を出せない環境の人にとって、字幕はとても大切な情報です。

57
00:05:08.568 --> 00:05:12.182
文字起こしを用意してページ内に置くと、動画を見られない状況でも内容を伝えやすくなり、

58
00:05:12.182 --> 00:05:15.796
検索もしやすくなります。

59
00:05:15.796 --> 00:05:20.955
記事の活用事例を、完成形としてまとめて見てみましょう。

60
00:05:20.955 --> 00:05:28.406
ビデオタグに、コントロールズ、プリロードはメタデータ、幅と高さを指定し、

61
00:05:28.406 --> 00:05:35.857
中にはソース要素でエムピーフォーの動画を、トラック要素で日本語字幕を指定しています。

62
00:05:35.857 --> 00:05:40.824
そして最後に、動画ファイルへのリンクも置いています。

63
00:05:40.824 --> 00:05:45.887
試すときは、エイチティーエムエルファイルを保存して再読み込みし、再生できるか、

64
00:05:45.887 --> 00:05:50.950
字幕が選べるかを確かめます。

65
00:05:50.950 --> 00:05:57.064
動画ファイルと字幕ファイルは自分で用意する必要があり、タグを書くだけで自動で作られるものではない、

66
00:05:57.064 --> 00:06:03.178
という点も覚えておきましょう。

67
00:06:03.178 --> 00:06:13.304
確認では、キーボードのタブキーで操作ボタンへ移動できるか、字幕の言語表示が正しいかも合わせて見てください。

68
00:06:13.304 --> 00:06:15.861
再生できない場合への配慮も大切です。

69
00:06:15.861 --> 00:06:21.261
ビデオタグの中に書いた内容は、動画が再生できない環境での代替として使えます。

70
00:06:21.261 --> 00:06:27.228
記事の例のように、動画ファイルへのリンクを置いておけば、別の方法で開く道が残ります。

71
00:06:27.228 --> 00:06:34.048
また、タグ自体に対応していても、動画の圧縮形式、コーデックによっては再生できないことがあります。

72
00:06:34.048 --> 00:06:37.458
対応状況はタグだけで判断しないようにしましょう。

73
00:06:37.458 --> 00:06:42.786
なお、クロスオリジン属性は、別のオリジンから動画や字幕を取得するときのシーオーアールエス、

74
00:06:42.786 --> 00:06:48.114
コルス設定で、配信するサーバー側の許可と合わせて設定します。

75
00:06:48.114 --> 00:06:55.644
対応していない古い環境や通信が不安定な場面を想像すると、代替の用意が利用者への親切になることが分かります。

76
00:06:55.644 --> 00:06:57.997
ブラウザー互換性を確認します。

77
00:06:57.997 --> 00:07:05.526
記事が参照するエムディーエヌの記録では、要素本体はクロームが三以降、エッジが十二以降、

78
00:07:05.526 --> 00:07:13.055
ファイアフォックスが三点五以降、サファリが三点一以降で対応しており、現在の主要ブラウザーでは広く使えます。

79
00:07:13.055 --> 00:07:15.565
ただし、属性ごとに差があります。

80
00:07:15.565 --> 00:07:20.035
たとえばプレイズインラインは、サファリが十以降、クロームが七十五以降で、

81
00:07:20.035 --> 00:07:24.506
ファイアフォックスは非対応とされています。

82
00:07:24.506 --> 00:07:29.525
ミューテッドやクロスオリジンも、本体より後のバージョンからです。

83
00:07:29.525 --> 00:07:34.387
新しい属性を使うときは、本体とは別に対応状況を確認しましょう。

84
00:07:34.387 --> 00:07:38.466
スマートフォンのサファリやクロームはパソコン版と条件が違うこともあるので、

85
00:07:38.466 --> 00:07:42.544
実機での確認もおすすめします。

86
00:07:42.544 --> 00:07:44.293
最後に練習とまとめです。

87
00:07:44.293 --> 00:07:48.521
ビデオタグは、動画をページの中で再生するためのタグでした。

88
00:07:48.521 --> 00:07:53.842
大切なのは、コントロールズで操作できるようにすること、ポスターやプリロードで読み込み方を整えること、

89
00:07:53.842 --> 00:07:59.163
そしてトラック要素で字幕を用意することでした。

90
00:07:59.163 --> 00:08:03.099
自動再生は制限があるため、あくまで補助として考えます。

91
00:08:03.099 --> 00:08:07.181
練習として、手元のエイチティーエムエルに短い動画を一つ置き、再生、停止、

92
00:08:07.181 --> 00:08:11.263
字幕の表示を自分で確かめてみてください。

93
00:08:11.263 --> 00:08:12.575
お疲れさまでした。

94
00:08:12.575 --> 00:08:16.657
次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。

95
00:08:16.657 --> 00:08:18.698
まずは短い動画で構いません。

96
00:08:18.698 --> 00:08:24.092
小さく試して確かめる流れが、ほかのメディア系タグを学ぶときにも役立ちます。