商品ページに動画を自動再生で埋め込む際の技術的な問題について質問が投稿されました。
主な問題点：
提案された解決策：
playsinline 属性が必須loop 属性を追加style="width: 100%;" を使用現状：
パソコン（Safari以外）では自動再生が確認できたものの、携帯のSafariでは自動再生されない状態。また、コードを保存すると属性の順序が自動的に変更される現象も報告されています。
こんにちは。
商品ページに自動的に流れる動画を入れたいのですが、以下のコードを入れても①商品ページの編集画面では自動的に流れますが、正常にページを訪問した際には動画が自動的に流れない②動画の画面サイズがとてつもなく大きくなります。
（以下のコードを商品説明のHTMLに入れています＆実際の動画URLを入れていないです）
質問：
①コードを入れる場所は合っているでしょうか。
②どうすれば動画を再生ボタンを押さずに再生させますか。
③動画画面のサイズをどう調節すればいいですか。
④動画を入れたことにより、商品ページの読み込み速度は落ちますか。落ちる場合は対処法を教えていただきたいです。
興味があり調査してみました。
①コードを入れる場所は合っているでしょうか。
掲載いただいているコードを、
私の開発環境で試したところ、
商品ページでも商品編集ページでも、
動画の自動再生を確認できました。
(商品編集ページで、商品説明にコードを追加しました。)
コードを入れる場所は合っている(間違っていない)と思います。
②どうすれば動画を再生ボタンを押さずに再生させますか。
③動画画面のサイズをどう調節すればいいですか。
もし、商品ページをiOSのブラウザで確認されている場合、自動再生には
playsinline
というアトリビュートが必要になります。
また、比較的時間が短い動画である場合、自動でloopさせないと自動再生できていないように見えてしまうかもしれません。その場合は、
loop
というアトリビュートを追加します。
大きさについては、
DOM構造によりますが、おそらく下記を追加して、
親要素の大きさに準じるようにすれば程よいサイズになるのではないかと思います。
style="width: 100%;"
まとめると、下記のようになります。
④動画を入れたことにより、商品ページの読み込み速度は落ちますか。落ちる場合は対処法を教えていただきたいです。
使用される動画によるのですが、
おそらく、遅くはなっても人間が感覚的に分かるほどの速度の劣化はないはずです。
まず、
動画をShopifyにアップロードされているようでしたら、
Shopifyが品質を保ちつつデータサイズを圧縮してくれますので、
よほど巨大な動画でなければデータサイズが小さくなります。
また、
最近のブラウザは、
videoタグを使用している場合、
いきなり動画ファイル全てをダウンロードせずに、
少しずつダウンロードします。(範囲リクエストに対応していています。)
このように速度劣化を閲覧者に感じさせない技術があり、
実測値はもちろん遅くなると思いますが、
閲覧者が体感できるほど遅くはならないだろう、
と考えています。
ご参考まで。
(キュー田辺)
キュー田辺様
ご丁寧にありがとうございます。
指示通りに、
こちらのコードを商品ページに入れてみました。
パソコンでは無事に自動再生されていたのですが、携帯（Safari)の方では自動再生ではなかったです。どうすればいいでしょうか。
よろしくお願いいたします。
何度もメッセージ失礼します。
上記のコードをページに入れ、保存を押すと勝手に以下のコードになります。
これはどう言った問題でしょうか。