网页上的深度链接视频url

Question

我有一个视频的页面，其中有本地托管的视频和3个缩略图，当点击，他们加载到一个主要的视频div -这是工作和伟大。我唯一的问题是，当你加载视频1，2或3，他们的网址在顶部保持不变。有没有办法让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'));
    });
});

Answer 1

它可能是这样的：

$(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'));
});

如果要进行基于正则表达式(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
}