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

I want to change the video src when a certain button is pressed.

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

File 1 and File 2 are in the same directory

文件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() {
 ???
};

My question is: How can I set from file 2, the video src of file 1. I read about sharing the variables with a cookie, or local storage but I didn't understand it. I hope there is some magic javascript or jquery syntax to do it directly.

我的问题是：如何从文件2，文件1的视频src设置。我读到了用cookie或本地存储共享变量，但我不明白。我希望有一些神奇的javascript或jquery语法直接执行它。

1 个解决方案

#1

You can use localstorage. set a data when button clicked, get it on video page. Also you can use cookie but localstorage is simpler and faster to use.

您可以使用localstorage。单击按钮时设置数据，在视频页面上获取。您也可以使用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>

Note that this code not working here, in this snippet, you have to try in your local! Update: I added jsfiddle

请注意，此代码不起作用，在此代码段中，您必须在本地尝试！更新：我添加了jsfiddle

Working Example

工作实例

#1