Timer läuft beim wechsel weiter

  • JavaScript

Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von Mokki.

    Timer läuft beim wechsel weiter

    Guten Tag!

    Zusammenfassung:
    Ich arbeite derzeit an einem kleinen Projekt, was mit der Youtube Iframe API arbeitet.

    Ich hab bisher alles fertig, jedoch wenn das Lied zu ende ist, wird dann der Timer gestoppt ( clearInterval(timer) ), aber auf eine Mysteriöse Art und Weise läuft er einfach wieder.
    Ich hab schon gedebuggt, da steht in der Konsole auch, das der Timer gestoppt wurde. Aber dann läuft er weiter und zählt in der Datenbank +1 hoch.
    -----------------------------------
    Was wird genau getan?
    Video ID's werden von der Datenbank via. Ajax geholt und die Musik wird abgespielt. Falls das Video zu ende ist, wird das nächste Video abgespielt (sofern vorhanden).

    Was ist das Problem?
    Das Video wird zwar abgespielt, aber in der Datenbank wird jede Sekunde ein neuer Wert eingetragen. Somit, wenn die Besucher die Seite neuladen immer an der selben Stelle sind.
    1sek => currentLength + 1 <- (Query)

    Request kann und darf nur von VOM Server selbst gemacht werden bzw. das Update-Request, damit in der Datenbank ständig +1 passiert.
    Aber das Problem ist der Timer. Der Timer startet am Anfang der Website als erstes, wenn die Musik läuft (YT.PLayerState.PLAYING Event).

    Das heißt, wenn er die Musik via. Ajax-Request geholt hat und das JSON-decoded hat, wird der Timer gestartet und die Musik.
    Wenn die Musik endet, wird ein neuer Request gemacht, damit der nächste Titel ausgewählt wird. Das Problem ist dann wieder, das der Timer von der ersten Musik nicht anhaltet.
    Somit laufen dann 2x Timer und er updated jede Sekunde immer 2 Einträge.

    Aber wenn der nächste Titel dran ist, dann wird von der alten Musik die Spalte "currentLength" auf 0 gesetzt. Damit die Musik auch wieder von vorne spielt.

    ---------------------------
    Mein Code:

    HTML-Quellcode

    1. $(document).ready(function() {
    2. $('#loader').css('width', '100%');
    3. });
    5. var volume = $('#volume').slider();
    7. var tag = document.createElement('script');
    9. tag.src = 'https://www.youtube.com/iframe_api';
    11. var firstScriptTag = document.getElementsByTagName('script')[0];
    12. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    14. var player;
    15. function onYouTubeIframeAPIReady() {
    16. player = new YT.Player('player', {
    17. height: '0',
    18. width: '0',
    19. events: {
    20. 'onReady': onPlayerReady,
    21. 'onStateChange': onPlayerStateChange
    22. },
    23. playerVars: {
    24. controls: 0,
    25. iv_load_policy: 3,
    26. html5: 1,
    27. rel: 0,
    28. wmode: 'transparent',
    29. showinfo: 0
    30. }
    31. });
    32. }
    34. $('#volume').on('change', function() {
    35. player.setVolume(volume.slider('getValue'));
    36. });
    38. $(document).on('click', ".fa-pause", function () {
    39. $('#playerControl').each(function() {
    40. $('#playerControl').removeClass('fa-pause');
    41. $('#playerControl').addClass('fa-play');
    42. });
    44. stopVideo();
    45. });
    47. $(document).on('click', ".fa-play", function () {
    48. $('#playerControl').each(function() {
    49. $('#playerControl').removeClass('fa-play');
    50. $('#playerControl').addClass('fa-pause');
    51. });
    53. $.ajax({
    54. type: 'POST',
    55. url: '{{ \Illuminate\System\Config::get(["url"]) }}/player/current',
    56. success: function(x) {
    57. console.log(x);
    58. var obj = jQuery.parseJSON(x);
    59. playVideo(obj.id, obj.current);
    60. $('.videoTitle').empty();
    61. $('.videoTitle').append(obj.name);
    62. }
    63. });
    64. });
    66. function onPlayerReady(e) {
    67. player.setVolume(volume.slider('getValue'));
    68. }
    70. var done = false;
    71. var timer;
    73. function onPlayerStateChange(e) {
    74. if (e.data == YT.PlayerState.PLAYING && !done) {
    75. stopVideo();
    77. $('#playerControl').removeClass('fa-pause');
    78. $('#playerControl').addClass('fa-play');
    80. $('.videoTitle').append(e.target.getVideoData().title);
    81. done = true;
    82. }
    84. if(e.data == YT.PlayerState.PAUSED && !done) {
    85. playVideo();
    87. $('#playerControl').removeClass('fa-pause');
    88. $('#playerControl').addClass('fa-play');
    90. done = true;
    91. }
    93. if(e.data == YT.PlayerState.PLAYING) {
    94. createTimer(e.target.getVideoData().video_id); //Hier wird der Timer gestartet, falls die Musik spielt
    95. }
    97. if(e.data == YT.PlayerState.ENDED) {
    98. $.ajax({
    99. type: 'POST',
    100. url: '{{ \Illuminate\System\Config::get(["url"]) }}/player/next/'+e.target.getVideoData().video_id,
    101. success: function(x) {
    102. clearInterval(timer); //Hier wird der Timer vom ersten Title gestoppt!
    103. console.log('Stopped: ' + e.target.getVideoData().video_id);
    105. window.setTimeout(function() {
    106. var obj = jQuery.parseJSON(x);
    107. playVideo(obj.id, obj.current);
    109. $('.videoTitle').empty();
    110. $('.videoTitle').append(obj.name);
    111. }, 1500);
    112. }
    113. });
    114. }
    115. }
    117. function createTimer(videoID) {
    118. timer = window.setInterval(function() {
    119. $.ajax({
    120. type: 'POST',
    121. url: '{{ \Illuminate\System\Config::get(['url']) }}/player/update/' + videoID,
    122. success: function(x) {
    123. console.log(videoID);
    124. }
    125. })
    126. }, 1000);
    127. }
    129. function stopVideo() {
    130. player.stopVideo();
    131. }
    133. function playVideo(id, time) {
    134. player.loadVideoById(id, time);
    135. player.playVideo();
    136. }


    Ich habe ein Bild von der Konsole nochmal als Dateianhang hochgeladen.
    Danke für eure Aufmerksamkeit!

    Mit freundlichen Grüßen

    EDIT1 - Das mit den komischen Namen sind die ID's der Videos.
    ID = Timer gestartet*

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „meikel__“ ()

Facebook
Telefonspende