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

Question

我有一个视频的页面上有本地托管的视频和3个缩略图，点击后，它们加载到一个主视频div - 这是有效的，很好。我唯一的问题是当你加载视频1，2或3，他们在顶部的网址保持不变。有没有深度链接的方式，所以URL更改为网站网址/＃视频-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 
}