2018-09-05

水上氏、videoタグを語ってみる

久しぶりに投稿します、水上です。

さっそくですが、WEBサイト上で動画を再生させたいというニーズは結構高まっているかと思います。

音声ありで再生させたい
バックグラウンドで再生させたい
ムービーコンテンツとしていくつも配置したい

などなどですね。

特に魅せ方にはこだわりがなく、見せられれば何でも良いという人には、悪いことは言わないのでYoutubeやVimeoを使ったほうが良いでしょう。

数年前よりマシになりましたが、動画はデバイスにより扱い方が違ったり、Javascriptでの制御が必要だったり、適切なエンコードが必要だったり、案外めんどくさいものです。

今回は、どうしてもYoutubeやVimeoは使いたくない、ネイティブ？なHTML5のvideoタグで動画を実装したいという方向けに、ザクッとした話をしたいと思います。

もしかしたら、知識が古いかもしれませんが、経験に基づいた内容なので間違ってはいないかと思います。ぜひ参考にしていただければ。

動画コンテンツが持つアプローチ力

今どき珍しくはありませんが、コーポレートサイトや特設サイトのTOPページの一番目立つところで動画を再生させるサイト、１回くらいは見たことありますよね。

持論ですが、WebGLとかCSS/Javascriptによってかっこよく動く活かしたサイトは、少なくとも同業者には実装している技術がすごく見えて、本来アプローチしたいもの、つまり会社や商品には目が行きにくいんですよね。

一般の方が見たら全然違うかもしれませんが、先進的なテクノロジーをアプローチしたい場合など特定のケースを覗いて、Webサイト内の技術的な動作によるアプローチは常にプラスな印象をもたらすとは限りませんし、コスパが良いとも思いません。

一方、動画コンテンツはそれらとは逆に、アナログな方法で作られたものです。

人間臭いディテールやズレも味となり、現実的な質感を感じさせるものがありますね。

Russia Beyondの動画がかっこよいからパクりたいという一心で、４K動画が撮影できるカメラを衝動買いしたのは去年の今頃ですが、撮影テクはさておき、動画をWEBページで有効にアプローチするには、ただそれを載せればいいというわけではありません。

適切なアプローチで効果を最大化させるためにも、最善な方法を選択する必要があり、それがYoutubeやVimeoであるとは限らないのです。

※ちょっとWEBコンサルっぽいことを言ってみました！！

Videoタグとは？

前置きが長くなりましたが、自由度が聞くのはいつだってスクラッチですね。

動画コンテンツをどうこうしたい欲求が強く、これだ！！っていうアプローチ方法が浮かんでいるならHTML5で実装されたVideoタグを試してみましょう。

Videoタグとは、雑に言うとImgタグ同様の方法で動画を埋め込めるHTMLタグです。

しかし、知っての通り動画には再生ボタン、停止ボタン、全画面、シークバー、音量などの機能があり、これらをいい感じで実装するにはJavascriptの知識が必要になります。

ここではJavascript？何それという人のために、アレルギーが出ない程度にやりかたを紹介します。

//HTML
<body onload="/*ここに処理内容*/">
//Javascript
window.onload=function(){/*ここに処理内容*/};
//jQuery
$(window).on('load',function(){/*ここに処理内容*/});

上記は全部同じ意味です。

Javascriptは実行タイミングが結構大事で、画像や動画はそのメディアがロードされてから処理をしないとうまくいかなかったりします。

onload＝ロード後に実行という意味（ザックリ）←このタイミングで処理内容を実行した方が良いです。

こんな感じで、Javascriptは実行するタイミングを指定して処理をすることが非常によくあります。

後述する、再生ボタン、停止ボタン、全画面、シークバー、音量などの機能でJavascriptで処理をするというのも、簡単にいえばそれぞれのタイミングで処理を実行するということ、onloadと同じことです。

いつも拾ってきたコードを適当にHTML内に書いているという初心者の方、そのコードがどのタイミングで実行されているか今一度よーーーーく考えてみましょうね。

VideoタグをHTMLで操作する

どうしてもJavascriptで蕁麻疹が出てしまった人も、シンプルな実装はHTMLだけで可能です。サンプルを紹介します。

ただし断っておきますがHTMLだけで大したことはできません！むしろそれを証明するためのサンプルです。

最もシンプルな実装

<video src="https://bg.access-jp.co.jp/aj003/wp-content/uploads/2018/09/IMG_0259.mov"></video>

ブラウザによってどう見えているかは差異があります。

chromeでは再生すら押せない人もいるのでは？

再生できる実装

<video src="https://bg.access-jp.co.jp/aj003/wp-content/uploads/2018/09/IMG_0259.mov" controls></video>

最低限ですね。

chromeではダウンロードができるのが気になります。

再生できる実装（ダウンロード禁止）

<video src="https://bg.access-jp.co.jp/aj003/wp-content/uploads/2018/09/IMG_0259.mov" controlslist="nodownload" controls></video>

chrome58以降ではこの方法でダウンロードボタンを消すことができます。

他にもCSSでゴリ押しで消す方法もありますよ。

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

ポスター（再生前サムネイル画像）を配置

<video src="https://bg.access-jp.co.jp/aj003/wp-content/uploads/2018/09/IMG_0259.mov" poster="https://bg.access-jp.co.jp/aj003/wp-content/uploads/2018/08/akiyama.jpg" controlslist="nodownload" controls></video>

自動再生する

<video src="https://bg.access-jp.co.jp/aj003/wp-content/uploads/2018/09/IMG_0259.mov" autoplay controlslist="nodownload" controls></video>

autoplayを追加すると、PCでは自動再生されますが、これは音量が大きいと嫌われやすいのでサンプルは載せません。

autoplayを使うのは控えましょう。

他にもいろいろできますが、ここを見ればわかるんで、もうめんどくさいです。

JavascriptでVideoタグを制御

ここまで知った上で、これを理解すれば動画コンテンツを思うがままに操ることができます。

まずは動画にIDを振ります。akiyamaと。

別にIDじゃなくてもJavascriptで取得できれば何でも良いですが。

<video id="akiyama" src="https://bg.access-jp.co.jp/aj003/wp-content/uploads/2018/09/IMG_0259.mov"></video>

HTMLでは一番役に立たないこの状態をあえて使います。これから機能追加追加でJavascriptから制御できるようにします。次にボタンを設置。

現在の位置：

わかりにくいですが、↑はInputタグのtype="button"です。

先程の/*ここに処理内容*/とあったところに以下のようなJavascriptを書けば、ボタンはそれぞれ動くはずです。（やってみれ）

var video=document.getElementById('akiyama'); //VideoタグをIDで取得
var play=document.getElementById('akiyama_play'); //再生ボタンをIDで取得
var pause=document.getElementById('akiyama_pause'); //停止ボタンをIDで取得
var v_up=document.getElementById('akiyama_v_up'); //音量上げるボタンをIDで取得
var v_down=document.getElementById('akiyama_v_down'); //音量下げるボタンをIDで取得
var v_mute=document.getElementById('akiyama_v_mute'); //消音ボタンをIDで取得
var time=document.getElementById('akiyama_time'); //現在の位置フィールドをIDで取得
//再生ボタンをクリック
play.addEventListener('click',function(e){
    if(video.paused) video.play();
});
//停止ボタンをクリック
pause.addEventListener('click',function(e){
    if(!video.paused) video.pause();
});
//音量上げるボタンをクリック
v_up.addEventListener('click',function(e){
    video.muted=0;
    video.volume=video.volume+0.1;
});
//音量下げるボタンをクリック
v_down.addEventListener('click',function(e){
    video.muted=0;
    video.volume=video.volume-0.1;
});
//消音ボタンをクリック
v_mute.addEventListener('click',function(e){
    video.muted=1;
});
//現在の位置フィールドを変更
time.addEventListener('change',function(e){
    video.currentTime=time.value;
});
//再生中に現在の位置を更新
video.addEventListener('timeupdate',function(e){
    time.value=video.currentTime;
});
//終了したら最初へ
video.addEventListener('ended',function(e){
    video.currentTime=0;
});