Question

我正在使用jwplayer播放视频而我正在尝试跟踪播放器播放的秒数。在该示例中，当您单击“开/关”按钮时，它会正确前进，但是当您单击视频播放器上的“播放”时，我可以想到的最好是onPlay触发两次。（如果你向该函数添加了console.log或alert，它将显示两次）

为什么会发生这种情况？我现在迷路了！

这是小提琴： http://jsfiddle.net/zqgvwpa6/2/

HTML：

<div id='videoman' class="videoman"></div>
<p id="counter">0</p>
counter is: <button id="clicker">Off</button>

JS：

$(function(){

    jwplayer('videoman').setup({
        file: 'https://content.jwplatform.com/videos/XjiIpRcb-1080.mp4',
        image: 'https://www.jwplayer.com/wp-content/themes/jwplayer-20/assets/images/home-video_header.jpg',
        title: 'Jawns',
        width: '30%',
        aspectratio: '16:9',
    });

    jwplayer('videoman').onPlay(function(){ startCounting(); });
    jwplayer('videoman').onPause(function(){ stopCounting(); });
    jwplayer('videoman').onComplete(function(){ stopCounting(); });

    $('#clicker').click(function(){ 
        if ($(this).text() == 'Off') {
            startCounting(); $(this).text('On');
        } else {
            stopCounting(); $(this).text('Off');
        }
    });

    var videocount = 0;
    var counter;
    var startCounting = function(){
        window.counter = setInterval(saveTime, 1000); //save every 2 seconds
    }

    var stopCounting = function(){
        clearInterval(window.counter);
    }

    function saveTime() {
        videocount += 1;
        $('#counter').text(videocount);
    }
});

提前感谢您的帮助！

Answer 1

尝试使用布尔变量来控制计数过程，并让轮询函数检查变量。这样，您可以从多个源设置/取消设置该变量，而无需担心多次运行函数。

请参阅http://jsfiddle.net/y6s4jymc/1/

具体来说，

var startCounting = function(){
    countEnabled  = true;
}

var stopCounting = function(){
    countEnabled  = false;        
}

var runCounter = function () {
    if (countEnabled) {
        saveTime();
    }
}

var counter = window.setInterval(runCounter, 2000); //save every 2 seconds

Answer 2

我尝试了你的小提琴，它对我来说运行不正常。虽然计数器确实前进了，但是当玩家停止游戏时它并没有停止。我重新编写了它，并按照你的预期方式执行。我还在学习，请原谅我笨重的代码。看看这里：https://jsfiddle.net/zer00ne/syzcd1q7/ *

$(document).ready(function () {

    jwplayer('videoman').setup({
        file: 'https://content.jwplatform.com/videos/XjiIpRcb-1080.mp4',
        image: 'https://www.jwplayer.com/wp-content/themes/jwplayer-20/assets/images/home-video_header.jpg',
        title: 'Jawns',
        width: '50%',
        aspectratio: '16:9'
    });
    var //runOnce = false, // false if no play has fired, true if 1st play fired
        videocount = 0,
        counter,
        $click = $('#clicker'),
        $reset = $('#reset'),
        status = jwplayer('videoman').getState;

        jwplayer('videoman').onReady(function() {
            jwplayer('videoman').pause();
        });

    jwplayer('videoman').onPlay(function() { // Whenever playing, the next 2 lines will determine if it's the first play or the second play
            console.log('[[PLAY FIRED]]');
       //if (runOnce === false) {
            //runOnce = true;
            $click.text('ON');
            window.counter = setInterval(saveTime, 1000);
        //}
    });

    jwplayer('videoman').onPause(function () {
        $click.text('OFF');
        clearInterval(window.counter);
        runOnce = false;
        console.log('[[PAUSED FIRED]]');
    });

    jwplayer('videoman').onIdle(function () {
        $click.text('OFF');
        clearInterval(window.counter);
        runOnce = false;
        console.log('[[IDLING]]');
    });

    $click.on('click', function () {
        if (status != 'PLAYING') {
            jwplayer('videoman').play();
        } else {
            jwplayer('videoman').pause();
        }
        return false;
    });

    $reset.on('click', function () {
        jwplayer('videoman').stop();
        clearInterval(window.counter);
        runOnce = false;
        videocount = 0;
        $('#counter').text(videocount);
    });

    function saveTime() {
        videocount += 1;
        $('#counter').text(videocount);
    }
});

您遇到的行为是known bug，在下一个版本（v.6.13）之前不会修复。我试图使用suggested fix，但是在加载时仍然会发射两次（不可取），并且连续发射只发射一次（可取）。虽然没有压制第二场比赛，但是它有效。希望我提供的代码可以提供帮助，祝你好运。

*包含的评论和相关链接。

JWPlayer两次触发onPlay（）。怎么让它只开一次？

2 个答案: