WEBの
動画再生を
探求するWEBサイトで
動画ファイルを
気軽に扱うために

スマホのないPC全盛のころは動画といえばFlash一択でした。
とにかくwebサイトの1ページの容量を100KB前後に抑えないとユーザーがスムースに再生できない時代でしたから。いまは、普通に1Mbこえたりしますから想像できないかもしれませんが。
特に映画の予告動画なんでさいせいするのに数分待つってのもざらでした。
そのためいろんな再生方法が乱立していて、なかでも最もスムースに再生できるFlash はまさに天の恵みでした。
しかし2007年、iPhoneの登場でflashは絶滅しました。
iPhoneがflash非対応を打ち出した時はほんとこれまで積み上げてきたものが崩壊するような気分を味わいました。
ま、そんなわけで今ではyoutubeかvideoタグかの二択となりました。
それぞれ一長一短がありますので、そのあたりを次の章で説明します。
また、有料コンテンツの販売や視聴といった商用利用だとVimeoなどのプラットフォームがありますが
このページでは無料で使えるということと通常の動画再生という点に絞って説明します。

無料で動画を再生するだけならyoutube。普通にiframeを埋め込のが簡単でいいです。
また、歴史も20年近く使われているので安定・安心です。
特にストリーミング再生やネットの帯域幅に応じたフォーマットで再生など重い動画の再生に便利です。
埋め込みコードが必要ですので、最初はコードをさがすのに手間取るかもしれませんが、一度やるとあとは同じです。
動画の制御も引数へパラメータ追加や、JSであればGoogleのYouTube Player APIに必要な機能がほぼそろっています。
ので、やりたいことはほぼ可能なのではと思います。
たとえば、ユーザーが動画を完全に最後まで再生しているのか、途中で離脱していないか、などをJSで調べることができます。
デメリットとしてはyoutubeロゴが表示されたり、コントロールバーが表示されたりと外観が固定されていることでしょうか。
背景画像に使うときに見映えにかかわるので結構大事です。
JSでかなりカスタマイズはできますが、これも仕様変更があるとその都度対応する必要があります。

また動画終了時に他の動画リストが表示されたりなど無料でのビジネス用途にはいくつか制限も出てきます。
(プレミアム会員や、無料の場合でもAPIなどで回避できますが）
コントロールバーなどの上下を何割かトリミングする方法が一般的の様です。
まあ、はっきりいってマイナス面はこの外観だけなんですけどね。
あとは、動画のURLを秘匿・管理できないので、有料コンテンツのサイトを運営することが難しいていうことでしょうか。
ノウハウやハウツー系のオリジナルコンテンツを有料で閲覧させるようなサイトは有料のVImeoか次のVideo要素になると思います。

youtubeを使って背景動画に使ています。
背景動画にするにはコントロールバーを隠した入り、地色がでないようになどいろいろ細かな設定が必要なため、プラグインのjquery.mb.YTPlayerを使用しています。
jquery.mb.YTPlayerを使った背景動画デモ：https://labo.studio-happyvalley.com/movie/studio/

video要素のメリットは外観のカスタマイズが自由にできるという点でしょうか。
あとyoutubeの仕様に悩む必要もありません。
が、良い点はそのくらいです。あとはデメリットしかないです。
重い動画は専用サーバーを用意し、ストリーミング再生したり帯域幅の最適化など自前でやる必要があります。
ただし、先にちょっと触れた有料コンテンツサイトを開設するにはこちらの方法しかないですね。

重い動画がvideo要素でどの程度スムースに再生可能かの実験。
約10MBの動画を再生しています。
また、サムネイル動画との同期がとれるかなども実験しています。
※video要素の縦横を100vw,100vhにし、object-fitで全面覆い、position: fixedで固定すれば背景画像にすることも可能です。
video要素での動画再生デモ：https://labo.studio-happyvalley.com/movie/video/

たとえば動画を完全に最後まで再生しているのかなどを調べようとするとJSで制御する必要が出てきます。
こういう事はGoogleのYouTube Player APIを使うことで可能になります。
APIのplayer.getPlayerState()というメソッドが動画のステイタスを番号で知らせます。
番号の意味は下記のようになっています。

-1 ： 未開始
0 ： 終了
1 ： 再生中
2 ： 一時停止
3 ： バッファリング中
5 ： 頭出し済み

いろいろありますが、私が使っているのは再生終了時に発生するイベントだけです。
サンプルコードは下記の様になります。

var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player("'.$codeuri.'", {
		autoplay: 0,
		loop: 0,
		mute: 1,
		playlist: "'.$codeuri.'",
		height: "' . $ifH . '",
		width: "' . $ifW . '",
		videoId: "'.$codeuri.'",
		controls: 1,
		events: {
			"onStateChange": onPlayerStateChange
		}
	});
}
function onPlayerStateChange(e){
	if(player.getPlayerState() == 0 ){
/*再生が終了した時点での処理	
　例えばgtagに再生動画の情報を送るなど
　下記はもう一度再生させるコード
*/	
e.target.playVideo();
	}
}

上記のコードにe.target.playVideo();を記述してもう一度再生させる位ならloopを設定すればよさどうですが、loopを設定すると終了イベントが発生しません。
そのためあえて一回のみ再生する設定にし、終了イベントが発生した時点で必要な処理をしたあと、再度再生させるようにしています。
もちろん、再生をストップするstopVideo()を使うのも自由です。
動画が再生完了した時にイベントを発生させるデモ：https://labo.studio-happyvalley.com/movie/api/
YouTube Player API解説：https://developers.google.com/youtube/iframe_api_reference?hl=ja
YouTube 総合解説：https://developers.google.com/youtube?hl=ja