Javascript - get link time
I have a django template page with a youtube video player that looks like this:
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: window.innerHeight - 20,
width: window.innerWidth - 20,
videoId: '{{video}}',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setPlaybackQuality('hd1080');
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == 0) {
document.getElementById('choices').style.display = "block";
}
}
</script>
<div id="choices" class="choiceBox">
Which direction?<br>
<a href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/left/">Left</a><br>
<a href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/right/">Right</a>
</div>
Everything works and nothing complicated. I have a div that is hidden until the video stops playing. What I would like to do is get the unix time in milliseconds as soon as one of the two hidden links is clicked and store them in a variable. Finally, Id like to add this as a post parameter to both urls (concatenate? = Time at the end of the url)
Any idea how this can be achieved? The problem is that I can get the time as soon as the video stops, but usually won't add it to the url because the url was already recorded after loading the page the first time. Is it possible to change this url after the fact?
source to share
In your comments, you want to update the href properties of the two links at a given point by adding the current time as GET
var at the end of the url, and then when the user clicks left or right, you want to navigate to the url stored in the href properties of the clicked element where the python code on the receiving page will compare the time stored in GET
var to the current current time. This should work for you:
// I'm going to call modUrls when the window loads
// you could do this wherever appropriate in your code
window.onload = modUrls;
function modUrls(e){
// get the links
var left = document.getElementById('left');
var right = document.getElementById('right');
//get the time
var time = new Date().getTime();
// append the time page was loaded to the urls in each link
left.href= left.href+'?time='+ time;
right.href= right.href+'?time='+ time;
};
//everything below this line is just for testing you can leave it all out
var left = document.getElementById('left');
var right = document.getElementById('right');
left.addEventListener("click", directionClicked, true)
right.addEventListener("click", directionClicked, true);
function directionClicked(e){
e.preventDefault();
alert('navigating to: '+this.href)
window.location = this.href;
};
<div id="choices" class="choiceBox">
Which direction?<br>
<a id="left" href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/left/">Left</a><br>
<a id="right" href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/right/">Right</a>
</div>
source to share