网页上的深层链接视频网址

Question

我有一个视频页面，上面有本地托管的视频和 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'));
    });
});

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
}