JWPlayer 触发 onPlay() 两次。如何让它只触发一次？

Question

我正在使用 jwplayer 播放视频，我正在尝试跟踪播放器播放的秒数。在示例中，当您单击 On/Off 按钮时，它确实会正确前进，但是当您单击视频播放器上的播放时，我能想到的最好情况是 onPlay 触发了两次。（如果您在函数中添加 console.log 或警报，它将显示两次）

知道为什么会这样吗？我迷路了！

这是 fiddle： 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

尝试使用布尔变量来控制计数过程，并让您的轮询函数检查该变量。通过这种方式，您可以 set/unset 来自多个来源的变量，而不必担心运行多次运行。

见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

我试过你的 fiddle 但运行不适合我。虽然计数器确实前进了，但它并没有随着玩家停止播放而停止。我重写了它，它按照我假设的方式执行。我还在学习，所以请原谅我笨拙的代码。看这里：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 that won't be fixed until the next version (v. 6.13). I attempted to use the suggested fix，但它仍然在加载时触发两次（不可取）并且连续播放仅触发一次（可取）。尽管未能抑制第二个剧本的开火，但它还是有效的。希望我提供的代码能帮到你，祝你好运。

*包括评论和相关 link。

JWPlayer 触发 onPlay() 两次。如何让它只触发一次？

JWPlayer fires onPlay() twice. How to get it to only fire once?

jwplayer