mediaelement 'playing' event tracking

mediaelement wpf
mediaelement js playlist
mediaelement js youtube
mediaelement.js codepen
mediaelement xamarin forms
media element html
mediaelement js audio example
mediaelement.js custom controls

I have the following simple code that initiates the mediaelement audio plugin:

    audioWidth: 300,
    audioHeight: 30

I need to track the playing event; I've tried the following code without any luck:

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

Try this:

# 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') ;

MP3 as well as HLS, Dash, YouTube, Facebook, SoundCloud and others with a common HTML5 MediaElement API, enabling a consistent UI in all browsers. Use a MediaElement control to play audio and video files in your app. Built– in media transport controls let users interact with their media by providing a default playback experience comprised of various buttons including play, pause, closed captions, and others. See MediaTransportControls for more info. For info about the media formats that

Ok so I've figured it out...

    audioWidth: 300,
    audioHeight: 30,

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


Audio Video Unification Framework. MediaElement.js has 3 repositories available. Follow their code on GitHub. MediaElement.js is a blazingly fast and amazingly powerful HTML5 audio and video library that creates a unified feel for media files (MP4, MP3, FLV), streaming content (HLS, M(PEG)-DASH, RTMP), and embeddable players like YouTube, Vimeo, Twitch, DailyMotion, Facebook, and SoundCloud.

A little late but had to solve this one myself. I noted that the MediaElement docs say that the success function first argument is a mediaElement object. It just so happens that the player html is wrapped inside a element, no matter what type of video it is. You can't access it directly as a jQuery object but a simple tweak fixes it all.

The following is used to fetch the closest player no matter which element you pass in

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 $'mediaelementwrapper') ? $el : false;

Notice we have to access it via [0] returning the document node rather than jQuery object.

But from there we can use it like this.

$video = getVideo('#playerID');

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

Or do it without the helper

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

Use a MediaElement control to play audio and video files in your app. Built– in media transport controls let users interact with their media by providing a default​  Xamarin.Forms MediaElement. 02/18/2020; 16 minutes to read; In this article. Download the sample. MediaElement is a view for playing video and audio. Media that's supported by the underlying platform can be played from the following sources:

In your project file, you must instead set the media type to Content and set CopyToOutputDirectory to PreserveNewest or Always . MediaElement can be used in  mediaelement-files Sample media files (MP4, WebM, Ogv, MP3, etc.) for the MediaElement.js library

Need private packages and team management tools?Check out npm Teams ». mediaelement. 4.2.16 • Public • Published 2 months ago. MediaPlayerElement is a lightweight XAML control that serves as a rendering surface for the robust MediaPlayer class, which is part of the Windows.Media.Playback namespace. The majority of the media functionality is located on the underlying MediaPlayer class, which you can access through the MediaPlayerElement.MediaPlayer property. To change

mediaelement - HTML5 audio and video players in pure HTML and CSS. MediaElementPlayer.js uses the same HTML/CSS for all players. - - The  MediaPlayerElement is automatically integrated with the system media transport controls. The system media transport controls are the controls that pop up when hardware media keys are pressed, such as the media buttons on keyboards. For more info, see SystemMediaTransportControls. Note MediaElement does not automatically integrate with the

  • Are you using a library? ie: This is what i assumed you were using. Also, be sure to replace '#player1' with the id of your player element.
  • Yes I am using I've changed the id's to the appropiate names too
  • Hmm... strange. If you visit -> open developer's console and pase any of the provided logic, it works. Are you able to console log your player to ensure you're getting a correct reference to it?
  • Should be the same deal. $('audio').bind('playing', function(e) { console.log('audio'); }) works on their page for the audio element. Maybe if you provide more sample code, it can be sorted out.
  • Looks like your player is not downloading the file base on what I am seeing. I would verify the file is able to load up in the player. hitting play does nothing, which is likely why you're not getting an event.
  • Works with jQuery as well: $(mediaElement).on('loadeddata', function() { ... });