Question

我有以下简单的代码启动mediaelement音频插件：

$('audio,video').mediaelementplayer({
    audioWidth: 300,
    audioHeight: 30
});

我需要跟踪playing事件;我没有运气就试过以下代码：

var player = document.getElementsById('player2');
player.playing = function(e) {
   alert('OMG! You played a song!');
}

Answer 1

试试这个：

# using jquery (on, bind, etc)...
$('#player1').bind('playing', function(e) { 
   console.log('bind - playing') 
});

# addEventListener 
var player = document.getElementById('player1'); 
player.addEventListener('playing', function(e) {
   console.log('addEventListener - playing') ;
});

Answer 2

好的，我已经弄清楚了......

$('audio,video').mediaelementplayer({
    audioWidth: 300,
    audioHeight: 30,

    success: function(mediaElement, domObject) {
        mediaElement.addEventListener('loadeddata', function() {
            console.log('addEventListener - loadeddata')            
        }, false);
    },
    error: function() {
        //alert('Error setting media!');
    }

});

Answer 3

有点晚了，但必须自己解决。我注意到MediaElement文档说成功函数的第一个参数是mediaElement对象。碰巧的是，播放器html包裹在一个元素中，无论它是哪种视频类型。您无法直接将其作为jQuery对象访问，但只需进行简单的调整即可解决所有问题。

以下内容用于获取最接近的玩家，无论您传入哪个元素

function getVideo(el) {
    var $el = $(el);

    if ($el.find('mediaelementwrapper').length) {
        return $el.find('mediaelementwrapper')[0];
    } else if ($el.parents('mediaelementwrapper').length) {
        return $el.parents('mediaelementwrapper')[0];
    }

    return $el.is('mediaelementwrapper') ? $el : false;
}

请注意，我们必须通过[0]返回文档节点而不是jQuery对象来访问它。

但是从那里我们可以像这样使用它。

$video = getVideo('#playerID');

$video.addEventListener('playing', function () {
    debugger;
}, false);

或者在没有帮助者的情况下完成

$video = jQuery('#playerID mediaelementwrapper')[0];

mediaelement'播放'事件跟踪

3 个答案: