楽天GOLD - safari及びMac・iPhone・iPadだとmp4動画が再生されない

Question

楽天GOLDにてmp4動画を追加したく諸々試しているのですが、
ブラウザはsafari、またはデバイスがMac・iPad・iPhoneの場合、再生されない現象が起こっています。
様々なサイトで調査して試しましたが、解決されず困っています。

R-Cabinetの動画管理にて登録する方法でも活用できると思いますが、
・サイズ幅に制限がある（最大横幅640pxに自動調節される）
・R-Cabinetで登録すると解像度が劣化する
上記の理由から、R-Cabinetは使いたくないので、
なるべくFTPサーバーでアップしたものを使用したいと考えています。

■入力中のタグ（poster、srcの画像パスはサンプルです）



■mp4動画の形式
・コーデック：AAC、H.264、プログレッシブ方式
・容量：16.5MB
・再生時間：13秒
・サイズ：1920×1080
・音声：あり

■ブラウザ・デバイスの現状
・Chrome、FireFox
　PC：再生可
　スマホ：Android→再生可、iPhone→再生不可
　iPad：再生不可
　※Chromeのデベロッパーツールで確認すると再生できている
・safari：いずれのデバイスでも再生不可

■試したこと
・「autoplay muted playsinline」を入れる
・iOSで「低電力モード」にしていると再生されないとのことだったが、
　当方のiPhoneにて確認しましたが、この設定はしていませんでした（なのに再生されない）

特にiOSはシェア率が高いので解決したいと思っています。
上記につきまして、ご教示のほどお願いいたします。

Answer

ECマスターズの伊藤です。

> R-Cabinetの動画管理にて登録する方法でも活用できると思いますが、
> ・サイズ幅に制限がある（最大横幅640pxに自動調節される）
> ・R-Cabinetで登録すると解像度が劣化する
> 上記の理由から、R-Cabinetは使いたくないので、
> なるべくFTPサーバーでアップしたものを使用したいと考えています。

GOLDでの動画のアップをご希望とのことですが、
残念ながら、楽天GOLDが
https://qiita.com/gecko655/items/110373a6c88177d23126
で紹介されている「HTTP Range Request」に対応していないため、
macOS/iOS問わず、Safariで動画を表示することができません。

お力になれず申し訳ありませんが、
動画を設置される際は、
R-Cabinetを利用してご設置いただきますようお願いします。

Answer

＞残念ながら、楽天GOLDが
＞https://qiita.com/gecko655/items/110373a6c88177d23126
＞で紹介されている「HTTP Range Request」に対応していないため、
＞macOS/iOS問わず、Safariで動画を表示することができません。

上記ですが、あくまで「safari」で対応していないということでしょうか？
macOS/iOSでも、他のブラウザだったら見れるということでしょうか？
また、R-Cabinetから生成されるタグはGOLDでも使用できるという認識でよろしいでしょうか？

Answer

ECマスターズの田中です。

> 上記ですが、あくまで「safari」で対応していないということでしょうか？
> macOS/iOSでも、他のブラウザだったら見れるということでしょうか？

私にて、Safariおよびシェアの大きいChrome/Firefoxの動作を確認したところ、
macOS上では、Safariのみ見ることができず（Chrome・Firefoxは閲覧可能）、
iOS上では、Safari・Chrome・Firefox全てで見ることができませんでした。

> R-Cabinetから生成されるタグはGOLDでも使用できるという認識でよろしいでしょうか？

はい、GOLDに設置したページにてご使用いただくことができます。

Answer

＞私にて、Safariおよびシェアの大きいChrome/Firefoxの動作を確認したところ、
＞macOS上では、Safariのみ見ることができず（Chrome・Firefoxは閲覧可能）、
＞iOS上では、Safari・Chrome・Firefox全てで見ることができませんでした。

弊社でも上記同様の表示結果でした。
iOS上でも、Chrome・Firefoxだったらvedioタグで表示できる方法はないのでしょうか？


＞はい、GOLDに設置したページにてご使用いただくことができます。

承知いたしました。
R-Cabinetから使用する際、動画の幅がS・M・Lでそれぞれ指定されているのですが、
ウインドウ幅に合わせて画像サイズをカスタマイズすることは可能でしょうか？（width・heightを％にしたい）
レスポンシブ対応したいなと思っています。

Answer

ECマスターズの伊藤です。

> 弊社でも上記同様の表示結果でした。
> iOS上でも、Chrome・Firefoxだったらvedioタグで表示できる方法はないのでしょうか？

残念ながら、現在のところ、Videoタグを
ご利用できる方法は見つかっておりません。

もし、該当する店舗さんがございましたら、
調査させていただきますので、
URLをご連絡いただけますと幸いです。

Answer

こんばんは、shinoshinoです。

この再生されないというのは、タップで再生又は自動再生のどちらになりますか？

Answer

ECマスターズ伊藤様
＞残念ながら、現在のところ、Videoタグをご利用できる方法は見つかっておりません。
＞もし、該当する店舗さんがございましたら、調査させていただきますので、
＞URLをご連絡いただけますと幸いです。

Videoタグの件は、承知いたしました。
該当する店舗様のURLは、どちらにお送りした方がよろしいでしょうか？
こちらだと全体公開になってしまうので、お問い合わせフォームの方かな、と思いましたが…。
また、R-Cabinetから使用する際、動画の幅についてもご回答お願いいたします。

shinoshino様
＞この再生されないというのは、タップで再生又は自動再生のどちらになりますか？
メッセージいただきありがとうございます。
タップで再生・自動再生いずれも該当してしまいました。

Answer

ECマスターズの伊藤です。

> 該当する店舗様のURLは、どちらにお送りした方がよろしいでしょうか？
> こちらだと全体公開になってしまうので、お問い合わせフォームの方かな、と思いましたが…。

フォーラムへのご投稿が難しい場合は、
一番最初の投稿の右下にございます
「投稿内容について報告する」より
ご投稿くださいませ。

事務局にのみ表示される形となり、
一般には公開されません。

どうぞよろしくお願いいたします。

Answer

こんにちは、shinoshinoです。


以前、フォックスコンに勤めていたエンジニアの友達から聞いた話ですが、


最近のスマホの場合、SafariやChromeでは、通常の方法では自動再生がされないと言うように仕様が2017年ぐらいから徐々に変更されているそうです。


パケット料金や通信速度の関係と言われており、またスマホは何処でも使用される端末なのでマナーにも配慮した上で無音でないと自動再生されないと言う決まりもあります。


今後の検討予定としても、容量の軽い短い動画（3MB）のみしか自動再生させなくする等の検討もあると聞いてます。


例えば、videoタグの“autoplay”を外すとどうなりますか？

Answer

ECマスターズ伊藤様
＞一番最初の投稿の右下にございます「投稿内容について報告する」よりご投稿くださいませ。

ありがとうございます。先ほど「投稿内容について報告する」の形でお送りいたしました。
お手数をおかけしますが、ご確認のほどお願いいたします。


shinoshino様
＞最近のスマホの場合、SafariやChromeでは、通常の方法では自動再生がされないと言うように仕様が2017年ぐらいから徐々に変更されているそうです。
＞パケット料金や通信速度の関係と言われており、またスマホは何処でも使用される端末なのでマナーにも配慮した上で無音でないと自動再生されないと言う決まりもあります。

上記、スマホの仕様につきまして、情報提供ありがとうございます。
こちら知らなかった情報なので、今後のサイト改善の参考にいたします。

＞videoタグの“autoplay”を外すとどうなりますか？

こちらは、autoplayを外した場合やサイズを10MB以下までに軽くして試しておりましたが、やはり再生されませんでした。
やはり、safari及びiOSでは対応していないのかもしれません…

Answer

ECマスターズの伊藤です。

参考店舗さんのご連絡ありがとうございました。

確認したところ、Cabinetを使用した方法となっておりました。


また

> R-Cabinetから使用するとなった場合、動画の幅がS・M・Lでそれぞれ指定されていますが、
> 画像サイズをウインドウ幅に合わせた可変幅に可能か？（width・heightを％にしたい）

につきまして、ご回答が漏れており申し訳ございません。

    
        【Cabinetの動画のHTML】
    

    
        #video>div {
            width: 100%!important;
        }
    

こちらの方法にて、横幅は可変に対応できましたが、
高さは固定となってしまいます。

Answer

※回答を送信しましたが、反映されていなかったようなので再度お送ります。
※内容が重複しておりましら申し訳ございません。

ECマスターズ伊藤様

＞こちらの方法にて、横幅は可変に対応できましたが、
＞高さは固定となってしまいます。

参考店舗様の件、承知いたしました。諸々ご確認いただきありがとうございます。
楽天はheightの可変に厳しい印象がありましたが、動画もなんですね…。
いただいたタグを元に試したいと思います。

shinoshino様
＞最近のスマホの場合、SafariやChromeでは、
＞通常の方法では自動再生がされないと言うように仕様が2017年ぐらいから徐々に変更されているそうです。
＞パケット料金や通信速度の関係と言われており、またスマホは何処でも使用される端末なので
＞マナーにも配慮した上で無音でないと自動再生されないと言う決まりもあります。

上記、スマホの仕様につきまして、情報提供ありがとうございます。
こちら知らなかった情報なので、今後のサイト改善の参考にいたします。

＞videoタグの“autoplay”を外すとどうなりますか？

こちらは、autoplayを外した場合やサイズを10MB以下までに軽くして試しておりましたが、やはり再生されませんでした…。