videoタグでストリーミング配信をする方法【HTML5】

YouTubeやMP4の動画をホームページやWEBサイトに埋め込む場合、HTML5で用意されているvideoタグを利用すると簡単に行えます。しかし、容量の大きい動画ファイルだと再生されるまでに時間がかかったりなどしてユーザーにとってストレスをかけてしまう可能性もあります。

そこでこの記事では、videoタグ使い方やストリーミング配信の方法についてご紹介します。初心者の方向けに紹介していきますので、是非動画を活用してみてくださいね。

videoタグで動画を埋め込む方法

 <参考url=https://unsplash.com/photos/YK0HPwWDJ1I>

videoタグで動画をブログや企業サイトに埋め込む方法は非常に簡単で、以下のように入力するだけで実装することができます。

<video src=”video.mp4″></video>

videoタグ内にsrc=”〜”と記載し、〜の部分に動画ファイルを入力します。動画ファイルの形式はmp4・webm・oggを埋め込むことができますが、ChromeやSafariなど異なるブラウザでも問題なく再生させる為にmp4のファイル形式で動画を用意するのがおすすめです。

videoタグなどのHTMLタグの使い方は、WordPressを利用している場合、ビジュアルエディターではなくコードエディター上で入力を行います。

コードエディターでvideoタグを入力して、ビジュアルエディターに切り替えて見ると、動画が表示されているはずです。

コードを書くことができなくても上記のコードをコピー＆ペーストして、埋め込みたい動画ファイルに変更するだけなので非常に簡単です。

動画を埋め込む方法はvideoタグ以外にもiframeタグなどがありますが、videoタグの方が使いやすく、様々な機能を実装しやすいのでおすすめです。

videoタグには色々な種類の属性を設定することができるので、以下で詳しく解説していきます。

videoタグの属性

<参考url=https://unsplash.com/photos/Agx5_TLsIf4>

videoタグの属性はvideoタグ内に入力し、属性によって動画に色々な要素をプラスさせることができます。

videoタグの属性には以下のようなものがあります。

・autoplay
・muted
・loop
・controls
・poster
・playsinline
・preload
・width/height

それぞれを簡単に解説すると、まずautoplay属性は設定することで自動で動画を再生させることができます。

autoplayで動画を自動再生を行う場合はmutedという音声をなしに設定することができる属性を併用させなければ再生させることはできません。

自動で再生されて音が勝手に流れてしまうのは、ユーザーに迷惑がかかってしまうので、muted属性が設定されていなければautoplayを設定していても再生されることはありません。

次にloop属性は動画の再生が終わったタイミングで、自動でループされて再生を繰り返すことができます。

loop属性もautoplayとmutedと併用して使用するのが一般的です。

次にcontrols属性はユーザーが動画の再生や停止、音量調整や、再生箇所の変更などを行うようにすることができます。

controls属性が設定されているとユーザーがYouTube動画を見ているように動画をコントロールすることができるので、特に理由がなければ設定しておくようにしましょう。

その他にもposter属性で動画が再生される前に表示される画像の設定や、playsinline属性でスマートフォンでも動画が全画面再生されないようにできたり、preload属性で動画ファイルを読み込む優先順位を設定し、WEBサイトの表示速度を早くすることができたり、width/heightで動画の幅と高さを設定することができます。

videoタグの属性の中でも頻繁に使用するのはautoplay・muted・loop・controls・playsinlineなので、使い方は覚えておきましょう。

ストリーミング配信について

<参考url=https://unsplash.com/photos/0qvBNep1Y04>

動画をWEB上で再生するには、通常動画ファイルをダウンロードして再生するしかなく、ネット環境が悪い場合や、動画の容量が大きい場合は再生するまでにかなりの時間がかかってしまいます。

しかしストリーミング配信されている動画では、動画ファイルをダウンロードを完全にダウンロードする必要はなく、ダウンロードをしながら再生をすることができます。

なので従来の再生方法の何倍も早い時間で動画を見ることが可能になります。

ストリーミング配信が行われているのはVODと呼ばれるNetflixやAmazonプライムなどの動画配信サービスや、ライブ配信などで活用されています。

videoタグなどのHTMLコードを使用してストリーミング配信を行う方法を知っておけばユーザーの利便性を向上させることができるので、以下の方法をご覧ください。

HTML5でストリーミング配信する方法

<参考url=https://unsplash.com/photos/peLs78VbU50>

HTML5でストリーミング配信を行う方法は以下の方法があり、主にVOD(動画配信サービス)とライブ配信で行う場合が多いです。

他にもHLS(Http Live Streaming)という方法や、SS (Smooth Streaming)、HDS (Smooth Streaming)、Real Time Streaming protocol (RTSP)といった方法があるので、それぞれ解説していきます。

なんのこっちゃ分からないという方も記事を最後まで読むことで理解できるはずなので、飛ばさずにご覧ください。

• VODとライブ配信
• HLS (Http Live Streaming)とは
• その他の配信方法

 

VODとライブ配信

<参考url=https://unsplash.com/photos/11SgH7U6TmI>

VOD(video on demand＝動画配信サービス)やライブ配信でストリーミング配信が行われているのが一般的で、最も馴染みがあると思います。

まずVODの技術は先ほども解説した通り、動画を完全にダウンロードする必要なく、再生することができるので、時間をかけずに動画を視聴することが可能になります。

HTML5でストリーミング配信が行えるようになったことによって、NetflixやAmazonプライム、Huluなどの動画配信サービスが普及しました。

ストリーミング配信を行う方法は、簡単でvideoタグを使用して動画を埋め込むだけです。

<video controls>
　　<source src=”video/test.mp4″>
</video>

のようにvideoタグ内に動画ファイルを入力するだけで、ストリーミング再生を行うことができます。

ライブストリーミング再生はリアルタイムで動画を配信する方法なので、HTMLのコードで実装するというより、Twitterやインスタグラム、YouTubeといったライブ配信が行えるプラットフォームを利用して、行うのが一般的です。
自社サービスでライブストリーミングサービスを構築するのは簡単ではないので、おすすめはしません。

HLS (Http Live Streaming)とは

<参考url=https://unsplash.com/photos/uVSyr0EUaLY>

HLS(Http Live Streaming)とは何かというと、Apple社が開発したストリーミングサービスの基盤で、以下のような特徴を持っています。

・動画配信サービスとライブ配信の両方に対応
・ビットレートが違ういくつかの大替ストリームをサポート
・暗号化されたメディアとユーザー認証が可能

 まずHLS(Http Live Streaming)は動画配信サービスとライブ配信の両方実装することができ、応用を効かせた設定を行うことができます。

ストリーミング再生についてはvideoタグで実装することができますが、ライブ配信については難しいので、HLS(Http Live Streaming)を利用して行うのが良いでしょう。

HLS(Http Live Streaming)を利用する方法は、Apple DeveloperサイトからHTTP Live Streaming Toolsをインストールしてから、ファイルやコードに設定を追加していきます。

詳しい設定方法はプログラミングの知識がない方はかなり難しいので、以下のサイトを参考に設定してみてください。

HLS(Http Live Streaming)の設定方法

その他の配信方法

<参考url=https://unsplash.com/photos/XA0v5hbb7HY>

他の配信方法としては以下の3種類があり、利用する可能性もゼロではないので、簡単に解説していきます。

・SS (Smooth Streaming)

SSで訳されるSmooth StreamingはMicrosoftが開発した機能で、動画配信する機器のネット接続環境やパソコンのスペックに応じて自動的に最適な動画の画質に設定することができる特徴があり、WEBブラウザ上で動画を再生させる為のプラグイン「Silverlight」を使い利用することが望ましいです。

動画ストリーミングをスムーズに行う為に自動で動画を最適化することができるSmooth Streamingはまだまだ新しい技術なので、これから利用する企業やサービスが増えてくることでしょう。

・HDS (HTTP Dynamic Streaming)

HDS (HTTP Dynamic Streaming)は様々なクリエイターツールを提供しているAdobeが開発した機能で、動画ストリーミングサービスはもちろん、ライブストリーミングも実装することができます。

HTTPサーバーハードウェアを利用しており、大規模で高品質な動画を安全に管理することが可能になります。

・Real Time Streaming protocol (RTSP)

Real Time Streaming protocol (RTSP)は名前の通り、リアルタイムでストリーミングを行うことができる機能で、ストリーミング自体を行うものではありませんが、ストリーミングのデータを制御したり、サーバーを遠隔操作する為にあります。

Real Time Streaming protocol (RTSP)を利用すればリアルタイムで遅延することなくライブ配信などを行うことができるので、利用する方が多いです。

まとめ

今回はvideoタグを使い、ストリーミング配信を行う方法をいくつか解説しました。動画のストリーミング配信を行えば、スムーズに動画を再生することができ、再生までに長い時間をかけることもなくなります。

videoタグだけでもストリーミング配信を行うことはできますが、ライブストリーミングを行うには紹介した、いくつかの方法を行なう必要があります。

ブログや企業サイトで動画ストリーミング配信を行いたい方は、ぜひこの記事を参考にしてください。

5Gの普及に伴い、動画はさまざまなシーンで利用されています。videoタグを使用した動画を埋め込む方法やPDF、QRコード、Twitterなどに動画を埋め込む方法が知りたい方は、下記の記事を参考にしてください。

→【保存版】HTML5・videoタグでHPに動画を埋め込む方法まとめ

リチカ クラウドスタジオはマーケティングに特化した、動画クラウドサービスです。

誰でもかんたんに、動画広告や動画コンテンツをつくれます。 広告・メディア業種で2年連続シェアNo.1を獲得。(*1)大手企業や広告代理店、制作会社を中心に、400社以上に導入されています。

・1本あたり数千円、最短数分で動画広告が作り放題
・クリエイティブ動画広告が制作可能
・YahooやFacebookの公認パートナー、専門ノウハウがフォーマットに凝縮

まずは、無料トライアルでリチカ クラウドスタジオを体験してみませんか?

3分でわかる資料をダウンロードする

*1「法人向け動画自動生成・配信ソフト市場の現状と展望 2020年度版」2019年度、2020年度見込https://mic-r.co.jp/mr/01930/

この記事をシェア

• 
• 
• 
•