Question

我在js / jquery上还很陌生，所以这个周末我花了很多时间试图弄清楚如何将多个Vimeo视频（iframe）播放完后，将一个班级添加到特定的iframe中，我设法做到了可以将已经观看的视频保存在localStorage上，但是问题是我无法设法使localstorage在刷新页面时将已经观看的类添加到同一iframe中。

我也在控制台上收到此错误： 未捕获的ReferenceError：未定义ID。

这是从我尝试使用localStorage getItem的代码的底部开始的，但是未定义的“ id”来自Vimeo的url，因此我无法弄清楚如何使此工作有效

这是我的代码

<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>

Answer 1

在第二个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');
          }
     });
});

来自vimeo的旧API的localStorage在多个视频中

1 个答案: