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

Events don't work until video has buffered

本文关键字：事件不起作用视频缓冲更新时间：2023-09-26

我正在将javascript api与vimeo一起使用，我发现如果我寻求视频中的特定位置，然后调用视频播放的"播放"，但是我绑定到"播放"的事件不会触发。如果视频播放到最后（或接近结束），以便整个视频已缓存在我的PC上，则此时一切开始工作。由于未知原因，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>

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