javascript - 如何从另一个 html 文件更改视频 attr src

Question

我想在按下某个按钮时更改视频源。

文件1和文件2在同一个目录

Html file 1:

<div class="videoplayer">
<video class="video" src="videos/something.mp4" controls >

</video>

Html file 2:

<div class="button">
<input class="changeSrc" type="button" name="bttn" 
value="Change video src!" onclick="ChangeVideoSrc()">
</div>



Script file 2:

function ChangeVideoSrc() {
 ???
};

我的问题是:如何从文件 2 设置文件 1 的视频 src。我读到有关与 cookie 或本地存储共享变量的信息，但我不明白。我希望有一些神奇的 javascript 或 jquery 语法可以直接做到这一点。

Answer 1

您可以使用localstorage。 button点击时设置一个数据，在视频页面获取。您也可以使用 cookie，但 localstorage 使用起来更简单快捷。

// From first page:


$('.changeSrc').click(function() {
  window.localStorage.setItem('changeSrc', 'yes');
});

// From second page:

var $status = window.localStorage.getItem('changeSrc');
if($status == 'yes'){
$('.video').attr('src', 'videos/new_src.mp4')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- From first page: -->

<div class="button">
  <input class="changeSrc" type="button" name="bttn" value="Change video src!">
</div>

<!-- From second page: -->

<div class="videoplayer">
  <video class="video" src="videos/something.mp4" controls>
</video>

请注意这段代码在这里不起作用，在这段代码中，您必须在本地尝试! 更新: 我添加了 jsfiddle

Working Example