How can I change video attr src from another html file

Question

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

File 1 and File 2 are in the same directory

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.

Why don't you try $(.video').attr('src', 'videos/desired_video.mp4') directly inside the function 'ChangeVideoSrc()'? — kmg, Dec 11 '17 at 10:11
@Zammy Both files are in the same directory, i dont know if that is what you mean — Keka Bron, Dec 11 '17 at 10:15
We need to know more about your structure, do you open the html file #1 from your html #2 ? Or are they both loaded at the same moment ? — Doomenik, Dec 11 '17 at 10:16
@kmg mmm because jquery selector is not gonna find .video class since .class doesnt exist in html file 2. Am i rigth? — Keka Bron, Dec 11 '17 at 10:16
_“Both files are in the same directory, i dont know if that is what you mean”_ - you can not use client-side JavaScript to change anything in “files”. Both of your HTML documents would need to be displayed at the same time in the browser (different windows/frames) for any direct “communication” between the two to be possible in the first place. Otherwise, if they are not displayed simultaneously, you need to find a way to _store_ information somewhere, so that one document can write it, and the other read it at a later time. — CBroe, Dec 11 '17 at 10:31
I think, send file2 value by ajax and get that by this form `https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript` will be okay — Jack jdeoel, Dec 11 '17 at 10:34

Pedram · Accepted Answer · 2017-12-11T10:27:47.657

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.

// 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

Working Example

How can I change video attr src from another html file

1 Answers1