bxsliderのyoutube停止方法について

Question

[現状]
bxsliderを使用して、iframeで埋め込んだyoutubeを下記記述方法で停止していました。
onSlideBefore: function($slideElement, oldIndex, newIndex) {
$('#video_side').find('iframe').each(function() {
var src= $(this).attr('src');
$(this).attr('src',src);
});

しかし、この場合初期化処理が原因で以下不備がでてきたため、動画の停止のみに変更をしたいです。
・印刷ダイアログがキャンセルされる
・IEで画面がフリーズする

[やりたいこと]
ベストな方法としましては、onSlideBeforeの引数にあるoldIndexから一つ前のスライドを取得して、youtubeの停止を行う。です。

[質問事項]
・oldIndexからどのように一つ前のスライドを取得できるか
・iframeタグのyoutubeの停止方法

Comments

[Lhankor_Mhy]

IFrame Player API を使っているのですか？

[taku-]

こちら(https://developers.google.com/youtube/iframe_api_reference?hl=ja)の内容ですよね？
APIは利用していない。と思います。
iframeのsrcに直接埋め込みしています。
<iframe id="player" type="text/html" width="640" height="360"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>

[Lhankor_Mhy]

IFrame Player API を使わずに動画を停止する方法はあるのですか？

[taku-]

この内容（https://memo.ag2works.tokyo/post-1283/）が近かったのですが、
試したところ、停止しませんでした。
また、こちらの場合、スライド前のiframeのidは分からないので、onSlideBeforeイベント時に一つ前のスライドを取得する術も知りたいです。

[Lhankor_Mhy]

IFrame Player API を使わずに動画を停止する方法については目星がついていないので、APIを使う、ということでいいですか？

[taku-]

現状では方法がないようでしたら、APIを使って停止できれば構いません。

[Lhankor_Mhy]

把握しました。

Answer 1

IFrame Player API を使ってマウントし、YT.Player オブジェクトを配列に保存しておいて、oldIndex を使ってアクセスするのがよさそうに思います。
ただ、この手のスライダーは要素をクローンしてループさせるようにしていますので、そこは気を付けた方がいいかもしれません。

コメントを受けて追記

const playerArray = [
    new YT.Player(...),
    new YT.Player(...),
    new YT.Player(...),
    new YT.Player(...),
    new YT.Player(...),
];

//...

onSlideBefore: function($slideElement, oldIndex, newIndex) {
    playerArray[oldIndex].pauseVideo()

Comments

[taku-]

ご回答ありがとうございます。
実際のコードを基にご説明いただけると助かります。
ご教授いただいた内容自体、正直やり方が分かりません。

[Lhankor_Mhy]

ご質問で実際のコードをご提示いただけていないので、回答もコードを用いないものになるのはやむを得ない、というのが当方の考え方ですので、ご了解ください。

[taku-]

失礼しました。
iframeの埋め込み自体は、可変数になるので、上記方法は使えないかもしれません。

onSlideBeforeの使い方でご存知でしたら、教えていただきたいのですが、
引数（$slideElement, oldIndex, newIndex）だけで、一つ前のスライドのidを取得する方法は分かりますでしょうか？

[Lhankor_Mhy]

わかりませんが、$('#video_side').find('iframe').eq(oldIndex) とかでそれっぽくならないですかね。

[taku-]

ダメでしたね。
いろいろとありがとうございます。
解決には至らなそうなので、停止処理は諦めます。

[Lhankor_Mhy]

こちらでテストしたコードでは onSlideBefore: (x,i)=>console.log(x.prevObject.eq(i)[0].id) で取れました。

前述のコードでは id を拾っているわけではなくて jQueryオブジェクトになっているはずです。念のため。

[taku-]

承知いたしました。

Answer 2

解決には至らなそうなので、停止処理は諦めます。