2018年4月30日月曜日

動画を貼るテスト

HTML5で新規追加された<video>タグで<img>のように動画が貼れると知って( ゚д゚ )
なお、Bloggerの動画はvideoタグではない模様。

ローカルで動画が再生されるかテストした結果、
chromeでは問題なく再生されました。
MicrosoftEdgeでは、mp4のエンコードがyuv420であれば大丈夫そう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <video controls autoplay loop><source src="sample.mp4"></video>
  </body>
</html>

ということはですよ?
Bowlrollのプレビューに動画を貼ったりできる!?( ゚д゚ )

とはいえ、Bowlrollにそのままmp4を載せるとなると鯖の負荷があがりそう(容量的な意味で)
なので、mp4は別の鯖に置く感じになるのでしょうか。

↓Chromeで再生してるとこ


















↓Youtubeの動画サムネ風に編集

 
Youtubeのサムネ動画風に、動画の一部をカットしてプレビューできるようにしてみた。

FFMPEGを使って元の動画から3秒分抜き出す
ffmpeg -i input.mp4 -s 320x180 -r 24 -vcodec libx264 -pix_fmt yuv420p -ss 29 -t 3 -an output.mp4

-s 出力する動画のサイズ 320x180とか、160x90とかを指定
-r フレームレート 24、15、10を指定。サムネイルなので小さくてOK
-ss 切り抜き開始位置(sec)
-t 切り抜く長さ(sec)

元の動画を、フレームレート24、サイズ320x180、29秒から3秒分抜き出してサムネ動画を作成。4.27MBの動画が49.1KBにまで縮小された。上のpngのサイズがおよそ45.7kbだから、これならBowlrollなどに張り付けても負荷かからなそうです。で、本体の動画はYoutubeなどにアップしておいて、サムネから飛べばOKですし。(対応してくれないかな・・)

画面サイズは160x90くらいまで落とせそうだし、フレームレートも15fpsくらいまで落とせそうなので、その分動画の長さを6秒とかにして、全体6秒、2カット分にしたり出来そうです。
ちなみにYoutubeでは、サムネの元のサイズが320x180で、これを縮小して210x118で表示しているみたい。

Bloggerだとマウスホバーで再生みたいなことが出来ないけど、Videoタグだと出来るのかしら?

0 件のコメント:

コメントを投稿