サイトごとに動画読み込みを遅延させるJQuery

Question

###目的とする仕組み
youtubeとvimeoの読み込みを遅延させるjQueryを書いています。

仕組みとしてはiframeがあったら動画でなくサムネイルを表示し、サムネイルクリックで再生。というものです。

###現状のコードと問題
現状の下記コードのサンプルをJSfiddleで作りました。
https://jsfiddle.net/kt6zm7v8/

jsonによるサムネイル取得などは問題ないはずなのですが、vimeoで動画がそのまま再生されてしまいます。

どのような修正が適切か、どなたかご査収頂けませんでしょうか。

何卒宜しくお願い申し上げます。

    var movies = [];
    var images = [];

    //全てのiframeタグに対して処理を実行する。
    $('iframe').each(function(index, element) {

        //iframeの中のsrc(埋め込みタグのURL)を取得。
        var movie_src = $(this).attr('src');

        //取得したURLはmovies配列に格納。
        movies[index] = movie_src
        
		//サイトで毎に条件を区別し、URLから動画idのみ取得して、文字連結をしてサムネイルを取得。
		var movie_src_basis = movie_src.split('/')[2];
		
		  //youtube
		  if( movie_src_basis.match('youtube') || movie_src_basis.match('youtu.be') ) {		
			images[index] = 'http://i.ytimg.com/vi' + movie_src.substring(movie_src.lastIndexOf("/")) + '/maxresdefault.jpg'
			$(this).after('<img src="' + images[index] + '" class="movie">').remove();         
		  }
	
		  //vimeo
		  if( movie_src_basis.match('vimeo') ) {		
		    var movie_src_vimeoID = movie_src.match('[0-9]{9}');
		    $.getJSON("https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/"+movie_src_vimeoID+"/").done(function(jsonData) {
			  images[index] = jsonData.thumbnail_url;
			  $(this).after('<img src="' + images[index] + '" class="movie">').remove();   
			});
			
          }			

    });

    $('.movie').each(function(index, element) {
        //サムネイルがクリックされた時の処理
        $(this).click(function (){
            //iframeに置き換え。
            $(this).after('<iframe src="' + movies[index] + '?autoplay=1"></iframe>').remove();
        });
    });

Comments

[m.ts10806]

発生しているエラーメッセージを追記してください。https://teratail.com/help/question-tips#questionTips3-4

[m.ts10806]

movies[index] = movie_src の後ろに ; がないようですがこれは問題ありませんか？他にも文末に ; がない箇所があるのでご確認ください。

[madoka9393]

質問文のコードの2行目(変数定義)でエラーが発生しているということでしょうか？　コード的には該当行には特に問題はありませんが…。(他の行で行末に「；」がない箇所はいくつかあるみたいです)

[eaconian]

mts10806さま、madoka9393さま、アドバイスありがとうございます。エラーの件は私のミスだったので気にしないでください。

Answer 1

$(this)の使い方に問題がある気がします。
vimeoとyoutubeの動画のクラスをそれぞれ一意なものに変更し(もしくは一意なIDを付与し)

//クラス名は仮
$(".vimeo_media").after('<img src="' + images[index] + '" class="vimeo_movie">').remove(); 
$(".youtube_media").after('<img src="' + images[index] + '" class="youtube_movie">').remove(); 

とした上で

//サムネイルがクリックされた時の処理
$(".vimeo_movie").click(function (index, element){
  //iframeに置き換え。
  $(".vimeo_movie").after('<iframe src="' + movies[index] + '?autoplay=1"></iframe>').remove();
});

//サムネイルがクリックされた時の処理
$(".youtube_movie").click(function (index, element){
  //iframeに置き換え。
  $(".youtube_movie").after('<iframe src="' + movies[index] + '?autoplay=1"></iframe>').remove();
});

としてやるとか。
(上の例ではmovies[index]がundefinedになってしまったので、そこもどうにかする必要はありますが…)

Comments

[eaconian]

たしかにサイトごとにクリック処理は変えないといけなそうですね。ありがとうございます。そのようにしてみます。

Answer 2

var movie_src_vimeoID = movie_src.match('[0-9]{9}');

String.prototype.match()の引数は正規表現です。文字列ではありません。

str.match(regexp)

String.prototype.match() - JavaScript | MDN

Comments

[madoka9393]

正常な挙動なのかはわからないのですが、これでも目的のもの(9桁の数字)自体は抜けるみたいなんですよね…。
(質問者様のJSfiddleでログ仕込んで見て吃驚)

[eaconian]

Lhankor_Mhyさま
ありがとうございます。ちょっと意図がつかみかねます。どこをどう直せば解決に向かうとお考えですか？
あとさきほど思ったのですが、 vimeo の条件下にある $(this) が json の function の中に入っているために、 $('iframe') の $(this) として扱えないことが原因かもと考えていたのですが、それは違うでしょうか？（とはいえそれをどう修正すべきかがわかりませんが…）

[eaconian]

madoka9393さま
ご意見ありがとうございます。

[Lhankor_Mhy]

madoka9393さん、そうでしたか！　キャストするんですね、それはびっくり。
eaconianさん、大変失礼しました。おっしゃるとおりの部分が原因かと思います。解決方法は変数に退避しておけばいいです。

[eaconian]

Lhankor_Mhyさま
「変数に退避」ですか。どうかもう少し、アドバイスを頂戴できませんでしょうか。
実は私は１つずつ縦に順に書くしか分からず今回のような構造になるとお手上げで、「変数として別の場所に書いて呼び出す」のようなことが全くわからないのです。どの部分をどのように書けばよろしいでしょうか。

[Lhankor_Mhy]

わかりにくくてすみません。
eachメソッドのコールバック関数の中で、
var target = this;
などとして、this の代わりに用いればいいかと思います。

[eaconian]

難しいですね。あれからかなり改善してあとvimeoのまさにその部分だけになったのですけれど（https://jsfiddle.net/kt6zm7v8/69/）、こちらを仰るように変えて頂けませんでしょうか…？

[madoka9393]

コード見てみましたがvimeoの方はimgの生成が上手いこといってないみたいです。
img生成箇所について「this」を使わないように作りを変更すればimg自体は生成できるところまでは
確認できました。
が、vimeoの方は生成したimgに対するクリックイベントが発火しなかったので、
その原因を探る必要がありそうです。

[Lhankor_Mhy]

https://jsfiddle.net/Lhankor_Mhy/kt6zm7v8/86/
これでよろしいですか。

[madoka9393]

横から失礼ですが、やはりvimeoのimgに対するクリックイベントが発火してないみたいですね…。

[Lhankor_Mhy]

質問は、
> vimeoで動画がそのまま再生されてしまいます。どのような修正が適切か
だったと思いますので、そちらは関知していません。
必要であれば、質問者が別の質問を立てるのがいいかと思います。

[madoka9393]

なるほど、確かにその通りですね。

[Lhankor_Mhy]

クリックイベントが発火しない原因は、イベント設定時にまだvimeoのimage要素がまだ存在しないからなんですが、やり取りを見る感じ、質問者はコールバック関数を理解していないので、解決は難しいかもしれません。

[madoka9393]

言われてみればなるほど確かに＞まだ存在しない
とするとYoutubeの方のクリックイベントが発火するのはどうしてなんですかね？
同じように要素を追加しているように見えるのですけども。

[Lhankor_Mhy]

getJSONメソッドの有無です。
Youtubeの方は同期的に処理されてますが、vimeoは非同期的、いわゆるAjaxを利用しています。

[madoka9393]

なるほど！
質問者様ではありませんがとても勉強になりました！

[miyabi-sun]

因みに第一引数がキャストされるのはMDNのサイトに書いてありますよ
> 正規表現オブジェクト (RegExp) 。RegExp オブジェクトではないオブジェクト obj が渡された場合、new RegExp(obj) による RegExp オブジェクトへの暗黙的な変換が行われます。

[Lhankor_Mhy]

ですねですね。
後から見つけてへこみ済みです。

[madoka9393]

＞第一引数がキャストされるのはMDNのサイトに書いてありますよ
そうだったのですね。こちらも勉強になりました。

[miyabi-sun]

しかし勝手に`new RegExp`に投げ込まれるのは制御出来ないという意味では怖くて、
.や+みたいなメタ文字が意図せずに展開されるという事なので、実践ではちゃんとスラッシュにして扱うべきでしょうね。
回答文をちょこっと修正して、注意喚起のTipsとして流用すればいい感じになるんじゃないでしょうか？

[eaconian]

Lhankor_Mhyさま
thisはそういう意味でしたか。ありがとうございます。
他のみなさまもご意見ありがとうございました。