楽天動画の自動再生・関連動画の表示について

Question

お世話になります。

楽天商品ページの動画について下記が可能かどうか教えてください。
１.動画の自動再生をやめて、自分のタイミングでスタートしたい
2.動画が終わった後に関連の画像ではなく、その商品のスタート画面にしたい

下記のお店のカート横の動画は、終わった後に関連動画がでていないようなので、
何か方法があるのかと思いまして。
https://item.rakuten.co.jp/e-goods/kaden_ele-fsk-panel/

どうぞよろしくお願いします。

Answer

ECマスターズの田中です。

いただいたお店のカート横の動画は、
R-Cabinetの動画管理機能で設置された動画となっております。
https://www.rakuten.co.jp/shops/manual/navi/design/02_menu006.html

通常、R-Cabinetの動画管理機能であれば、
再生後には関連動画は表示されないはずですが、
れいさんのショップでは、どのシステムで動画を設置されておりますでしょうか。

同様にR-Cabinetをご利用されている上で
関連動画が表示されるということであれば、
一度確認させていただく必要がございますので、
表示を確認できるページのURLをお知らせいただけますでしょうか。
rakuten.co(ne).jp/◯◯◯/ の ◯◯◯ の部分は伏せていただいて結構です。
フォーラムにてご返信いただき辛い場合は、リクエストフォームよりお知らせください。

Answer

お返事ありがとうございます。

当店でもR-Cabinetの動画管理を使用して、出てきたソースをRMSとgoldに貼り付けています。

カート横の動画もそうですが、商品説明文に入れたフレーム内(gold)の動画も勝手に始まってしまい、
動画を見る頃には関連動画が表示されているということもあり困っております。

例えば下記のページ。
https://item.rakuten.co.jp/●●●/a0103/
https://item.rakuten.co.jp/●●●/s0062/
その他のページも同様の症状です。

どうぞよろしくお願いします。

Answer

ECマスターズの田中です。

具体例をお知らせいただきありがとうございます。
私にていただいたページを確認させていただいたところ、
確かに各動画が自動で再生される設定となっておりました。

カート横については、スクロールした時点で自動再生が始まりますが、
販売説明文内の動画は、ページ読み込み完了と共に再生されているようで、
確かに、そこまでスクロールする頃には終了していてもおかしくありません。

R-Cabinetの動画管理機能にはそのような設定がないのですが、
スマートフォン用商品ページに埋め込まれた動画は
しっかりとスクロールに応じて再生・停止するようですので、

一度、スマートフォン用商品ページと同じ形式で、
販売説明文内の動画用のHTMLタグをご記載いただき、
表示をご確認いただけますでしょうか。

具体的な方法ですが、
動画用のタグを
 と  で挟んでいただき、
タグのURLの末尾に　&sel=.videoDivNormal　を追記していただく、
という手順になります。

なお、今回、動画の表示を確認するにあたり、
３ショップにて表示を確認いたしましたが、
再生完了後に関連動画の紹介は一切ございませんでした。

一度、楽天会員としてログインはせずに、
れいさんにて商品ページをご確認いただいたことのない
機種（PCやスマホ等）やブラウザで、
関連動画が表示されるか、ご確認いただけますでしょうか。

また、参考にさせていただければと思いますので、
関連動画が表示された際のスクリーンショットを、
club@ec-masters.net 宛に、メールにてお送りいただけますでしょうか。

Answer

関連動画が表示される件については、修正方法を発見しました。
R-Cabinetの動画管理機能「タイトル画像を表示」のチェックを外したら関連動画が表示されなくなりました。

販売説明文内の動画の、ページ読み込み完了と共に再生される件は、教えて頂いたタグを追加しましたが、改善されませんでした。
下記のページに設定しました。
https://item.rakuten.co.jp/●●●/w0137/
正しく設定できているか見ていただけますでしょうか。

Answer

【訂正】

関連動画が表示される件については、修正方法を発見しました。
R-Cabinetの動画管理機能「タイトル画像を表示」のチェックを外したら関連動画が表示されなくなりました。

↑これをしても直らない商品が複数でてきたので、関係ないようです。
すみません。

継続して「関連動画が表示される件」お調べいただけたらと思います。
メールでスクリーンショットを送ります。

Answer

ECマスターズの田中です。

ご連絡いただき、ありがとうございます。
R-Cabinetの動画機能について、確認を進めております。
改めてご返信いたしますので、今しばらくお待ちいただきますようお願いします。

Answer

ECマスターズの田中です。

関連動画表示に関しては、メールでいただいた通り、
商品動画として登録した商品の販売状態に
関連している可能性もございますが、
明確な原因についてはわからない状態となっております。

説明文内の動画のみが対象となりますが、
JavaScriptを利用して、
内のページ読み込み直後の動画自動再生を停止する、
という解決方法はいかがでしょうか。

最初に、外部JSファイルとしてjQueryをご用意ください。
https://jquery.com/
上記公式サイトの「Download jQuery」より、
「Download the compressed, production jQuery 3.2.1」を右クリックして、
別名で保存してください。

保存していただいたjQueryを、
楽天GOLDにアップロードしていただき、

GOLD内に保存された動画用HTMLファイル（w0137.htmlなど）の
〜タグの中に、
下記HTMLソースをご記載ください。

= この下の行から ====================


$(function(){
  $('.RVideoPF-Player-Html5Player-Video').pause();
});

= この上の行まで ====================
※jQueryのURLは、実際にアップロードしていただいた外部JSファイルのURLにご変更ください。

このソースをご記載いただくことで、
ページ読込と同時の自動再生を止めることができるはずですので、
一度、お試しいただきますようお願いします。

Answer

教えて頂いたjQueryを試したのですが、やはり自動再生されてしまいます。
下記ページに設定しました。
https://item.rakuten.co.jp/●●●/a0103/

お手数をおかけします。
ご確認よろしくお願いいたします。

Answer

ECマスターズの田中です。

＞やはり自動再生されてしまいます。

それでは、
$('.RVideoPF-Player-Html5Player-Video').pause();
を
$(window).on('load',function(){ $('video').get(0).pause(); });
に変えて、再度お試しいただけますでしょうか。

Answer

うまくいきました。
ありがとうございます。

関連動画の表示の方は、すぐにできる対応方法がないようなので、一旦解決済みにします。

この度も本当にありがとうございました。