Question

我创建了一个随机化HTML视频或图片的网站，只是为了练习我的javascript。

我正在努力使每次视频随机化时，URL位置将更改为代表新视频，这样用户就可以直接链接到随机化的视频。

目前它只显示一个静态网址，无论何时加载内容都不会更改。

这是必须的代码笔

 function chooseRandomVideoFromList() {
  var i = Math.floor(Math.random() * currentList.length);
  var video = currentList[i];
  var $video = $('video');



  // clear
  $video.html('');

  // <source src="" type="">

  video.sources.forEach(function (source) {
    var $source = $('<source>').attr('type', source.type).attr('src', source.src);
    $video.append($source);
  });

我将非常感谢任何帮助或建议，我已经阅读了文档，我仍然感到难过：S

谢谢你们！

Answer 1

您无法直接在window.location.href属性上书写，但您可以使用html5历史记录api和pushstate更改您的网站网址。

示例：

history.pushState({}, "Stackoverflow", "http://stackoverflow.com");

这适用于所有现代浏览器，请参阅：http://caniuse.com/#search=pushstate

有关此主题的更多信息，请访问：https://developer.mozilla.org/de/docs/Web/Guide/DOM/Manipulating_the_browser_history

虽然请记住，如果您希望用户能够使用他们的浏览器后退和前进按钮，您还需要收听popstate事件。您的服务器端代码也需要处理网址。

如果您需要支持旧浏览器或者不希望服务器端参与，您可以设置window.location.hash属性，而不是更改网址本身但允许您更改当前网址的哈希部分，例如：

window.location.hash = "uri=stackoverflow.com";

这样您就可以存储当前显示的视频的索引。加载页面时，您可能需要检查“window.location.hash”中是否有值，以及它是否是videoFiles的有效索引。如果是这样，你应该播放那个视频。

示例（在您的起始代码中插入）：

 if (window.location.hash !== "") {
    showSpecificVideoFromList(window.location.hash);
 }

这个在你的chooseRandomVideoFromList：

中

 window.location.hash=i;

然后实现showSpecificVideoFromList以显示给定的索引（并检查有效性）

如何将window.location与随机对象一起使用？

1 个答案: