こはるおとの雑記ブログ

どうも。

うちの音楽素材ページ、曲一覧は動画を埋め込んでます。
せっかく作ったMVなので、やっぱり多くの方に見てもらいたいのもあり。

でも最近、あることに気づいたんです…

「動画を連続再生するとブラウザが固まる」
と。

今回はそんな状況の対処法について書いてみます。

動画でブラウザが固まる原因

こうなる原因としては、
・動画の容量が大きすぎたから
・HTMLのvideoタグの、preloadの設定(データの事前読み込み設定)が「auto」以外になってたから
だという結論に至りました。

というのも、それら変更したら解消したので…

動画容量についてと小さくする方法

曲一覧ページの場合動画容量が20MB超えたあたりから連続再生で固まってたのですが、最大限圧縮すると固まらなくなりました。(1本～10MB程度まで圧縮)

圧縮方法については、ブラウザ上(オンライン上)で高画質なまま大きく圧縮してくれるサイトがあるのでそれや、追記時点ではAviutlという動画編集ソフトのプラグインx264guiExを利用してます。(さらに追記時点では有料動画編集ソフトFilmoraの高度な圧縮を使用)

オンラインツールについては「動画 圧縮 ブラウザ」でお探しいただければと思うのですが、私自身は「VideoSmaller」使いました。
1920px→480pxまで小さくした場合、9割容量を削減できました。

videoタグの設定について

他にも、個別の曲ページみたいにページを行き来した連続再生で固まる場合、preloadの設定(事前読み込み設定)が事前に動画データを読み込まない「none」やメタデータのみ読み込む「metadata」になってたのがあります。
これを「auto」にしたら1920pxでかつ上記の方法で圧縮した動画でもスムーズに再生できました。

サイトに動画を埋め込む他の方法

私の場合直接mp4ファイルを埋め込んでるのですが、数日間だけ「Vimeo」という動画共有サイトを使ってました。
外部サイト使うとどうなのかな…と試したくて。

まあそれでもiPhoneで固まってたのですが。
YouTubeもありますが、それそのものが結構重いですからね、一覧だとページが中々読み込まなくなります。

結局自分のサイト内の動画ファイルで、圧縮して貼り付けました。
vimeoって料金が高いので他のサブスク全部解約してまで使ってたのに。笑
YouTubeプレミアムとかAmazonプライムとか…まあvimeoの無料トライアル期間中に気づけたのが幸いだった。

最後に

サイトに動画を貼り付けて重くなる対処法でした。

ご覧いただきありがとうございます。

Xで共有 はてなブックマーク URLをコピー