时间戳

首页 > 解决方案 > 多个视频中来自 vimeo 旧 API 的 localStorage

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

问题描述

我是 js/jquery 的新手，所以我花了这个周末试图弄清楚如何制作多个 Vimeo 视频（iframe），当它们播放完后，将一个类添加到特定的 iframe 中，我设法让它工作并保持这已经在 localStorage 上观看了视频，但问题是我无法在页面刷新时让 localstorage 添加到已观看的类的同一 iframe 中。

我也在控制台上收到此错误： 未捕获的 ReferenceError: id is not defined。

这是来自我尝试使用 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>

标签： javascriptjqueryapivimeo

解决方案

该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');
          }
     });
});

推荐阅读