CODEWITHSUNDEEP
javascriptjqueryhtml
Keka Bron
Keka Bron

Reputation: 439

How can I change video attr src from another html file

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.

Upvotes: 2

Views: 184

Answers (1)

Pedram
Pedram

Reputation: 16575

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

Upvotes: 1

Related Questions