• 文字サイズ
  • 小
  • 中
  • 大


解決済

goldページに動画を反映

  • 相談者：非公開
  • 2019/07/29 11:30
いつもお世話になっております。
goldで作った特集ページに動画を反映させたのですが、
PC、androidでは問題なく表示されましたがIOS(iPhone)だと動画が再生されませんでした。
IOSでも表示できるよう動画は30秒で無音に編集していたのですが、まったく動きません…
<video src="tuna-video2.mp4" loop autoplay muted></video>
↑タグはこのように入れて動かしています。
ここにplaysinlineを追加しても変わりませんでした。

ご教示いただければ幸いです。
キーワード：gold、タグ、動画、WEBページ、特集

投稿内容について報告する


  • 返信者：非公開
  • 2019/07/29 11:53
ECマスターズの田中です。

それでは、原因がどこにあるのか確認させていただく必要がございますので、
・特集ページのURL
・動画（tuna-video………（省略）………
  • 返信者：非公開（質問者）
  • 2019/07/29 13:06
URLを記載するのを抜かっておりました。
申し訳ございません。

特集URL↓
https//www.rakuten.ne.jp/gold/SHOP-U………（省略）………
  • 返信者：非公開
  • 2019/07/29 14:48
ECマスターズの田中です。

お知らせいただき、ありがとうございました。

私にて動作を確認したところ、楽天GOLDが
https://qiita.c………（省略）………
  • 返信者：非公開（質問者）
  • 2019/07/29 15:22
R-Cabinetを利用して組み込んでみようと思います。
Yahooの方でも動画がiPhoneで表示されないのも
「HTTP Range Request」が………（省略）………
  • 返信者：非公開
  • 2019/07/29 17:11
ECマスターズの田中です。

> Yahooの方でも動画がiPhoneで表示されないのも
> 「HTTP Range Request」が関係しているからで………（省略）………
  • 返信者：非公開（質問者）
  • 2019/07/29 17:24
iPhone7で確認をしたところ、動画部分が
静止画のようにずっと止まっているみたいで……
YahooもPC・androidでは問題なく動いていました。
………（省略）………
  • 返信者：非公開
  • 2019/07/29 17:54
ECマスターズの田中です。

私にて、改めていただいたページを
iPhone8上のSafariにて確認したところ、
「tuna-video2.mp4」の………（省略）………
  • 返信者：非公開（質問者）
  • 2019/07/30 14:00
Yahooのタグを
<video id="ID" muted webkit-playsinline playsinline autoplay loop pos………（省略）………
  • 返信者：非公開
  • 2019/07/30 14:34
ECマスターズの田中です。

> 動画の縦幅がPCやandroidと違い、白い余白のようなものが出てきてしました。

動画設置用のvideoタグに、
………（省略）………
  • 返信者：非公開（質問者）
  • 2019/07/30 15:59
loopの重複を修正して整えました。ご指摘ありがとうございます。

video {
height: 38.8vw;
↑を追記しましたところ、iPhone………（省略）………
  • 返信者：非公開
  • 2019/07/30 17:56
ECマスターズの田中です。

楽天にてstyle.cssの該当部分を確認したところ、
現時点で下記のように記載されておりました。

= この下の行から………（省略）………
  • 返信者：非公開（質問者）
  • 2019/07/31 11:30
教えていただいた通りにタグを追加しましたら崩れることなく反映されました！
ありがとうございます。………（省略）………
このフォーラムへの質問は終了しました
質問を検索する
返信も検索対象にする

カテゴリーから探す