こはるおとの雑記ブログ

どうも。

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

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

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

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

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

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

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

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

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

圧縮方法については、ブラウザ上(オンライン上)で高画質なまま大きく圧縮してくれるサイトがあるのでそれを利用してます。

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

videoタグの設定について

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

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

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

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

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

最後に

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

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

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

まだコメントはありません。