HTML5

Overview

MediaElementJS

One file. Any browser. Same UI.

GitHub Version Build Status Coverage Status MIT License CDNJS jsDelivr Hits

Table of Contents

Introduction

MediaElementPlayer: HTML5 <video> and <audio> player

A complete HTML/CSS audio/video player built on top MediaElement.js. Many great HTML5 players have a completely separate Flash UI in fallback mode, but MediaElementPlayer.js uses the same HTML/CSS for all players.

MediaElement.js is a set of custom Flash plugins that mimic the HTML5 MediaElement API for browsers that don't support HTML5 or don't support the media codecs you're using. Instead of using Flash as a fallback, Flash is used to make the browser seem HTML5 compliant and enable codecs like H.264 (via Flash) on all browsers.

In general, MediaElement.js supports IE11+, MS Edge, Chrome, Firefox, Safari, iOS 8+ and Android 4.0+.

It is strongly recommended to read the entire documentation and check the demo folder to get the most out of this package. Visit here to start.

* IMPORTANT NOTE for Safari users (Jun 8, 2017)

Since Sierra version, autoplay policies have changed. You may experience an error if you try to execute play programmatically or via autoplay attribute with MediaElement, unless muted attribute is specified.

For more information, read https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

* IMPORTANT CHANGES on 4.2.0 version

As part of the continuous improvements the player, we have decided to drop completely support for IE9 and IE10, since market share of those browsers together is 0.4%, according to http://caniuse.com/usage-table.

This change is for MediaElement and MediaElement Plugins repositories.

* IMPORTANT: Migrating from 2.x to 4.x version

NOTE: 3.x version has jQuery in the code base, and 4.x is framework-agnostic. So for either 3.x or 4.x versions, the following steps are valid, but it is highly recommended to upgrade to 4.x.

In order to successfully install 4.x in an existing setup, you must consider the following guidelines:

  1. If your installation relies on the legacy player classes (i.e., mejs-player, mejs-container, etc.), you must set up the proper namespace. In 2.x, the default namespace is mejs- but now is mejs__. In order to set up a new namespace (or the legacy one), use the classPrefix configuration, and make sure you use the mediaelementplayer-legacy stylesheet provided in the /build/ folder.

  2. By default, MediaElement has bundled native renderers, such as HLS, M(PEG)-DASH and FLV, as well as YouTube and Flash shims. If you want to use any other renderer, you MUST refer to the build/renderers folder and add as many as you want. Check demo/index.html for a better reference.

  3. You must set up now the path for the Flash shims if they are not in the same folder as the JS files. To do this, set the path via the pluginPath configuration. In the same topic, if you need to support browsers with JavaScript disabled, you must reference the correct Flash shim, since in 2.x there was only a single Flash shim and in 3.x it was split to target specific media types. Check the Browsers with JavaScript disabled section for more details.

  4. If you want to use Flash shims from a CDN, do the change related to pluginPath setting the CDN's URL, and also setting shimScriptAccess configuration as always.

  5. If you need to force the Flash shim, the way to do it in 3.x version is to use the renderers configuration and list them in an array.

  6. pluginType was removed to favor rendererName. If you rely on that element, just create conditionals based on the renderer ID (all listed here). For example:

$('video, audio').mediaelementplayer({
	// Configuration
	success: function(media) {
		var isNative = /html5|native/i.test(media.rendererName);

		var isYoutube = ~media.rendererName.indexOf('youtube');

		// etc.
	}
});

Installation and Usage

The full documentation on how to install MediaElement.js is available at Installation.

A brief guide on how to create and use instances of MediaElement available at Usage.

Additional features can be found at https://github.com/mediaelement/mediaelement-plugins.

API and Configuration

MediaElement.js has many options that you can take advantage from. Visit API and Configuration for more details.

Also, a Utilities/Features guide is available for development. Visit Utilities/Features for more details.

Guidelines for Contributors

If you want to contribute to improve this package, please read Guidelines.

NOTE: If you would like to contribute with translations, make sure that you also check https://github.com/mediaelement/mediaelement-plugins, and perform the translations for the files suffixed as -i18n.

Useful resources

A compilation of useful articles can be found here.

Change Log

Changes available at Change Log.

TODO list

IMPORTANT: Before posting an issue, it is strongly encouraged to read the whole documentation since it covers the majority of scenarios exposed in prior issues.

New features and pending bugs can be found at TODO list.

Comments
  • Hls fragments don't stop loading after destroying player

    Hls fragments don't stop loading after destroying player

    After an hls stream starts I can't get it to stop streaming. I'm using React 15.5.4, medialement 4.1.2 and hls.js 0.7.9, Chrome, latest version.

    On player's componentWillUnmount() I do the following: (where 'player' is the MediaElementPlayer)

    this.state.player.pause(); this.state.player.media.hlsPlayer.stopLoad(); this.state.player.media.hlsPlayer.destroy(); this.state.player.remove();

    I even remove the node from the HTML. I checked step by step and everything's being executed properly, no errors.

    As I navigate back in the browser I still see chunks being loaded. In the screenshot below, I accessed a different contents and navigated back twice more.

    As a result you can see both .m3u8 lists as well as .ts chunks are being loaded for 3 different contents: canal9vivo, americatv and tvp.

    hls-chunks

    I tested it with medialelement 4.1.3 but controls are not working for me on chrome. Content starts, but I can't see the controls or pause it. I get no errors. It's working fine on android though.

    Am I missing something?

    Thanks in advance.

    Needs verification 
    opened by sergioavazquez 124
  • Does not work on IE8 at all, flash fallback fails

    Does not work on IE8 at all, flash fallback fails

    Hi Sorry, I know IE8 is very old and no one should be using it any more, but unfortunately we do work for educational institutes and they are very backwards in support, so IE8 is the minimum that we must support still.

    I've tried on two different Windows XP machines using IE8 and both give me the same error, the flash element is not rendered and just displays a black box. At the moment we do not need video, and are looking at mp3 as the audio format to use, but it doesn't seem that any formats work with IE8. It's not working with my very basic usage (mp3 does not generate a flash fallback, no js errors), but more worryingly, the mediaelementjs.com site doesn't even work, the support table needs to be updated I think. I am not using a flash blocker or anything like that. I'm seriously wondering how anyone has gotten this to work in IE8 at all, is there a certain (older) version that we have to use? screen shot 2013-11-29 at 11 17 28 am

    It does work with 2.12.

    opened by dtra 55
  • Key commands don't work if mouse is used first to play video in fullscreen mode

    Key commands don't work if mouse is used first to play video in fullscreen mode

    If, before playing a video, users click the icon to watch in full screen and then use the mouse to start playback by clicking on the video or the triangle "play" button overlaid on the video (NOT the play button on the timeline), keyboard input will not work.

    Once video is playing after mouse click, tapping the space bar to pause playing, or using LEFT or RIGHT arrow keys to seek, does not work.

    Workarounds:

    • If you click the Play button on the timeline, instead of the center play button, works as expected.
    • If you click the spacebar instead of the Play button to start the video, works as expected.
    Completed Needs verification 
    opened by Bob-Kink 53
  • Error after update to 4.2.x series

    Error after update to 4.2.x series

    Hi guys, after to update to version 4.2.x im getting the following error:

    screen shot 2017-07-04 at 7 32 49 pm

    Anyone else with this issue, at the moment we still working with 4.1.3 version, thanks !!!

    Needs verification 
    opened by outaTiME 39
  • safari keyboard only nav broken in mediaelement

    safari keyboard only nav broken in mediaelement

    Within Safari v 10.0 (the latest Safari for my OS at the time), when using the keyboard to navigate a page with mediaelement, focus gets lost, and sent back to the <body> making it impossible to navigate the page for keyboard only users.

    Steps to reproduce:

    • navigate to mediaelementjs.com
    • use <tab> to move focus around the page
      • you may need to option+tab depending on your safari / os x settings
    • note that you will eventually tab to the mejs-container, and then the video element
    • the next tab press will send focus to the <body>
    • the same behavior happens when reverse tabbing through the control bar, to play, to the video object, and then to body

    Expected behavior:

    • keyboard only users should be able to tab through the mediaelement experience without loosing focus.

    I'd love to put together a fix for this and have been chasing it down for a bit, but haven't come up with anything useful yet. Any guidance on where I might poke around to find the issue?

    safari_version

    Completed Needs verification 
    opened by knomedia 38
  • is it possible to disable hls.js support?

    is it possible to disable hls.js support?

    Hi Ron,

    happy new year. :)

    I still have the problem with mixed content on Android devices. If I have a hls streamed video and then a native mp4 file I have to click play again, because the mp4 video tag hasn't got a click event.

    HLS seems to be supported natively on Android and IOS devices, so it is not needed to use the hls.js on this devices (my theory). So, is it possible, if I detect my site is running on an android devices, that I disable the hls.js support and use the plain player?

    thanks in advance Frank

    Completed 
    opened by FrankDaze 35
  • Migration from v2 to v3.

    Migration from v2 to v3.

    Hi,

    Congratulations on releasing version 3 of the player! It looks very slick, and the ability to play HLS inline on browsers like Firefox is AMAZING!

    Before I get started on the issue I'm having, I was wondering if there's a way to donate money to this project? MEJS has helped out a whole lot, so I'd like a way to be able to show thanks.

    Okay...

    I'm currently trying to migrate over to version 3 from version 2 of the player. It looks like the interface has changed in several key areas. I was hoping for some kind of migration documentation here, but couldn't find it. So I figure I'd ask questions here and hopefully that can go towards some kind of migration doc for other people.

    For the purpose of understanding the code examples I have here, I primarily do this:

    passobj = {}; // code goes here. $('#mediabox').mediaelementplayer(passobj);

    This way, I can conditionally pass along information to the player when the player is created.

    Anyhow, here are some questions regarding the options that are passed along to the player.

    mode:

    It looks like this isn't here any more. Things like: auto, auto_plugin, shim

    should be replaced with:

    passobj.plugins = ['flash']; passobj.pluginpath = "/members/js/mp30/"; passobj.flashName = 'mediaelement-flash-video.swf'; passobj.renderers = ['flash']

    This doesn't seem to be working for me. Do you have any examples where it's forcing the flash player to be loaded?

    Also, instead of one SWF file within the mejs directory, there's now five. Should I be selectively choosing the flash player based on what format I'm trying to use? Or just one mediaelement-flash-video.swf?

    If so, does mediaelement-flash-video.swf load the other swf files? Or is this unnecessary for deployment use?

    enablePluginSmoothing:

    I don't see this at all within the source anymore. Is this being done by default now?

    enablePseudoStreaming:

    I still see this within the source, however, is this limited to flash players now, only?

    features:

    Is it still possible to use third party plugins in this case? I'm currently using mep-feature-time-rail-thumbnails: https://github.com/jronallo/mep-feature-time-rail-thumbnails

    passobj.features = ['playpause','progress','current','duration','tracks','volume', 'timerailthumbnails','fullscreen'];

    In order to show thumbnails on VTT files. This may just be a matter of me going in and modernizing it for 3.0, but I just wanted to confirm before I dig in and try to fix things.

    addEventListener:

    This looks unchanged. Please confirm the behavior is the same between versions.

    opened by SeventhCycle 33
  • TypeError: t.mediaElement.renderer is null

    TypeError: t.mediaElement.renderer is null

    Greetings,

    While 3.x was a WIP, I'd been working to update the mediaelement Atmosphere package rather than use the NPM package (as now preferred in Meteor apps).

    Post-release I found that ES6-style imports don't seem to be working from the NPM package—at least not in Meteor—but I am inexperienced with NPM and might be doing it wrong, and anyway this would be best addressed in a separate issue. The usage docs on RequireJS / module imports are missing (though there is a heading at the end of the page).

    I am encountering a TypeError: t.mediaElement.renderer is null in the browser console every time I click play. And no audio plays. It follows a Meteor Exception from Tracker afterFlush function. I've tried to root out the exact source of that error, but various help threads on the Meteor forums and some debugging efforts haven't helped. So I'm kind of at a loss.

    It's difficult to reproduce this because I am working on a localhost and have no testing server. If it would be really helpful, I could try to setup a free deployment on Heroku. But I'm wondering if anyone is familiar with this error.

    The package and player are (I believe) configured correctly so that e.g. the mediaelementplayer() function is in global scope, all the files are available at an absolute path, and pluginPath is set to the correct relative URL with trailing backslash. It looks like this:

      $('#audio-player').mediaelementplayer({
        pluginPath: "/packages/delgermurun_mediaelementjs/files/",
        alwaysShowControls: true,
        features: ['playpause', 'progress'],
        type: 'audio/mp3',
        audioVolume: 'horizontal',
        audioWidth: 200,
        audioHeight: 20,
        iPadUseNativeControls: false,
        iPhoneUseNativeControls: false,
        AndroidUseNativeControls: false,
        success: function (mediaElement, domObject) {
          mediaElement.addEventListener('play', function(e) {
            Session.set('paused', false);
          }, false);
          mediaElement.addEventListener('pause', function(e) {
            Session.set('paused', true);
          }, false);
          player = mediaElement; // make it available for other functions
        },
        error: function () {
          console.log("Encountered an error while initializing the media element.")
        }
      });
    

    And the console log after page loading looks like this horrendous mess:

    Exception from Tracker afterFlush function:  meteor.js:930:11
    TypeError: t.mediaElement.renderer is null  meteor.js:930:11
    getFn@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:17441:6
    getFn@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:17413:11
    buildprogress/<@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:18758:1
    require<.node_modules.meteor.jquery["jquery.js"]/</jQuery.event.dispatch@http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:4722:15
    require<.node_modules.meteor.jquery["jquery.js"]/</jQuery.event.add/elemData.handle@http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:4391:6
    require<.node_modules.meteor.jquery["jquery.js"]/</jQuery.event.trigger@http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:4632:5
    require<.node_modules.meteor.jquery["jquery.js"]/</<.trigger/<@http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:5342:4
    require<.node_modules.meteor.jquery["jquery.js"]/</<.each@http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:442:14
    require<.node_modules.meteor.jquery["jquery.js"]/</jQuery.prototype.each@http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:194:10
    require<.node_modules.meteor.jquery["jquery.js"]/</<.trigger@http://localhost:3000/packages/jquery.js?hash=c57b3cfa0ca9c66400d4456b6f6f1e486ee10aad:5341:10
    setControlsSize@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:21499:4
    _meReady/_ret<@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:20944:6
    _meReady@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:20893:16
    success@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:20612:5
    MediaElement@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:17639:3
    MediaElementPlayer@http://localhost:3000/packages/delgermurun_mediaelementjs.js?hash=ee3b0d8b021e960e69b69e35527badf4dc6012a9:20740:3
    require<.imports.ui.components.includes["header.js"]</<@http://localhost:3000/app/app.js?hash=bdc7eb3f5a799195b016512bffb0becf29e66345:642:12
    fireCallbacks/<@http://localhost:3000/packages/blaze.js?hash=813922cefaf3c9d7388442268c14f87d2dde795f:3397:9
    Template._withTemplateInstanceFunc@http://localhost:3000/packages/blaze.js?hash=813922cefaf3c9d7388442268c14f87d2dde795f:3743:12
    fireCallbacks@http://localhost:3000/packages/blaze.js?hash=813922cefaf3c9d7388442268c14f87d2dde795f:3393:3
    Template.prototype.constructView/<@http://localhost:3000/packages/blaze.js?hash=813922cefaf3c9d7388442268c14f87d2dde795f:3486:5
    Blaze.View.prototype.onViewReady/fire/</<@http://localhost:3000/packages/blaze.js?hash=813922cefaf3c9d7388442268c14f87d2dde795f:1844:11
    Blaze._withCurrentView@http://localhost:3000/packages/blaze.js?hash=813922cefaf3c9d7388442268c14f87d2dde795f:2270:12
    Blaze.View.prototype.onViewReady/fire/<@http://localhost:3000/packages/blaze.js?hash=813922cefaf3c9d7388442268c14f87d2dde795f:1843:9
    Tracker._runFlush@http://localhost:3000/packages/tracker.js?hash=9f8a0cec09c662aad5a5e224447b2d4e88d011ef:539:11
    onGlobalMessage@http://localhost:3000/packages/meteor.js?hash=e3f53db3be730057fed1a5f709ecd5fc7cae1229:401:11
      meteor.js:930:11
    

    If there is anything I can do to help work this out, just ask. I will also consult with the Meteor community and post a link here when that's done. Thanks always to the MEJS team for the excellent software.

    PS. The styling is also broken after refactoring my CSS for the BEM update. The player is now misaligned with the play button up high and the bar down low. Is this expected?

    screen shot 2017-01-17 at 12 47 45

    Completed Needs verification 
    opened by daveyshindig 33
  • Player does not test against codec attribute

    Player does not test against codec attribute

    Hello,

    While High Sierra is not out of beta yet, one of the things I'm working towards here is getting H.265 support in for devices that support it.

    http://seventhcycle.net/mejs/codectest/ You'll see here that the video does not play since there is not h265 support for the 2160p variant here.

    http://seventhcycle.net/mejs/codectest/?nome On the other hand, you'll see if MediaElements is not called, the regular HTML5 player properly falls back to the next item in the list - 1080p.

    Are there any flags to let MEJS emulate this behavior?

    There are secondary constraints to think about, too. For example, an iPhone may not be able to play back 4k content. Ideally, it should load the next format.

    Note: If you know offhand the codec string to use for HEVC / mp4, that would be very, very helpful :) But in any case, this example should still work without the proper string. The main issue here is that the codec attribute is being ignored.

    Needs verification 
    opened by SeventhCycle 31
  • Is this expected behavior for setcurrenttime()/play()?

    Is this expected behavior for setcurrenttime()/play()?

    Hi,

    I am using 2.23.2.

    If I first create a player wrapping some audio:

           var player = new MediaElementPlayer('#myaudio');
    

    And imagine I would like to start the audio at an offset:

    	player.setCurrentTime(10.0);
    	player.play();
    

    Under that usage setCurrentTime(10.0) fails and playback starts from 0.0. Results are the same for Ubuntu and iOS.

    However, if I instead directly address the underlying audio (after creating the player):

    	var aud = document.getElementById("myaudio");
            aud.setCurrentTime(10.0);
            aud.play();
    

    .. then playback starts as desired at 10.0 on both Ubuntu and iOS.

    Why does the address-the-audio approach work as expected, but not the address-the-player approach? I was expecting for either both approaches to work, or both to fail.

    Is there a drawback to using the address-the-audio approach, even if the audio is wrapped by the player (I'd still like to use the player interface for other things)?

    p.s. Based on referenced approaches I've found elsewhere, the following also works as expected:

    	var aud = document.getElementById("myaudio");
    	aud.one("progress", function() {
        		player.setCurrentTime(10.0);
    	});
    	player.play();
    

    Thank you for any clarifications. Best, Andrew

    opened by someonetookmyname 30
  • Facebook embedded video do not work on HTTP.

    Facebook embedded video do not work on HTTP.

    I am trying to use Facebook Embedded, on HTTP website. Its doesn't works and I am reciving this error message:

    Uncaught SecurityError: Blocked a frame with origin "..." from accessing a frame with origin "https://www.facebook.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

    opened by MosheL 30
  • mejs-controls.svg in version 5.1.0-0 does not work

    mejs-controls.svg in version 5.1.0-0 does not work

    Even in a very simple and clear test environment without subfolders, the SVG icons are not displayed. The suggestions in #2874 don't work either. Could it be that the SVG itself is defective? The demo doesn't work either.

    opened by wallobit 0
  • Accessibility errors - empty ARIA menus trigger accessibility errors

    Accessibility errors - empty ARIA menus trigger accessibility errors

    I'm using release 5.1.0, downloaded / updated today, but the problem I'm here to post about predates this version.

    Basically, certain video control elements are causing your script to generate empty ULs for non existent settings? The javascript is generating empty ARIA-menus, and the accessibility checkers like WAVE are marking this as an error, because ARIA tagged menus have to have menu items in them, or they are considered broken. So the fix is going to have to be, to not generate these empty menu ULs, but rather to check for the existence of content for the list before inserting the containing

    elements.

    The code being complained about by WAVE includes:

    ......

    ......

    Audio Track
    Unordered listBroken ARIA menu
    opened by lorikay4 0
  • Accessibility mejs__time-slider Time Slider during playback

    Accessibility mejs__time-slider Time Slider during playback

    When the player is paused the mejs__time-slider has the appropriate aria-attributes

    <span class="mejs__time-total mejs__time-slider" role="slider" tabindex="0" aria-label="Zeitschieberegler" aria-valuemin="0" aria-valuemax="10.026667" aria-valuenow="10.026667" aria-valuetext="00:10">
    

    When the player is playing the mejs-time-slider has it's aria-attributes removed.

    <span class="mejs__time-total mejs__time-slider" role="slider" tabindex="0">
    

    This is handled by the following Code:

    	    updateSlider = function updateSlider() {
    			var seconds = t.getCurrentTime(),
    			    timeSliderText = _i18n2.default.t('mejs.time-slider'),
    			    time = (0, _time.secondsToTimeCode)(seconds, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength, player.options.timeFormat),
    			    duration = t.getDuration();
    
    			t.slider.setAttribute('role', 'slider');
    			t.slider.tabIndex = 0;
    
    			if (media.paused) {
    				t.slider.setAttribute('aria-label', timeSliderText);
    				t.slider.setAttribute('aria-valuemin', 0);
    				t.slider.setAttribute('aria-valuemax', isNaN(duration) ? 0 : duration);
    				t.slider.setAttribute('aria-valuenow', seconds);
    				t.slider.setAttribute('aria-valuetext', time);
    			} else {
    				t.slider.removeAttribute('aria-label');
    				t.slider.removeAttribute('aria-valuemin');
    				t.slider.removeAttribute('aria-valuemax');
    				t.slider.removeAttribute('aria-valuenow');
    				t.slider.removeAttribute('aria-valuetext');
    			}
    		},
    

    The issue could be resolved, if this code was to be changed to:

     updateSlider = function updateSlider() {
    			var seconds = t.getCurrentTime(),
    			    timeSliderText = _i18n2.default.t('mejs.time-slider'),
    			    time = (0, _time.secondsToTimeCode)(seconds, player.options.alwaysShowHours, player.options.showTimecodeFrameCount, player.options.framesPerSecond, player.options.secondsDecimalLength, player.options.timeFormat),
    			    duration = t.getDuration();
    
    			t.slider.setAttribute('role', 'slider');
    			t.slider.tabIndex = 0;
    
    			t.slider.setAttribute('aria-label', timeSliderText);
    			t.slider.setAttribute('aria-valuemin', 0);
    			t.slider.setAttribute('aria-valuemax', isNaN(duration) ? 0 : duration);
    			t.slider.setAttribute('aria-valuenow', seconds);
    			t.slider.setAttribute('aria-valuetext', time);
    			
    		},
    

    The issue is, that the time slider is not accessible for the screenreader, while the video is playing. The values that change during playback are aria-valuenow and aria-valuetext when the video is already loaded and not a stream. aria-label, aria-valuemin and aria-valuemax however should be static and there shouldn't be a reason to remove those when playing. aria-valuenow and aria-valuetext should also be present, even when they are changing constantly during playback.

    On Windows in Chrome, using NVDA there is no 'babble' unless the time slider is focussed, but in that case it would be correct to have the updated aria-valuetext being read since it is changing.

    This possibly collides with: https://github.com/mediaelement/mediaelement/issues/1523

    Please look into it, since the missing aria-atributes during playback are being marked as problems in accessibility testing.

    opened by toolchild 0
  • Now you can remove Vimeo video controls - controls=0

    Now you can remove Vimeo video controls - controls=0

    Now you can remove Vimeo video controls controls=0

    Hide Vimeo controls + autoplay https://player.vimeo.com/video/108018156?controls=0&autoplay=1

    Autoplay will work only if one of the videos was already trigged in a web page by a user action or with a promise to play.

    opened by onigetoc 1
  • player has many shortcomings

    player has many shortcomings

    Hello,
    I'm currently sending you some errors just for the playlist player this player has many shortcomings responsive player it does not work main poster does not display properly your player here https://paidcodes.albdroid.al/Players/Stream_Secure/Playlist/Media_Element_JS_Playlist_Player/

    and main tag poster
    <video id="player1" style="width: 100%;height: 100%" controls="controls" preload="auto" 
    poster="https://png.kodi.al/tv/albdroid/logo_bar.png">
    
    unknown object
    r/[object%20Object]
    r/[object Object]
    

    all other players work prefect while yours has a lot of problems example players with same json playlist code https://paidcodes.albdroid.al/Players/Stream_Secure/Playlist/Clappr_Player/ https://paidcodes.albdroid.al/Players/Stream_Secure/Playlist/Hash_Player/

    main_player dev_tools main_player_error unknown_object_1 unknown_object_2

    opened by SxtBox 0
  • Releases(5.1.0)
    • 5.1.0(Sep 7, 2022)

      • Detect when seek has been called by user interaction (#2869)
      • Use of strict mode in language files may lead to javascript error when used in a JS packer (#2870)
      • Fix container height and width calculation when css is deactivated (#2906)
      Source code(tar.gz)
      Source code(zip)
    • 5.0.5(Feb 7, 2022)

    • 5.0.4(Nov 4, 2021)

    • 5.0.3(Oct 29, 2021)

      • Add attribute aria-describedby to horizontal-volume button
      • Reinclude type="button" to the button, to prevent submit in forms.(PR #2887 Fixed #2873)
      • Consistent usage of space and return keys in all browsers (PR #2889 Fixed #2888)
      Source code(tar.gz)
      Source code(zip)
    • 5.0.2(Oct 18, 2021)

      • Reflect correct aria-pressed status of overlay play button when clicked for the first time
      • Reflect toggling aria-pressed status of the overlay play button correctly *Minimizing necessary tabs for Firefox by setting audio/video-element to tabindex="-1"
      Source code(tar.gz)
      Source code(zip)
    • 5.0.1(Oct 6, 2021)

      • Fix for fullscreen video not centering in mobile view (#2881)
      • Fix for volume-current and volume-total becoming non-distinguishable with custom high-contrast settings enabled (#2878)
      Source code(tar.gz)
      Source code(zip)
    • 5.0.0(Sep 16, 2021)

      The WCAG update

      To be WCAG 2.1 compliant we had to introduce breaking changes. We had to create a new solution to improve user defined values for colors and text size in the browser.

      We also improved the semantics and aria attributes for the control bar. By using inline svgs for the control elements we simplified customization with css properties because now fill:color and stroke:color can be used.

      • Change default value for fakeNodeName to div (#2800)
      • Copy all files from /demo folder to /build folder with grunt task
      • Replace background sprite for controls with svg icon sprite
      • New option iconSprite: path where the svg icon sprite is located, see standalone documentation
      • Change px to rem values in styles
      • Add attribute aria-describedby to volume button
      Source code(tar.gz)
      Source code(zip)
    • 4.2.17(Jul 5, 2021)

      • Fix player.options.startVolume overwritten by 0 (#2783)
      • Fix some html comments typos, Strip out old 404 sources (#2772)
      • Fix issues with fullscreen under Safari (#2762)
      • Get correct mime type for mov files (#2766)
      • Fix enableAutosize:false bug see #2753
      • Fix rare issue with offscreen.remove() #2752
      • Fix DFXP parsing: remove remnants of jQuery use (#2760)
      • Use the same rendererName variable when calculating isNative (#2759)
      • Improve formatting of the release.md docs
      Source code(tar.gz)
      Source code(zip)
    • 4.2.16(Mar 16, 2020)

      • Fix 4.2.15 release : update version to 4.2.16, rebuild

      • Changed multiple urls in demo file (#2749)

      • Removed FLV and MP4 No Ext de to 404 replaced HLS due to 404 with Akamai Test stream

      • Replaced Facebook url due to not working Layout is ** up now. Change multple audio files due to not working. api.soundcloud.com has reached it limit for api request therefore not working any more

      • Replaced one supplied by facebook

      • Facebook video post did not work

      Source code(tar.gz)
      Source code(zip)
    • 4.2.15(Mar 9, 2020)

      • Do not delay starting media on key action (#2745)
      • Do not call changeRenderer() on empty media (#2743) simplify condition avoid pausing player without media
      • Trigger pause/play when seeking with keyboard to make analytics work (#2740)
      • Fix extracting the vimeo video id from private links (#2733) (#2741)
      • Add option to preprocess caption text before display (#2735)
      • Add option captionTextPreprocessor to allow preprocessing of caption texts using a given callback (#2735)
      • Improve doc formatting
      • Fix "config is undefined" when working with volumeSlider using keyboard (#2736)
      • Remove unnecessary Safari hack (#2731)
      • Fix time slider and volume slider crash on keypress (#2728)
      • Changed fullscreeneventname for resolving fullscreen issue in firefox (#2726)
      • media.seekable fallback for getDuration-method of player/default.js (#2571)
      • Add new configuration option "ignorePauseOtherPlayersOption" (useful for background(banner) players)
      • api.md: document "ignorePauseOtherPlayersOption" option
      • Remove IS_ANDROID from SUPPORTS_NATIVE_HLS (#2720) (#2719)
      • Add handling of the .play() promise errors to vimeo player (#2715) (#2716)
      • Make error event handler more robust (#2708) Check if event.target.error exists before accessing it. In some edge cases e.target is no
      Source code(tar.gz)
      Source code(zip)
    • 4.2.15-rc1(Feb 20, 2020)

      • Remove unnecessary Safari hack (#2731)
      • Fix time slider and volume slider crash on keypress (#2728)
      • Changed fullscreeneventname for resolving fullscreen issue in firefox (#2726)
      • media.seekable fallback for getDuration-method of player/default.js (#2571)
      • Add new configuration option "ignorePauseOtherPlayersOption" (#2713, #2712)
      • Remove IS_ANDROID from SUPPORTS_NATIVE_HLS (#2720, #2719)
      • Added handling of the .play() promise errors to vimeo player (#2716, #2715)
      • Make error event handler more robust (#2708)
      Source code(tar.gz)
      Source code(zip)
    • 4.2.14(Oct 18, 2019)

      • Update versions in src/js/core/mejs.js and package.js (had not been done for 4.2.13)
      • Include RELEASE.md so that "the maintainer" knows how to build a release.
      • Handle captions files missing text at end of file. (PR#2702)
      Source code(tar.gz)
      Source code(zip)
    • 4.2.13(Sep 26, 2019)

    • 4.2.12(Aug 26, 2019)

      • Fix dash.js (@daveyx,#2659, call to obsolete functions removed) (#2672)
      • Fixes Safari critical error on video element children (#2668) …
      • Generate hlsError events for non fatal errors (#2666)
      • Fix append method is not support on old browser (#2580)
      • Fix time slider crash on left/right arrow keypress #2622
      • Fix bug before media loads and currentTime is not a number #2658 (IE 11, IndexSizeError or InvalidStateError returned in the console when seek asked before play) progress.js: Put brackets around nested conditions to comply with Old browsers Html validation issue and patch (put 0 instead of NaN as a value for aria-maxvalue) Until 'play' is clicked the value is 0, formerly 'NaN'. While playing media the value is the currentTime
      • No longer modify any objects under the global window objects to prevent side effect. (PR #2123 Fixed #2598)
      • Added handling of the .play() promise errors to native_hls player (PR#2550)
      • Add support for getPlaybackRate and setPlaybackRate for YouTube renderer (#2676)
      • Add Turkish translations #2678
      Source code(tar.gz)
      Source code(zip)
    • 4.2.11-rc3(Jul 24, 2019)

      • Fix dash.js (@daveyx,#2659, call to obsolete functions removed) (#2672)
      • Fixes Safari critical error on video element children (#2668) …
      • Generate hlsError events for non fatal errors (#2666)
      • Fix append method is not support on old browser (#2580)
      • Fix time slider crash on left/right arrow keypress #2622
      • Fix bug before media loads and currentTime is not a number #2658 (IE 11, IndexSizeError or InvalidStateError returned in the console when seek asked before play)
      • progress.js: Put brackets around nested conditions to comply with Old browsers
      • Html validation issue and patch (put 0 instead of NaN as a value for aria-maxvalue) Until 'play' is clicked the value is 0, formerly 'NaN'. While playing media the value is the currentTime
      • No longer modify any objects under the global window objects to prevent side effect. (PR #2123 Fixed #2598)
      • Added handling of the .play() promise errors to native_hls player (PR#2550)
      Source code(tar.gz)
      Source code(zip)
    • 4.2.11.2(Jul 13, 2019)

      • Fix time slider crash on left/right arrow keypress #2622
      • Fix bug before media loads and currentTime is not a number #2658 (IE 11, IndexSizeError or InvalidStateError returned in the console when seek asked before play)
      • progress.js: Put brackets around nested conditions to comply with Old browsers
      • Html validation issue and patch (put 0 instead of NaN as a value for aria-maxvalue) Until 'play' is clicked the value is 0, formerly 'NaN'. While playing media the value is the currentTime
      • No longer modify any objects under the global window objects to prevent side effect. (PR #2123 Fixed #2598)
      • Added handling of the .play() promise errors to native_hls player (PR#2550)
      Source code(tar.gz)
      Source code(zip)
    • 4.2.10(May 27, 2019)

      • don't swallow first 2% of the video in time slider (#2582)
      • Chrome fix to play vimeo videos (#2622)
      • Update volume.js (#2530) - Implementing a slight change to improve accessibility and compliance with WCAG 2.0 success criteria 4.1.1 and 4.1.2
      • fixes the forceLive always adding "Live Broadcast" memory leak (#2589)
      • Update resources.md (#2565) - Add video snapshot plugin resource
      • Fix typo (#2540)
      Source code(tar.gz)
      Source code(zip)
    • 4.2.9(Mar 28, 2018)

      4.2.9 (2018/03/27)

      • Fixed typo in documentation (https://github.com/mediaelement/mediaelement/pull/2512) @moagggi
      • Added remainingTime getter (https://github.com/mediaelement/mediaelement/pull/2505) @Lewiscowles1986
      • Fixed iframe parameters formatting for Vimeo/Facebook (https://github.com/mediaelement/mediaelement/pull/2498) @skreutzer
      • Added Malay translation (https://github.com/mediaelement/mediaelement/pull/2490) @MuhdNurHidayat
      • Fixed getComputedStyle in Firefox (https://github.com/mediaelement/mediaelement/pull/2487) @pgrzeszczak-neducatio
      • Fixed documentation for React usage @rafa8626
      • Added LICENSE file @rafa8626
      • Added conditionals to avoid executing fullscreen methods in audio tags @rafa8626
      • Added conditionals to avoid triggering keyboard events if enableKeyboard is false @rafa8626
      • Added missing conditionals when destroying media @rafa8626
      • Modified Malay language in the demo @rafa8626
      • Set empty source when destroying player to prevent #2499 @rafa8626
      • Added conditional to avoid setting duration when media has been destroyed @rafa8626
      • Replaced callback when seeking in paused media to achieve correct behavior @rafa8626
      • Updated documentation about using startLanguage and toggleCaptionsButtonWhenOnlyOne (https://github.com/mediaelement/mediaelement/pull/2520) @dmdewey
      Source code(tar.gz)
      Source code(zip)
    • 4.2.8(Jan 16, 2018)

      • Clarify effect of setting toggleCaptionsButtonWhenOnlyOne (https://github.com/mediaelement/mediaelement/pull/2471) @cjcolvar
      • Remember startVolume value even if video is muted (https://github.com/mediaelement/mediaelement/pull/2470) @D3nnisH
      • Fix @see links for hls.js renderer (https://github.com/mediaelement/mediaelement/pull/2478) @cjcolvar
      • UID filter for Flash files @johndyer
      Source code(tar.gz)
      Source code(zip)
    • 4.2.7(Nov 17, 2017)

      4.2.7 (2017/11/17)

      • Fixed issue with setFillMode when using cross-domain URLs in iframe @rafa8626
      • Added new proxyType and streamDelimiter variables to Flash video to support RTMPS compatibility @rafa8626
      • Fixed issues with renderers when trying to use muted property while using MediaElement shim @rafa8626
      • Fixed typo with Twitch renderer related to trigger mouse events @rafa8626
      • Fixed typo when assigning options to Dailymotion renderer @rafa8626
      • Added missing workflow to set controls on YouTube, Facebook and Dailymotion renderers via controls property @rafa8626
      • Added missing playing event on Vimeo and Dailymotion renderer @rafa8626
      • Expanded regexp to accept 3-letter country codes and underscore for 4-letter country codes @rafa8626
      • Added init, getElement and buildfeatures methods for WP compatibility @rafa8626
      • Make setPoster method to work on mobile devices with native controls (https://github.com/mediaelement/mediaelement/pull/2419) @lucash
      • Added missing conditional in native HLS and HTML5 renderer to test media files correctly to trigger error after testing all of them @rafa8626
      • Added jsDelivr badge (https://github.com/mediaelement/mediaelement/pull/2421) @LukasDrgon
      • Fixed issue with visible method when getClientRects is not a function @rafa8626
      • Fixed issues with parseInt method not setting radix in some calls @rafa8626
      • Added missing argument in secondsToTimeCode method to check the time format given and display accordingly @rafa8626
      • Fixed issues related to duplicated calls when triggering error and fixed style for poster when error is displayed @rafa8626
      • Fixed issue with captions not being rendered inside video frame on any state @rafa8626
      • Integrated destroy method in MediaElement class @rafa8626
      • Added validation to modify SoundCloud iframe atributes when using video tag @rafa8626
      • Fixed issue when checking for native dimensions of video element to set responsive dimensions correctly @rafa8626
      • Added missing workflow to make loop work correctly in YouTube according to documentation @rafa8626
      • Changed paths for hls.js and flv.js renderers to always be up-to-date @rafa8626
      • Fixed issue with timecode displaying 60 seconds @rafa8626
      • Fixed JSDocs for some features @rafa8626
      Source code(tar.gz)
      Source code(zip)
    • 4.2.6(Sep 19, 2017)

      4.2.6 (2017/09/19)

      • Fixed positioning of progress bar tooltip @rafa8626
      • Added style to avoid flickering when using volume on Chrome @rafa8626
      • Fixed broken UUT @rafa8626
      • Added configs parameter for native FLV according to documentation for flv.js (https://github.com/mediaelement/mediaelement/pull/2344) @xiaosongxiaosong
      • Added missing call to avoid further calls to attempt set the player's dimensions once removed @rafa8626
      • Fixed typo when checking error event and fixed workflow to loop multiple sources until valid one is found for html5 and native_hls renderers @rafa8626
      • Fixed workflow to enable/disable controls once error occurs and once user recovers from error @rafa8626
      • Fixed issue when no height attribute but style is set to create proper player dimensions @rafa8626
      • Use local variable for getComputedStyle polyfill to avoid recursion on Firefox (https://github.com/mediaelement/mediaelement/pull/2351) @synthecypher
      • Fixed accessibility issues when using keyboard on focused progress bar and moved keyActions to their individual components @rafa8626
      • Fixed issues with progress bar tooltip when media duration is too long @rafa8626
      • Added new mejs variables needed for WordPress @rafa8626
      • Fixed issues with events fired in incorrect time for flash_video renderer @milax
      • Set specific settings for embedding flash object in Edge browser (https://github.com/mediaelement/mediaelement/pull/2364) @milax
      • Added new constant to detect passive events and added conditional for touchstart events @rafa8626
      • Removed width and height from embed object to ensure Flash audio will play on Chrome (https://github.com/mediaelement/mediaelement/pull/2367) @milax
      • Fixed issue with Caption/Chapters menus not selecting options properly when using mouse @rafa8626 and @Instagit
      • Removed black area when Flash player is used in audio player (https://github.com/mediaelement/mediaelement/pull/2370) @milax
      • Fixed issue with poster option not being set if poster attribute is absent @rafa8626
      • Moved code inside player.js to corresponding features to restore original order or operations when creating layers @rafa8626
      • Added unmute command for Facebook renderer @rafa8626
      • Fixed events emitting and run handlers of active renderer only for Flash and HTML5 renderer (https://github.com/mediaelement/mediaelement/pull/2368) @milax
      • Fixed issues when setting sources for Flash HLS renderer and added missing events @rafa8626
      • Upgraded hls.js to 0.8.2 version and flv.js to 1.3.3 version @rafa8626
      • Refactor Facebook renderer to solve issues when instantiating multiple videos and added new lang parameter to load language on SDK @rafa8626
      • Fixed typos in Twitch renderer that caused channels not to play properly @rafa8626
      • Fixed typos in Flash renderer to avoid issues with embed dimensions @rafa8626
      • Reintegrated old workflow to deal only with dash.js play errors @rafa8626
      • Updated documentation @rafa8626
      • Added documentation about MEJS installation through Bower (https://github.com/mediaelement/mediaelement/pull/2399) @thompsonemerson
      Source code(tar.gz)
      Source code(zip)
    • 4.2.5(Aug 9, 2017)

      4.2.5 (2017/08/09)

      • Removed workflow that ignored MIME type to get a better media match @rafa8626
      • Fixed typos related to HLS MIME type and library version @rafa8626
      Source code(tar.gz)
      Source code(zip)
    • 4.2.4(Aug 9, 2017)

      4.2.4 (2017/08/08)

      • Added missing conditional to set current time properly for live streams (especially YouTube ones) @rafa8626
      • Fixed issues with Flash fallback for FLV and RTMP in regards of setting current time and other events @rafa8626
      • Fixed typos when setting poster for iOS and when destroying player @rafa8626
      • Fixed typo when setting default player caused issues on Firefox when extending MediaElementPlayer object @rafa8626
      • Fixed issue related to iframe renderers not resizing properly after using fullscreen @rafa8626
      • Updated RTMP and Dailymotion sources @rafa8626
      • Added useDefaultControls configuration to simplify list of features (https://github.com/mediaelement/mediaelement-plugins/issues/74) @rafa8626
      • Removed build/mediaelement.js in package.js to avoid duplication issues in Meteor and added missing languages @rafa8626
      • Removed unnecessary event un-bindings that caused errors on Edge @rafa8626
      • Added missing layer to display errors correctly on native renderers and added missing styles for errors; customError accepts a callback as well @rafa8626
      • Added missing translations; removed Brazilian Portuguese and added Catalan in demo file @rafa8626
      • Added forceLive configuration to hide progress bar and display Live Broadcast even when duration is a valid number @rafa8626
      • Fixed issues with Flash HLS renderer related to restarting video once ended @rafa8626
      • Added missing translations @rafa8626
      • Fixed issue with native M(PEG)-DASH assigned to MediaElement shim related to The play() request was interrupted error @rafa8626
      • Created workflow to remove/restore poster when using FB and iPhone and updated SDK version @rafa8626
      Source code(tar.gz)
      Source code(zip)
    • 4.2.3(Jul 23, 2017)

      4.2.3 (2017/07/22)

      • Fixed issue with setting default player causing some sources to autoplay @rafa8626
      • Added new useFakeFullscreen configuration element to bypass conditional when entering fullscreen and added CSS to hide native controls @rafa8626
      • Fixed issue with sequence of files when creating bundle @rafa8626
      • Updated FLV and HLS libraries @rafa8626
      • Cleaned stylesheet and fixed minor issues on demo file @rafa8626
      • Fixed issues when using setPoster method after player was initialized @rafa8626
      • Fixed issues with setSrc method duplicating events on the native renderers @rafa8626
      • Removed code to load media when playing considered unnecessary @rafa8626
      • Added mechanism in YouTube renderer to add YouTube's thumbnail as a poster using youtube's imageQuality parameter @rafa8626
      • Fixed typo on setFill mode and fixed issue with poster when using iOS @rafa8626
      • Fixed issue with M(PEG)-DASH renderer related to dash.js not picking settings from the renderer @rafa8626
      • Added missing dependency to player/library.js file (https://github.com/mediaelement/mediaelement/pull/2318) @JulianKniephoff
      • Added missing code to explain how to use MediaElement with RequireJS @rafa8626
      • Integrated Flashls events to be processed by the player @rafa8626
      • Fixed test file when using JSDom and Mocha Chai @rafa8626
      Source code(tar.gz)
      Source code(zip)
    • 4.2.2(Jun 27, 2017)

      4.2.1/4.2.2 (2017/06/28)

      • Added conditional to avoid AJAX request on non-SSL media on iOS @rafa8626
      • Fixed error with .versions file @rafa8626
      Source code(tar.gz)
      Source code(zip)
    • 4.2.1(Jun 27, 2017)

    • 4.2.0(Jun 27, 2017)

      4.2.0 (2017/06/26)

      • Fixed issues related to Promises with native renderers @rafa8626
      • Fixed typos in player to execute properly destroy() and stop() methods @rafa8626
      • Fixed issues with error message not being displayed properly in different scenarios @rafa8626
      • Fixed issue with controls not being hidden using keyboard @rafa8626
      • Fixed issue using fullscreen button and iframes @rafa8626
      • Updated documentation on ReactJS about how to destroy a player and fixed typo on WordPress section @rafa8626
      • Added missing documentation about how to install MediaElement in Drupal @rafa8626
      • Fixed typo in Vimeo renderer @rafa8626
      • Updated version of Facebook API @rafa8626
      • Replacing buffer querySelector with getter function in player (https://github.com/mediaelement/mediaelement/pull/2284) @ychen022
      • Fixed issues with keyboard not picking events correctly on Chrome @rafa8626
      • Improved error system to catch more errors and present them to user @rafa8626
      • Removed mediaelementplayer bundles, as well as jQuery file, considered unnecessary @rafa8626
      • Added new middleware layer to allow interaction with other players @rafa8626
      • Used flex-box to reduce calculation via Javascript on control bar (https://github.com/mediaelement/mediaelement/pull/2261) @marcobiedermann and @rafa8626
      • Fixed issue with events not being unbound when player is destroyed and removed unnecessary callbacks from it @rafa8626
      • Added missing style for buffering element @rafa8626
      • Removed conditional to disable control bar when an error happens @rafa8626
      • Updated references to (Adobe / Apache) Flex SDK in documentation (https://github.com/mediaelement/mediaelement/pull/2287) @isantolin
      • Updated CDN references for both native FLV and HLS renderers @rafa8626
      • Fixed issue with tooltip position when rail is 100% and gets cut off @rafa8626
      • Fixed The play() request was interrupted errors by changing way to check for Promises and methods @rafa8626
      • Added missing workflow to hide controls when playing media and mouse is out of player container @rafa8626
      • Added conditionals to check if src track is not empty to avoid render empty track sources @rafa8626
      Source code(tar.gz)
      Source code(zip)
    • 4.1.3(Jun 7, 2017)

      4.1.3 (2017/06/06)

      • Updated Chinese translations (https://github.com/mediaelement/mediaelement/pull/2239) @PeterDaveHello
      • Changed destroy() to remove() in React documentation (https://github.com/mediaelement/mediaelement/pull/2243) @evykassirer
      • Added full support for autoplay, loop and muted attributes to interact in all renderers @rafa8626
      • Improved core functionality by adding Promises to ensure proper behavior of plugin's operation, such as play(), setSrc(), etc. @rafa8626
      • Fixed typo for DailyMotion renderer @rafa8626
      • Integrated new robustnessLevel parameter for DRM on M(PEG)-DASH renderer @rafa8626
      • Replaced childNodes with children to avoid issues with non Node elements inside video/audio tag @rafa8626
      • Cleaned Gruntfile to remove unnecessary task and align CSS to current browser compatibility @rafa8626
      • Fixed disableControls() method (https://github.com/mediaelement/mediaelement/pull/2254) @jhutchins
      • Updated documentation to state support for SoundCloud with native HTML5 renderer @rafa8626
      • Updated documentation to expose instance argument when using MediaElementPlayer or jQuery's mediaelementplayer success callback @rafa8626
      • Added missing events for FLV native renderer @rafa8626
      • Fixed to documentation (https://github.com/mediaelement/mediaelement/pull/2259) @marcobiedermann
      • Optimized SVG sprite (https://github.com/mediaelement/mediaelement/pull/2260) @marcobiedermann
      • Upgraded regex to match YouTube videos properly @rafa8626
      • Fixed regex to check if source is valid YouTube source @rafa8626
      • Upgraded flv.js to 1.3.0 (https://github.com/mediaelement/mediaelement/pull/2262) @isantolin
      • Updated hls.js to a CDN with SSL support (https://github.com/mediaelement/mediaelement/pull/2263) @isantolin
      • Sorted CSS properties to reduce filesize when using gzip (https://github.com/mediaelement/mediaelement/pull/2264) @marcobiedermann
      • Integrated Stylelint for CSS quality @rafa8626
      • Improvements to CSS stylesheets via Stylelint (https://github.com/mediaelement/mediaelement/pull/2266) and (https://github.com/mediaelement/mediaelement/pull/2269) @marcobiedermann
      • Fixed workflow to generate proper vendor prefixes (https://github.com/mediaelement/mediaelement/pull/2265) @marcobiedermann
      • CSS cleanup (https://github.com/mediaelement/mediaelement/pull/2267) @marcobiedermann
      • Fixed issue related to tooltip changing size when hovering on progress bar and alwaysShowHours set to true @rafa8626
      Source code(tar.gz)
      Source code(zip)
    • 4.1.2(May 25, 2017)

      4.1.2 (2017/05/25)

      • Fixed issues with Accessibility in Chapters/Captions and Volume slider @rafa8626
      • Added new resources to documentation @rafa8626
      • Fixed MD broken link (https://github.com/mediaelement/mediaelement/pull/2223) @Mackiovello
      • Changed calculation to avoid higher dimensions than expected using parseFloat on responsive mode @rafa8626
      • Updated installation.md file for WordPress upgrades, and fixed README file @rafa8626
      • Fixed hasFluidMode() method to return proper result (https://github.com/mediaelement/mediaelement/pull/2224) @lucash
      • Fixed issue with logical operators and ~ symbol @rafa8626
      • Integrated loadScript() method to optimize way to load external libraries (https://github.com/mediaelement/mediaelement/pull/2226) @jimmywarting
      • Removed unnecessary whitespaces, upgraded packages and removed comments on bundles @rafa8626
      • Fixed issue with startVolume not being picked by non-native renderers @rafa8626
      • Added getDuration() and used methods vs property access to allow MediaElementPlayer to be extended (https://github.com/mediaelement/mediaelement/pull/2228) @jhutchins
      • Added player min-width based on elements visible on control bar @rafa8626
      • Added missing events to set startVolume properly when loading new data @rafa8626
      • Fixed issue related to controlbar not reflecting loading progress @rafa8626
      • Fixed issues with native FLV renderer related to load new sources and having multiple players rendering FLV media @rafa8626
      • Enabled DRM support for M(PEG)-DASH via setSrc() and dash.drm configuration @rafa8626
      • Added support to pass a single object in setSrc() @rafa8626
      • Added Persian translation (https://github.com/mediaelement/mediaelement/pull/2238) @wmateam
      Source code(tar.gz)
      Source code(zip)
    • 4.1.1(May 16, 2017)

      4.1.1 (2017/05/16)

      • Added missing conditional to reuse exitFullscreen method @rafa8626
      • Added new code snippet to use player with AudioContext.decodeAudioData() @rafa8626
      • Added missing conditional for bug with hidden iframes in Firefox @rafa8626
      • Fixed typo in Vimeo renderer @rafa8626
      • Added workflow to solve issue with iOS and HTTPS playing media @rafa8626
      • Changed match to test and includes to indexOf to improve performance @rafa8626
      • Fixed responsive mode within iframe (https://github.com/mediaelement/mediaelement/pull/2207) @lucash
      • Updated German translation (https://github.com/mediaelement/mediaelement/pull/2210) @SoftCreatR
      • Enforced https protocol on external libraries (https://github.com/mediaelement/mediaelement/pull/2212) @jimmywarting
      • Fixed issue when using YouTube in audio tag triggering double buffering/play events when starting media @rafa8626
      • Fixed fill mode within iframe @rafa8626
      • Fixed player accessibility using Tab key and avoid hiding controls on audio element @rafa8626
      • Fix usage for iOS with native controls (https://github.com/mediaelement/mediaelement/pull/2215) @lucash
      Source code(tar.gz)
      Source code(zip)
    Owner
    MediaElement.js
    Audio Video Unification Framework
    MediaElement.js
    A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.

    SoundJS SoundJS is a library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers, inclu

    CreateJS 4.3k Dec 31, 2022
    HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.

    HLS.js is a JavaScript library that implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback. It wor

    video-dev 12.3k Jan 2, 2023
    Flexible and easy Dash/HLS/DRM integration for HTML5 video.

    This project is made possible with Plyr, Hls.js, Dash.js. Features ?? HLS and DASH playback ?? Multi quality supported ?? Drm with custom header suppo

    Tuhin Kanti Pal 25 Nov 11, 2022
    SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

    WordPress-Plugin-SrsPlayer SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc. Usage First, you should get your own video stream

    ossrs 3 Jul 27, 2022
    SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

    SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

    ossrs 12 Oct 15, 2022
    A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

    ReactPlayer A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, M

    Pete Cook 7.2k Jan 4, 2023
    Recap let's you recap on your favourite social network videos by downloading them on your devices, from the range of YouTube, SoundCloud, Facebook, Twitter, Instagram, TikTok, Vimeo, Dailymotion, VK, or AOL.

    Recap A Social Network Video Downloader Recap let's you recap on your favourite social network videos by downloading them on your devices, from the ra

    John Oladele 4 Sep 24, 2022
    Rule YouTube, Soundcloud and Vimeo player with one API

    Polyplayer Polyplayer allows you to rule YouTube's, Soundcloud's and Vimeo's player using one API. Features Playing, pausing, stopping Seek to absolut

    Marius 41 Sep 24, 2022
    A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams.

    MP4Inspector A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams. Installation In chrome navigate to chr

    Bitmovin 48 Nov 28, 2022
    A tool to download all videos and convert to mp3 inside a video set of bilibili.

    bilibili-video2mp3 A tool to download all videos and convert to mp3 inside a video set of bilibili (also works for single video, of course). You will

    wxsm 23 Dec 15, 2022
    AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.

    Documentation • Examples • Tutorials • Support Us • Get Professional Help AmplitudeJS is a lightweight JavaScript library that allows you to control t

    Server Side Up 3.9k Jan 2, 2023
    Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

    Wave.js Audio visualizer library for javascript. Installation Install With CDN <script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.

    Austin Michaud λ 497 Dec 21, 2022
    Enables

    HTML5 video made easy All it takes is a single line of code to make HTML5 video and audio tags work in all major browsers. How to enable video and aud

    Dave Hall 1.3k Dec 17, 2022
    Video.js - open source HTML5 & Flash video player

    Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

    Video.js 34.8k Jan 5, 2023
    ▶️ Streams a list of tracks from Youtube, Soundcloud, Vimeo...

    PlayemJS PlayemJS is a front-end JavaScript component that manages a audio/video track queue and plays those tracks sequentially. It can currently pla

    Adrien Joly 90 Nov 27, 2022
    This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library included.

    Aim-Player This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library incl

    Aim Mikel 2 Jun 27, 2021
    Secretly record audio and video with chromium based browsers

    snoop TCC restricts access to the device camera and microphone to protect user data from unauthorized access. But... If you trusted your browser with

    BreakPoint Technologies 10 Aug 30, 2022
    Modern browsers already had a vivid player for video

    Modern browsers already had a vivid player for video. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> support, customize control panel will become a piece of cake. <msc-ez-video /> adopts CSS custom properties, developers could style them as they want.

    Paul 1 Dec 29, 2021