Autoplay MediaElementPlayer

Question

I want that when web site page loaded play video automatically.

I referenced to jquery.js, mediaelementplayer.js and mediaelementplayar.min.css on my page and added video tag.

I tried so many ways, e.g. autoplay = true and use javascript code but I couldn't get it to work.

I'm using BlogEngine.Net 2.0.

How can I do that?

You have to provide more info than that. Default.aspx's just don't play media. — Mikael Östberg, Mar 22 '11 at 16:04

score 23 · Accepted Answer · answered Jun 26 '12 at 10:48

This is a bug in MediaElementJS, autoplay works for native and silverlight, but needs a little help with Flash.

You can listen for canPlay event and start playing as soon as the flash player is ready.

setTimeout tricks may fail in race conditions.

$('#playerid').mediaelementplayer({
    plugins: ['flash', 'silverlight'],
    success: function(mediaElement, domObject) {
        if (mediaElement.pluginType == 'flash') {
            mediaElement.addEventListener('canplay', function() {
                // Player is ready
                mediaElement.play();
            }, false);
        }
    },
    error: function() {
        alert('Error setting media!');
    }
});

Hello, can you tell me how to stop autoplay for youtube mediaelement? — Giorgi Gogitidze, Jul 02 '17 at 23:52

score 9 · Answer 2 · edited Dec 12 '16 at 00:16

You can add the autoplay="true" attribute to the <video> tag as shown below:

<video width="100%" height="auto" poster="some_image.jpg" controls="controls" 
    autoplay="true">

  <source type="video/mp4" src="myvideo.mp4" />
  <source type="video/webm" src="myvideo.webm" />
  <source type="video/ogg" src="myvideo.ogv" />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
    <param name="movie" value="flashmediaelement.swf" />
    <param name="flashvars" value="controls=true&file=myvideo.mp4" />
    <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
  </object>
</video>

To play it on all the browsers/devices, you can use jQuery to reference the object and call its play() method.

<script>  
     var player = new MediaElementPlayer('#id-of-player',/* Options */);
     player.play(); 
</script>

For further information, you can check here.

The reason for the alternative solution ("*To play it on all the browsers*…") is actually this: the `autoplay="true"` attribute does not work in case that MediaElement.js has to fall back on its Flash video player. — tanius, Dec 11 '16 at 16:15

score 5 · Answer 3 · answered Oct 05 '11 at 07:52

5

This can be helpfull.

$('audio,video').mediaelementplayer({
        success: function(player, node) {
        $('.mejs-overlay-button').trigger('click');
        }
});

answered Oct 05 '11 at 07:52

Hiren Reshamwala

83
1
5

score 3 · Answer 4 · answered Sep 08 '11 at 21:22

3

// works here (tested with MediaElements.js 2.1.9)
$(document).ready(function () {
  $('video,audio').mediaelementplayer().load();
});

answered Sep 08 '11 at 21:22

Eby

31
2

score 3 · Answer 5 · answered Oct 27 '11 at 11:11

3

Unless i miss the point just add 'autoplay' to HTML5 video tag

answered Oct 27 '11 at 11:11

Adi

4,034
13
56
78

1

Doesn't work with MediaElementPlayer in browsers that don't support ` – acme Mar 16 '12 at 11:15

Martin Dědík · Answer 6 · 2014-04-11T15:18:19.883

2

Here is code which I wrote and works for me in HTML5 video cases and for flash player too;

$('video,audio').mediaelementplayer({
   mode: 'auto_plugin',
   defaultVideoWidth: 480, 
   defaultVideoHeight: 360,
   success: function (me) {
      whenPlayerReadyToPlay(me, function () {
         me.play();
      })
   }
});

function whenVideoReadyToPlay(me, callback) {
   if (me.pluginType !== 'flash') {
      me.addEventListener('loadstart', function (e) {
         callback();
      }, false);

      return;
   }

   if (me.attributes.preload === 'none') {
      $(me.pluginElement).ready(function (e) {
         callback();
      });
   }
   else {
      me.addEventListener('canplay', function (e) {
         callback();
      }, false);
   }
}

edited Apr 11 '14 at 15:18

answered Apr 11 '14 at 11:24

Martin Dědík

71
1
8

Wow this fixed it! the player was native HTML5 but changed to using Flash upon adding the `mode: 'auto_plugin'` attribute, is that normal? how do you find that attribute? Don't see it's listed in the documentation. – ayublin Apr 15 '14 at 09:12
I find it somewhere on Google :-) I didnt find it in documentation too. – Martin Dědík Apr 24 '14 at 08:32

score 2 · Answer 7 · answered Sep 12 '11 at 08:43

var player = new MediaElementPlayer('video', {
    startVolume: 0.8,
    features: ['playpause','progress'],
    autoplay: true,
    audioWidth: 250,
    audioHeight: 40
    }
);


player.play();

just create your own object and start it via play();

score 2 · Answer 8 · answered Nov 16 '11 at 19:55

Although user932056's suggestion didn't exactly work for me, I used the general idea at the top of my page which finally worked:

<script type="text/javascript">
$(document).ready(function() {
   $("div.mejs-container .mejs-button").trigger('click');
});
</script>

vida · Answer 9 · 2014-11-03T02:22:59.963

1

Here is the simplest way I know. I'm not sure if this is what you're looking for but if my understanding of your question is correct, this worked for me. I am using MediaElement 2.9.4.

<script>
    MediaElement('player1', {success: function(me) {    
    me.play();
    }});
</script>

edited Nov 03 '14 at 02:22

answered Nov 14 '12 at 07:05

vida

4,459
1
22
27

score 1 · Answer 10 · answered Mar 31 '11 at 22:00

1

here is the code:

$(document).ready(function () {

        $('video,audio').mediaelementplayer({ defaultVideoWidth: 480, defaultVideoHeight: 360 });

        setTimeout('eventClickTrigger()', 1000);
    });

    function eventClickTrigger() {

        $('.mep-overlay').trigger('click');
    }

simple, but took me a week

answered Mar 31 '11 at 22:00

Gencebay

481
2
8
15

so that code and the autoplay in the tag was working pretty well - but i'm Ajaxing in a bunch of content and it's kinda going haywire - doubling tripling up - and then the controls aren't working etc... anyways - something to keep in mind ! – sheriffderek Aug 06 '12 at 00:03

score 1 · Answer 11 · edited Mar 20 '15 at 10:48

1

Or you could have put autoplay and/or preload="auto" to the <video> tag that the jQuery above is referencing.

edited Mar 20 '15 at 10:48

Sinister Beard

3,570
12
59
95

answered May 19 '11 at 16:09

Mevo

21
4

score 0 · Answer 12 · answered Oct 21 '18 at 19:20

For those who have an issue with autoplay on safari iOS (or any other browser that rejecting autoplay ) there is a new policy that require a user action to play media(audio, video), any of the solutions mentioned above will not work. more details here https://webkit.org/blog/6784/new-video-policies-for-ios/.

The best workaround is to detect if the video is not playing using the success callback and then append a button with an action to play the video

var video = document.querySelector('video');
var promise = $j('.video-wrap .video').mediaelementplayer({
        autoplay: true,
        playsinline: 1,
        success: function(media, node, player) {
          if(media.paused){
                $( "body" ).append( "<button type="button" id='playvideo'>Play</button>" );
          }
        },
        error: function (e) {
        }
});
//add a click action to play video  
$( "#playvideo" ).click(function() {
        video.play()
});

Autoplay MediaElementPlayer

12 Answers12

Linked