goldページに動画を反映

Question

いつもお世話になっております。
goldで作った特集ページに動画を反映させたのですが、
PC、androidでは問題なく表示されましたがIOS(iPhone)だと動画が再生されませんでした。
IOSでも表示できるよう動画は30秒で無音に編集していたのですが、まったく動きません…

↑タグはこのように入れて動かしています。
ここにplaysinlineを追加しても変わりませんでした。

ご教示いただければ幸いです。

Accepted Answer

ECマスターズの田中です。

楽天にてstyle.cssの該当部分を確認したところ、
現時点で下記のように記載されておりました。

= この下の行から ====================
@media screen and (max-width:640px){
img { width:100%;}

video {
  width: 100%; // 適宜指定
}

}
= この上の行まで ====================

このvideoタグの規則にheightを追記することで、
横幅640px以下の時にのみ適用され、
PC・スマホ、いずれで閲覧したときも問題なく表示されるはずですが、
うまく適用されませんでしょうか。

なお、スタイルシートの中では // はコメントとして使えず、
次の規則を巻き込んでエラーを起こす可能性がございますので、
コメントにする部分は、正しく /* と */ で囲んでいただきますようお願いします。

以上２点を修正すると

= この下の行から ====================
@media screen and (max-width:640px){
img { width:100%;}

video {
  height: 38.8vw; 
  width: 100%; /* 適宜指定 */
}

}
= この上の行まで ====================

上記内容となりますので、
このように修正の上、PC・スマホ、iOS・Androidでそれぞれ表示に問題が発生するかどうか
ご確認いただきますようお願いします。

Answer

ECマスターズの田中です。

それでは、原因がどこにあるのか確認させていただく必要がございますので、
・特集ページのURL
・動画（tuna-video2.mp4）のURL
を、返信もしくは「投稿内容について報告する」よりお知らせ願います。

Answer

URLを記載するのを抜かっておりました。
申し訳ございません。

特集URL↓
https://www.rakuten.ne.jp/gold/tokeiten/feature/prospex/index.html
動画↓
https://www.rakuten.ne.jp/gold/tokeiten/feature/prospex/tuna-video2.mp4

よろしくお願いいたします。

Answer

ECマスターズの田中です。

お知らせいただき、ありがとうございました。

私にて動作を確認したところ、楽天GOLDが
https://qiita.com/gecko655/items/110373a6c88177d23126
で紹介されている「HTTP Range Request」に対応していないため、
macOS/iOS問わず、Safariで動画を表示することができないことがわかりました。

動画を設置される際は、
R-Cabinetを利用してご設置いただきますようお願いします。

Answer

R-Cabinetを利用して組み込んでみようと思います。
Yahooの方でも動画がiPhoneで表示されないのも
「HTTP Range Request」が関係しているからでしょうか？

Answer

ECマスターズの田中です。

> Yahooの方でも動画がiPhoneで表示されないのも
> 「HTTP Range Request」が関係しているからでしょうか？

私のiPhone8上のSafariにて、
Yahoo!トリプルの同テーマのページ（/kikaku/prospex/index.html）を
確認したところ、
問題なく動画が表示されておりました。
別のページなどで、表示されない問題などございましたでしょうか。

Answer

iPhone7で確認をしたところ、動画部分が
静止画のようにずっと止まっているみたいで……
YahooもPC・androidでは問題なく動いていました。
Yahoo特集↓
https://shopping.geocities.jp/tokeiten/kikaku/prospex/index.html

Answer

ECマスターズの田中です。

私にて、改めていただいたページを
iPhone8上のSafariにて確認したところ、
「tuna-video2.mp4」のみ正常に表示されており、
他の動画は、おっしゃるとおり停止していることがわかりました。

「tuna-video2.mp4」と他の動画を比べると、
他の動画は

という形式で設置されているのに対し、「tuna-video2.mp4」は



という形式で設置されていることがわかりました。

「tuna-video2.mp4」以外の動画も、後者のタグでの設置をお試しいただけますでしょうか。
タグ中、変更が必要な箇所は「ID」「サムネイル用画像URL」「動画URL」の三箇所です。
IDは、同ページ内の他の要素と重複しないようご注意ください。
（ファイル名を利用して、movie-samurai、movie-monster、など）
「サムネイル用画像URL」は、表示されない可能性がございますので、
動作確認の際は、ひとまずはトリプル上の適当な画像にてご設定をお願いします。

Answer

Yahooのタグを



に統一して設置しましたら無事動画のほうが反映されました。
楽天の方も動画URLをgoldから変えて上記のタグで設定しましたら反映されました。

ただ、iPhoneでも動画が動くようにはなったのですが、
動画の縦幅がPCやandroidと違い、白い余白のようなものが出てきてしました。
動画のサイズは1000×400です。
重ね重ねの質問で申し訳ないですが、ご教示いただけたら幸いです。

Answer

ECマスターズの田中です。

> 動画の縦幅がPCやandroidと違い、白い余白のようなものが出てきてしました。

動画設置用のvideoタグに、
スタイルシートによる高さが設定されていないことが原因です。

ページ内の動画全てが1000x400であれば、
ページ全体の左右余白合計3％を念頭に入れた上で、

https://www.rakuten.ne.jp/gold/tokeiten/feature/prospex/css/style.css
上記ファイルにて、
video {
の次の行として
height: 38.8vw;
を追記していただきますようお願いします。
（Yahoo!トリプルでも同様にご変更ください）

なお、ページ内のvideoタグを確認したところ、
全てのvideoタグに id="loop" が指定されておりました。
ID属性は本来、ページ内で重複してはならない規則なのですが、
表示に影響が出るケースは少ないので、
もし可能であれば、重複しない文字列をご指定いただきたい、
ということだけお含みおきいただければ幸いです。

Answer

loopの重複を修正して整えました。ご指摘ありがとうございます。

video {
height: 38.8vw;
↑を追記しましたところ、iPhoneでの表示がきれいに直りましたが、
パソコンでの表示で動画が大きくなりはみ出てしまいました。
@media screenで調整したらiPhoneの方で動画が真っ白になってしまいました…。

Answer

教えていただいた通りにタグを追加しましたら崩れることなく反映されました！
ありがとうございます。