1

ローカルでホストされているビデオと 3 つのサムネイルを含むビデオのページがあり、クリックするとメインのビデオ div に読み込まれます。これは機能し、素晴らしいです。私が持っている唯一の問題は、ビデオ1、2、または3をロードすると、上部のURLが同じままになることです。URL がウェブサイトの url/#video-1 などに変更されるようにディープリンクする方法はありますか? 調査があり、現在構築しているものから、それを統合する方法がわかりません。リンク/チュートリアルは素晴らしいでしょう

これが私がこれまでに持っているものです：

JS:

    //video gallery
     $(".thumbnail-1,.thumbnail-2,.thumbnail-3").on("click", function(event) {
      event.preventDefault();
      $(".main_stage iframe").prop("src", $(event.currentTarget).attr("href"));
      loadURL($(this).attr('href'));
    });
});
4

1 に答える 1

0

それは次のようなものかもしれません：

$(window).load(function() {
    // get hash string eg. #video1
    var hash = window.location.hash;

    if (hash == '#video-1') { // do some checks, you can apply regex or switch
        // I'm not sure what your html looks like
        $(".main_stage iframe").prop("src", $('selector').attr("href"));
        loadURL($(this).attr('href'));
    }
});

$(".thumbnail-1,.thumbnail-2,.thumbnail-3").on("click", function(event) {
    var className = $(this).attr("class"); // get class name of clicked element
    var videoId = className.split("-").pop(); // split string to get video id => "1, 2, 3 etc."

    window.location.hash = '#video' + videoId; // change url to eg. #video1
    event.preventDefault();
    $(".main_stage iframe").prop("src", $(event.currentTarget).attr("href"));
    loadURL($(this).attr('href'));
});

Regex ( fiddle here )に基づいて検証を行う場合は、次のコードを使用できます。

var hash = window.location.hash;
var regex = new RegExp('^#video-[0-9]{1,10}$');

if (regex.test(hash)) {
   // if hash is something like "#video-[NUMBERS]" then do something
}
于 2013-05-17T15:16:02.927 に答える