商品ページにおける動画について

[せせせ]

こんにちは。

商品ページに自動的に流れる動画を入れたいのですが、以下のコードを入れても①商品ページの編集画面では自動的に流れますが、正常にページを訪問した際には動画が自動的に流れない②動画の画面サイズがとてつもなく大きくなります。

（以下のコードを商品説明のHTMLに入れています＆実際の動画URLを入れていないです）

<video src="video.mp4" autoplay muted></video>

質問：

①コードを入れる場所は合っているでしょうか。

②どうすれば動画を再生ボタンを押さずに再生させますか。

③動画画面のサイズをどう調節すればいいですか。

④動画を入れたことにより、商品ページの読み込み速度は落ちますか。落ちる場合は対処法を教えていただきたいです。

[Qcoltd]

興味があり調査してみました。

> ①コードを入れる場所は合っているでしょうか。

掲載いただいているコードを、

私の開発環境で試したところ、

商品ページでも商品編集ページでも、

動画の自動再生を確認できました。

(商品編集ページで、商品説明にコードを追加しました。)

コードを入れる場所は合っている(間違っていない)と思います。

> ②どうすれば動画を再生ボタンを押さずに再生させますか。

> ③動画画面のサイズをどう調節すればいいですか。

もし、商品ページをiOSのブラウザで確認されている場合、自動再生には

playsinline

というアトリビュートが必要になります。

また、比較的時間が短い動画である場合、自動でloopさせないと自動再生できていないように見えてしまうかもしれません。その場合は、

loop

というアトリビュートを追加します。

大きさについては、

DOM構造によりますが、おそらく下記を追加して、

親要素の大きさに準じるようにすれば程よいサイズになるのではないかと思います。

style="width: 100%;"

まとめると、下記のようになります。

<video src="video.mp4" autoplay loop playsinline autoplay muted style="width: 100%;"></video>

> ④動画を入れたことにより、商品ページの読み込み速度は落ちますか。落ちる場合は対処法を教えていただきたいです。

使用される動画によるのですが、

おそらく、遅くはなっても人間が感覚的に分かるほどの速度の劣化はないはずです。

まず、

動画をShopifyにアップロードされているようでしたら、

Shopifyが品質を保ちつつデータサイズを圧縮してくれますので、

よほど巨大な動画でなければデータサイズが小さくなります。

また、

最近のブラウザは、

videoタグを使用している場合、

いきなり動画ファイル全てをダウンロードせずに、

少しずつダウンロードします。(範囲リクエストに対応していています。)

このように速度劣化を閲覧者に感じさせない技術があり、

実測値はもちろん遅くなると思いますが、

閲覧者が体感できるほど遅くはならないだろう、

と考えています。

ご参考まで。

(キュー田辺)

[せせせ]

キュー田辺様

ご丁寧にありがとうございます。

指示通りに、<video src="video.mp4" autoplay loop playsinline autoplay muted style="width: 100%;"></video>

こちらのコードを商品ページに入れてみました。

パソコンでは無事に自動再生されていたのですが、携帯（Safari)の方では自動再生ではなかったです。どうすればいいでしょうか。

よろしくお願いいたします。

[せせせ]

何度もメッセージ失礼します。

上記のコードをページに入れ、保存を押すと勝手に以下のコードになります。

<video style="width: 100%;" muted="" playsinline="" loop="loop" autoplay="autoplay" src="video.mp4"></video>

これはどう言った問題でしょうか。