画像だけでなくウェブ向けのベーシックな動画で

基本的な動画を学びます。エンゲージメントを向上。

ウェブサイトに動画を追加することをご検討中ですか?デバイスとネットワーク接続が高速化、高性能化したことで、画像だけでなく、ウェブを構築するためのテクニックのツールボックスに動画を追加できるようになりました。調査によると、動画を掲載したウェブサイトは、エンゲージメントと売り上げの向上につながります。そのため、まだサイトに動画を追加していない場合でも、追加するのは時間の問題でしょう。

サイトに追加する動画ファイルは、ダウンロードされるファイルの中で最も大きいファイルになる可能性が高いため、そのため、すべてのユーザーに対して高速で安定した再生ができるようにファイルを作成することが非常に重要です。動画はエンゲージメントと顧客満足度を高めることができますが、動画が再生されない、または再生中に停止すると、お客様の不満につながる可能性があります。この記事では、動画の配信に HTML5 <video> タグを使用する方法について説明します。ストリーミング動画については説明しません。

では始めましょう。

わかり切ったことかもしれませんが、動画を追加するには、<video> タグを追加してソースを指定します。

<video src="myVideo.mp4">

ご指摘のとおりです。ウェブに動画を追加するために必要なのは、大まかに言えばこれだけです。ただし、動画のタグに追加できる属性は多く、動画のレイアウトと配信を改善できます。

<source> タグ

ウェブでの動画配信を改善する最善の方法は、ブラウザに配信されるファイルを最適化することです。これを行うには、<source> タグを使用します。

<video>
 
<source src="myWebmVideo.webm" type="video/webm">
 
<source src="myh265Video.mp4" type="video/mp4">
 
<source src="myh264Video.mp4" type="video/mp4">
</video>

これは 3 つの個別のソースファイルを参照しています。ブラウザは上から順に、使用できる最初の形式とコーデックを選択します。動画の世界では、ファイル形式(通常はコンテナと呼ばれます)は、それぞれ異なる属性を持つさまざまなコーデックで保存できます。(詳しくはこちらをご覧ください)。上記の例では、最初の選択肢は WebM 形式(VP8 または VP9 コーデックでエンコード可能)です。これは(この記事の執筆時点で)世界中のユーザーの 78% がサポートしています。2 つ目の選択肢は、iOS 以降の Mac でサポートされている mp4 の H.265 コーデックです。これらのコーデックは新しいもので、古い動画形式と同じ品質の動画を提供しながら、データ圧縮が改善されています。

リストの最後の選択肢は H.264 mp4 です。これは、すべての世界中のユーザーの 92% でサポートされていますが、古い形式であるため、通常は WebM や H.265 動画よりもはるかにサイズが大きくなります。たとえば、2 分間の映画の場合、次のような違いがあります。

コーデック ファイルサイズ
VP8 5.5 MB
VP9 4.2 MB
H.265 5.4 MB
H.264 16.1 MB

動画の配信を改善するために行うパフォーマンスの最適化としては、ファイルのサイズを小さくすることが最適です。小さい動画をダウンロードすると、動画の再生がより早く開始され、動画バッファがより早くいっぱいになります。これにより、動画再生中のストールが減少します。また、サーバー負荷が軽減されるため、複数の動画ファイルのストレージ要件の増加を補うことができます。

preload 属性

動画がローカルにダウンロードされて保存されるまで、動画の再生を開始することはできません。preload 属性を使用すると、ページの読み込み時にダウンロードする動画の量を制御できます。preload 属性には、autometadatanone の 3 つの値があります。

preload='auto'

'auto' を使用すると、ユーザーが再生ボタンを押したかどうかにかかわらず、動画全体がダウンロードされます。これにより、ユーザーが再生ボタンを押す前に動画がローカルにダウンロードされるため、動画をすばやく再生できます。データ使用量(およびサーバー負荷の観点から)この機能は、動画が視聴される可能性が高い場合にのみ使用する必要があります。そうしないと、動画全体をダウンロードしたデータがすべて無駄になります。

preload='metadata'

これは、Chrome と Safari でのプリロードのデフォルト設定です。'metadata' を使用すると、動画の最初の 3% がダウンロードされます。これは 'auto' と同じ注意事項がありますが、動画の 3% のみをダウンロードすると、動画全体よりもサーバー/データ使用量が大幅に削減されます。また、動画の一部がローカルに保存されるため、動画の起動が速くなります。

preload='none'

この設定ではデータの保存量が最も少なくなりますが、再生ボタンを押した際の動画の起動が遅くなります。この設定では、デバイスにローカルでプリロードされる動画のサイズが 0 キロバイトであるためです。存在するが再生される可能性の低い動画には、この設定が適しています。ユーザーがブラウザでライトモードを有効にしている場合にも使用できます。

ポスター

動画の再生を開始する前に、動画ウィンドウの上にポスター画像を表示できます。

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
ポスターのない動画は、開始前に黒い画面が表示されます。
ポスター画像なし

ポスターのない動画は、開始前に黒い画面が表示されます。

ポスター付きの動画は、エンゲージメントが大幅に高まります。
ポスター画像付き

ポスター付きの動画は、エンゲージメントが大幅に高まります。

ページに黒いボックスではなく写真を追加すると、ウェブサイトの魅力とインタラクティブ性が高まります。ただし、poster 属性を使用すると、動画のダウンロードが開始する前に画像のダウンロードが追加されます。そのため、自動再生される動画にはポスターを追加しないことをおすすめします(追加のダウンロードにより動画のダウンロードが遅れるため)。

再生コントロール

controls 属性を追加すると、再生コントロールが追加されます。これらのボタンがないと、ユーザーは動画を開始または停止できません。動画の場合は、ユーザーが停止や一時停止、音量の変更などを行えるように、この機能を追加する必要があります。バックグラウンド動画やループ動画の場合は、この属性を省略できます。

ミュート中

muted 属性を使用すると、再生がミュート状態で開始されます。コントロールが指定されていない場合、再生全体でミュート状態になります。それが意図されている場合は、動画から音声トラックを削除することをおすすめします。これにより、お客様に配信される動画ファイルのサイズがさらに小さくなります。

コンテナやコーデックと同様に、音声ファイルの削除(デマルチプレックス)もこの記事の範囲外です。手順については、メディアの操作に関するクイック リファレンスをご覧ください。

ループ

コンテンツをループする動画(アニメーション GIF など)を配信するには、loop 属性を追加します。通常、動画ファイルはアニメーション GIF よりもはるかに小さいため、このメカニズムを使用すると、GIF を動画ファイルに置き換えることができます。

動画の自動再生

動画をすぐに再生する場合(背景動画や、アニメーション GIF のようにループする動画など)は、autoplay 属性を追加します。

<video src="myVideo.mp4" playsinline autoplay>

ただし、モバイル ブラウザで動画を自動再生するには、muted 属性も追加する必要があります。

<video src="myVideo.mp4" playsinline autoplay muted>

まとめ

ウェブサイトに動画を追加するだけで、ユーザーとのエンゲージメントを高めることができますが、動画の再生が途切れることなくシームレスに行われるように、コンテンツを適切に配信することが重要です。<video> タグの組み込み属性を使用すると、ウェブサイトにアクセスするすべてのユーザーに、完璧な動画を配信できます。