Hjælp til scroll function
Hej,Jeg har en scroll function, som scroller ned tidsmæssigt ud fra varigheden på en youtube fil.
Den er sat til at starte ved click, men kan man ikke ændre det så den hele tiden tjekker hvor man er i youtube filen. så hvis jeg starter youtube på 1 minut, og den er 3 min i alt, så scrolles der ned til 33% automatisk?
Herunder er koden som virker pt, dog kun med udregning af scroll fra start.
Ligeledes så virker pause, heller ik. når jeg trykker på pause så starter den forfra..?
Håber der er en venlig sjæl som vil hjælpe mig. Også gerne på mail eller telefon.
Vh
Jannik
<script type='text/javascript'>
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('youtubePlayer', {
height:'72px',
width:'72px',
videoId:'".$song->data['youtube']."',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event){
$('#scrollPause').click(function () {
player.pauseVideo();
$('#scrollPause').hide();
$('#scrollPlay').show();
$('#songScroll').stop();
});
$('#scrollPlay').click(function () {
player.playVideo();
$('#scrollPlay').hide();
$('#scrollPause').show();
var currentScroll = $('#songScroll').scrollTop()
var height = $('#songScroll').prop('scrollHeight') - $('#songScroll').outerHeight()
var remainingPx = 100-(currentScroll*100/height)
var remainingTime = player.getDuration() * 1000 * remainingPx / 100
$('body').bind('scroll mousedown DOMMouseScroll mousewheel keyup touchmove', function(){
player.stopVideo();
$('#scrollPause').hide();
$('#scrollPlay').show();
$('#songScroll').stop();
});
$('#songScroll').animate({scrollTop:height}, (remainingTime), 'swing', function() {
$('body').unbind('scroll mousedown DOMMouseScroll mousewheel keyup touchmove');
});
});
}
</script>