媒体元素“播放”事件跟踪答案

【问题标题】：mediaelement 'playing' event tracking媒体元素“播放”事件跟踪
【发布时间】：2012-10-06 23:36:53
【问题描述】：

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

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

我需要跟踪playing 事件；我已经尝试了以下代码，但没有任何运气：

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

【问题讨论】：

标签： javascript dom-events mediaelement.js

【解决方案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') ;
});

【讨论】：

你在使用图书馆吗？即：mediaelementjs.com?这是我假设你正在使用的。此外，请务必将“#player1”替换为您的播放器元素的 ID。
是的，我正在使用 mediaelemtjs.com。我也将 id 更改为适当的名称
嗯...奇怪。如果您访问 mediaelementjs.com -> 打开开发者控制台并粘贴任何提供的逻辑，它就可以工作。您是否能够通过控制台记录您的播放器以确保您得到正确的引用？
应该是同一个交易。 $('audio').bind('playing', function(e) { console.log('audio'); }) 在他们的页面上为音频元素工作。也许如果你提供更多的示例代码，它可以被整理出来。
看起来您的播放器没有根据我看到的内容下载文件。我会验证文件是否能够加载到播放器中。打游戏没有任何作用，这可能是您没有收到事件的原因。

【解决方案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!');
    }

});

【讨论】：

也适用于 jQuery：$(mediaElement).on('loadeddata', function() { ... });

【解决方案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];

【讨论】：