動画素材をWEBサイトで表記しているがすぐに止まっ

質問

自分で作った動画素材をWEBサイトで表記しているのですが、数秒ごとに読み込みで止まります。
最高品質を見せないといけないので、120mb前後になってしまいます。

本当は10mbくらいにしないといけないらしいので、これでは、止まりまくるのは仕方がないでしょうか？

圧縮すれば半分ほどになりますが、今度は実際に販売している動画の画質を見せることができません。

ユーチューブにアップロードしている物を埋め込む方法もありますが、
これだとユーチューブにアップロードした時点で勝手に圧縮しているでしょうか？

できれば自分のサイトをオリジナルと認識させたいので、
まず初めに自分のサイトにアップロードしてから、ユーチューブにアップロードしています。

この場合自分のサイトの動画と、埋め込み両方とも表記させないといけないですよね。

本当に困ります。

どうすればよいのでしょうか？

回答No.4

i-q

サンプルとして５秒程度にまとめれば画質はソコソコ維持できますが？
無理でしょうか？
↓
https://doc-14-6c-docs.googleusercontent.com/docs/securesc/d5l0gku66m8m0rb47llddpgqkc1l1vq2/vg9ibhe063avsgvdg3rf4u8jub2lguna/1607073975000/04458096896220664994/04458096896220664994/1-KJBgoeymASFoH3Z4w_RMWqjbeEwfdet?e=download&authuser=0&nonce=h5tciallgufe4&user=04458096896220664994&hash=0mvvb1kgimgln0pdenfmfhck7pk7jget
（５秒、60fps、フルHD）

補足

ユーチューブの埋め込みとsourceタグの動画を二つ表記して、すぐ見たい人は埋め込み、完璧に同じ動画を見たい人は右クリックでsourceのほうの動画をダウンロードしてもらう形にしようと思います。

重複コンテンツが心配ですが、完璧なほうはユーチューブの埋め込みでは無理ですよね。

おそらく勝手に圧縮しているでしょうから

それならダウンロードしてもらうしかないです。

回答No.3

asciiz

動画データありがとうございます。
フルHDサイズ60fpsですか!!
ちょっと私の想像を超えていました。

そのサイズのものだと、1ページに複数置くのはお勧めできませんね。
もしプレビューを置くならば、HTMLのサイズ指定で表示を縮小するのはいけません。
表示は小さくても、実際に120MBをそのまま転送してしまうからです。

プレビュー画像として、480x270 サイズに縮小した動画を置くなどしてみてはどうでしょう?(縦横1/4)
単純計算でデータ量は1/16になりますので、動画ビットレートも700kbpsほどで同クオリティとなるはずです。

それならば、同時8本読み込みをしても5.6Mbps、十分常識的な転送速度ですし、「販売素材はフルHDです」ということでサンプルの役目を果たすのではないかと…

＞ajaxなどを使わないといけないということでしょうか？

ajaxを使って「カーソルを合わせたときだけ、その動画を読み込む」とかすれば、動画1本だけの転送量になるので、それでも良いかもしれませんね。(でも「カーソルが外れたときに停止する」という動作も入れないと、また複数本の読み込みになって止まってしまいます)

もし現在、11.3Mbps(11294kbps)の動画をいっぱい置いてあったとすると、回答No.1に書いたのと同じぐらい、11.3×8＝90.4Mbpsのインターネット速度が必要になります。
あなたの環境で、そこまでの実測速度は出ているでしょうか? (インターネット速度測定サイトなどで確認してみてください。)

単純な話、11.3Mbpsでエンコードした動画を、停止することなく見続けるには、インターネット速度(実測)11.3Mbps以上が必要なわけです。
そしてブラウザでは、HTML、CSS、画像、動画など、複数ファイルを同時に読み込みますので、そこに重い動画があると、その人のインターネット環境により、満足に表示できなくなってしまうのです。

でも、自分の環境だけ良くしても(たとえば1Gbpsインターネットを契約して実測500Mbps出るなど)、みんながみんな、そんなにいい回線を用意できているわけではありません。
ADSLでは4Mbpsがせいぜいですし、光回線でも10～30Mbpsといったところをターゲットにすべきでしょう。
その様な環境を想定して、宣伝ページというのは作らないと、見てもらえなくなります。

補足

ユーチューブの埋め込みとsourceタグの動画を二つ表記して、すぐ見たい人は埋め込み、完璧に同じ動画を見たい人は右クリックでsourceのほうの動画をダウンロードしてもらう形にしようと思います。

重複コンテンツが心配ですが、完璧なほうはユーチューブの埋め込みでは無理ですよね。

おそらく勝手に圧縮しているでしょうから

それならダウンロードしてもらうしかないです。

回答No.2

asciiz

＞商品そのものの画質を見てもらうことは不可能ということでしょうか？

120MBとは書かれていても、実際にどれぐらいの縦横サイズでどれだけの長さのものを販売しようとしているのかわからないので、回答No.1のように動画秒数を仮定して書きました。
不可能かどうか、「120MB」というファイルサイズだけでは判別付きません。

その販売している素材というのは、購入者がどう使うことを想定しているのでしょうか?
その動画を元に、その人なりの動画を作る、のであったら、いくらファイルサイズが大きくても構いません。
HDDはどんどん大きくなっていますし、最高クオリティの動画を提供するのはとても良いことです。
プレビューはYoutube埋め込みの低クオリティのもの、あるいは透かし入り&短い秒数のものを用意するので良いでしょう。

しかし、Webページに組み込んでもらうためであったなら、秒数に応じたファイルサイズに抑えなければなりません。
高クオリティ過ぎて、本来のWebページ読み込みが止まるようでは困るんです。

ひょっとして、1ページ中に動画をいっぱい貼ってたりしないでしょうか?
1つ1つはビットレートが抑えられていても、ブラウザは同時に8本とかダウンロードしようとしますので、それで通信容量を食ってしまっていることになっているのかもしれません。
素材一覧画面では静止画(あるいは超低クオリティ動画)にしておき、詳細画面で透かし入りの動画を表示する、あるいはマウスカーソルを重ねたら動画の再生を始める、などの仕組みを入れないといけないかもしれません。
(これも、あなたの実際の販売ページがどうなっているのかわからないので、想像で書いています)

動画はデータサイズが大きく、通信容量を食うものですから、販売ページの表示も工夫しなければならない、ということですね。
まあ、Youtubeの一覧表示画面も参考になると思います。

お礼

コーデック
H.264（.mp4）

解像度
1080p　(縦1920×横1080)
(HD画質)

フレームレート
60fps

総ビットレート（ビデオ）
11294kbps

オーディオサンプルレート
48.000kHz

コンテナフォーマット
mp4ファイル形式
H.264

動画のデータは上記です。

また動画はページを開くときにすべて読み込まれるのですね。

しかし、それでもすぐに止まります。

ajaxなどを使わないといけないということでしょうか？

回答No.1

asciiz

高クオリティのものを見せたいのはわかりますが、オンラインで見せるなら、やはり容量とのトレードオフは必要です。

例えば、10秒のアニメーション容量が120MBだとしたら、秒間12MBダウンロードできる通信環境でなければいけません。
1バイトは8ビットなので8倍してビットレートにすると、96Mbps。

実測で96Mbps出せるインターネット回線を、どれだけの人が準備しているでしょうか?

つまり1秒ぶんの動画データをダウンロードするのに1秒以上かかってしまうので、オンラインでは再生が止まってしまうのです。

見る側の環境を考えれば、せいぜい10Mbps程度の速度でも十分ダウンロードできるようなファイルサイズにしなければならないでしょう。
(一般的な環境としては30Mbpsほど出ると考えてもいいかもしれませんが、その動画素材だけに全容量を使うわけにもいきません。Webページの一部に組み込まれて使われると考えれば、やはり数Mbpsで済むようなエンコードにすべきでしょう。)

動画の縦横サイズを小さくするのも一つですし、例えば現在60fpsであれば、30fps動画にすれば約半分、20fpsにすれば1/3ぐらいになることが期待できます。(※フレーム間の動きが大きくなるのでそこまでは縮まないでしょうけど)

まあ動画ファイルにする際のビットレート指定で、10Mbpsとか5Mbpsとか指定すれば早いんですが、サイズ・fpsを変えないまま極端にビットレートを落とすと、ブロックノイズが出まくりのひどい動画となってしまいます。
そこはいろいろカット&トライということになってくるでしょうか。

お礼

商品そのものの画質を見てもらうことは不可能ということでしょうか？

透かし文字を入れた動画をだれでもダウンロードできるようにしておくしかないですかね？

10mbにする手もありますがそれならユーチューブの埋め込みのほうがましではないですか？