Question

我正在使用带有vimeo的javascript api，我发现如果我在视频中寻找某个特定位置，然后拨打“播放”＃39;视频播放，但我必须参加的一个事件播放＆＃39;不开火。如果视频播放到最后（或接近结尾），以便整个视频缓存在我的电脑上，那么一切都开始工作。由于未知原因，vimeo没有回答这个问题。所以我要问一个更普遍的问题 - 对于任何视频 - youtube，vimeo，videotag等，还有其他程序员遇到这个问题吗？（代码如下，请注意，您需要点击“下一步”按钮）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href='/Styles/common.css' rel="stylesheet" type="text/css" />


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script type="text/javascript" src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>


    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />

    <script type="text/javascript">
        var globalcount = 0;
        var windowwidth = 0;

        var initialseek = true;
        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
        var timeoutID;
        var stoparray = new Array("48", "103.979", "346.513", "407.459");
        var quiz = false;

        var startPosition = 0;
        var stoplength = stoparray.length;
        var stopindex = -1;
        var timeinterval = 10;
        var defaultwidth = 3;
        var gDuration;
        var gPlayer;
        var gvideowidth;
        var gvideoheight;
        var hiderank;
        var gPlayer;
        var vimeoPlayers;

    </script>

</head>
<body>


    <center>

        <table>
            <tr>
                <td style="width:33%;text-align:right;padding-right:14px"></td>
                <td style="width:33%">
                    <div id="HoldPlayer" style="position:relative">
                        <iframe src='https://player.vimeo.com/video/152639172?autoplay=0&api=1&player_id=player1'
                                id='player1'
                                width='640' height='360'
                                frameborder='0'></iframe>
                    </div>
                </td>
                <td style="width:33%"></td>
            </tr>
        </table>

        <table style="width:100%">
            <tr>
                <td style="text-align:center">
                    Window (total time in seconds): <input type="text" id="windowwidth" maxlength="3" style="width: 30px;" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label><input type="checkbox" checked="checked" id="chkplayvid" />Play</label>
                </td>
            </tr>


        </table>

    </center>


    <center>
        <table>
            <tr>
                <td style="text-align:center">
                    <input type="button" id="nextbutton" onclick="nextPlayer(); return (false);" value="Next" />
                </td>
            </tr>
            <tr>
                <td align="center"></td>
            </tr>


        </table>

    </center>

    <div id="oPara"></div>


    <script type="text/javascript">


        // +++++++++++++
        function ready2() {

            setupEventListeners();
            gPlayer.api('getDuration', function (value, player_id) {
                gDuration = value; // this will be set whenever callback fires
                playVideo();
            });

        }
        // +++++++++++++
        function setupEventListeners() {
            gPlayer.addEvent('pause', pauseEvent);
            gPlayer.addEvent('finish', endEvent);
            gPlayer.addEvent('play', playEvent);
        }


        function endEvent() {
            alert("end event!!!");
            gidClearTimeout(timeoutID);
        }
        function pauseEvent() {
            alert("pauseEvent!!!");
            return;
        }
        function playEvent() {
            alert("playEvent!!!");
            globalcount = globalcount + 1;

            if (initialseek) {
                timeoutID = setTimeout(pausePlayer, 60);
                initialseek = false;
            }
            else {
                timeoutID = setTimeout(pausePlayer, windowwidth);
            }
            return;
        }


        $(document).ready(function () {
            $("#windowwidth").val(defaultwidth);
            setTimeout(addReadyEvent, 60);
        });
        // +++++++++++++
        function addReadyEvent() {

            var iframe = $('#player1')[0];
            gPlayer = $f(iframe);
            gPlayer.addEvent('ready', ready2);
        }

        // +++++++++++++
        function showNextButton() {
            $("#nextbutton").removeAttr('disabled');
        }
        // +++++++++++++
        function playVideo() {

            gPlayer.api('play');
            return;
        }
        // +++++++++++++
        function pausePlayer() {

            gPlayer.api('pause');
            $("#nextbutton").removeAttr('disabled');
            return true;
        }

        // +++++++++++++
        function nextPlayer() {
            var startPosition = 0;
            var str = "";
            var prevpos = -5;
            var stopPosition = 0;

            var dur = gDuration;
            windowwidth = 3;
            windowwidth = parseFloat(windowwidth);
            if (isNaN(windowwidth)) {
                windowwidth = defaultwidth;
            }
            if (windowwidth < 1) {
                windowwidth = 1;
            }
            if (windowwidth > 3600) {
                windowwidth = 3600;
            }
            windowwidth = Math.round(windowwidth);
            stopindex = stopindex + 1;


            stopPosition = parseFloat(stoparray[stopindex]);

            if (stopPosition > dur) {
                stopPosition = dur;
            }
            /* was here */

            startPosition = parseInt(stopPosition - windowwidth, 10);


            gPlayer.api('seekTo', startPosition);
            gPlayer.api('pause');
            setTimeout(playVideo, 60);

            return false;
        }
    </script>

</body>
</html>

Answer 1

Vimeo回应：一个解决方法是首先播放视频，然后立即进行搜索，playEvent将会触发。实际上对我来说，寻求呼叫似乎必须是任何一系列呼叫的结束。

在视频缓冲之前，事件不起作用

1 个答案: