Question

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

文件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

您可以使用COPY TO file。点击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>  <div class="button"> <input class="changeSrc" type="button" name="bttn" value="Change video src!"> </div>  <div class="videoplayer"> <video class="video" src="videos/something.mp4" controls> </video>

<强> Working Example

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

1 个答案: