localStorage из старого API vimeo в нескольких видео - PullRequest
Новая
       4

localStorage из старого API vimeo в нескольких видео

0 голосов
/ 25 июня 2018

Я довольно новичок в js / jquery, поэтому я провел эти выходные, пытаясь выяснить, как сделать несколько видео Vimeo (iframe), чтобы, когда они заканчивались, класс добавлялся в конкретный iframe, мне удалось сделать этоработайте и сохраняйте это уже просмотренные видео на localStorage, но проблема в том, что мне не удается заставить localalstorage добавить к тому же iframe уже просмотренный класс при обновлении страницы.

Я тожеполучение этой ошибки на консоли: Uncaught ReferenceError: идентификатор не определен.

Это фрагмент кода, где я пытаюсь использовать localStorage getItem, но «id»это не определено из URL Vimeo, поэтому я не мог понять, как заставить это работать

Вот мой код 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style>

    .change.playing {
        background: blue;
    }

    .change.completado {
        background: grey;
    }

 </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        var iframe = $('.change');
        iframe.each(function () {
            var player = $f($(this)[0]);

            player.addEvent('ready', function () {

                player.addEvent('pause', onPause);
                player.addEvent('finish', onFinish);
                player.addEvent('playProgress', onPlayProgress);
            });

        });


        var status = $('.status');


        function onPause(id) {

            $('#' + id).removeClass('playing');

        }

        function onFinish(data, id) {
            $('#' + id).removeClass('playing');
            $('#' + id).addClass('completado');
            window.localStorage.setItem('test' + $('#' + id).data("banana"), 
$('#' + id).hasClass('completado'));
        }

        function onPlayProgress(data, id) {
            $('#' + id).addClass('playing');
        }
    });
    $(document).ready(function () {
    var test = 'test' + $('#' + id).data("banana");
    if (localStorage.getItem(test) && localStorage.getItem(test) == "true") {
        $('#' + id).addClass('completado');
    }
     });
</script>
</head>
<body>

<iframe data-banana="24" id="player1" class="change" 
src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" 
width="400" 
height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen 
allowFullScreen></iframe>

<iframe data-banana="69" id="player2" class="change" 
src="http://player.vimeo.com/video/27855375?api=1&player_id=player2" 
width="400" 
height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen 
allowFullScreen></iframe>

<iframe data-banana="100" id="player3" class="change" 
src="http://player.vimeo.com/video/175218778?api=1&player_id=player3" 
width="400" height="225" frameborder="0" webkitAllowFullScreen 
mozallowfullscreen allowFullScreen></iframe>
</body>
</html>

1 Ответ

0 голосов
/ 25 июня 2018

Переменная id не определена во втором блоке $(document).ready(...). 

$(document).ready(function () {
     var iframe = $('.change');
     iframe.each(function () {
          var id = $(this).id;
          var test = 'test' + $('#' + id).data("banana");
          if (localStorage.getItem(test) && localStorage.getItem(test) == "true") {
             $('#' + id).addClass('completado');
          }
     });
});
...