Autoplay MediaElementPlayer

Question

Lo voglio quando la pagina del sito Web è stata caricata automaticamente.

Ho fatto riferimento a jquery.js, mediaelementplayer.js e mediaelementplayar.min.css nella mia pagina e ho aggiunto il video tag.

Ho provato così tanti modi, ad es. autoplay = true E usa il codice JavaScript ma non riuscivo a farlo funzionare.

Sto usando blogengine.net 2.0.

Come lo posso fare?

Answer 1

Questo è un bug in MediaElementJS, Autoplay funziona per Native e Silverlight, ma ha bisogno di un piccolo aiuto con Flash.

Puoi ascoltare posso giocare evento e inizia a giocare non appena il giocatore flash è pronto.

I trucchi di setTimeout potrebbero fallire in condizioni di gara.

$('#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!');
    }
});

Answer 2

Puoi aggiungere il autoplay="true" attributo a <video> Tag come mostrato di seguito:

<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>

Per riprodurlo su tutti i browser/dispositivi, è possibile utilizzare jQuery per fare riferimento all'oggetto e chiamare il suo play() metodo.

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

Per ulteriori informazioni, puoi controllare qui.

Answer 3

Questo può essere utile.

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

Answer 4

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

Answer 5

A meno che non mi manchi il punto, aggiungi semplicemente "autoplay" al tag video HTML5

Answer 6

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


player.play();

Basta creare il tuo oggetto e avviarlo tramite Play ();

Answer 7

Sebbene il suggerimento dell'utente932056 non funzionasse esattamente per me, ho usato l'idea generale nella parte superiore della mia pagina che alla fine ha funzionato:

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

Answer 8

Ecco il codice che ho scritto e lavora per me in casi video HTML5 e anche per Flash Player;

$('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);
   }
}

Answer 9

Ecco il codice:

$(document).ready(function () {

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

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

    function eventClickTrigger() {

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

Semplice, ma mi ci è voluto una settimana

Answer 10

Ecco il modo più semplice che conosco. Non sono sicuro che questo sia quello che stai cercando, ma se la mia comprensione della tua domanda è corretta, questo ha funzionato per me. Sto usando MediaElement 2.9.4.

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

Answer 11

Oppure avresti potuto mettere automaticamente e/o preload="auto" al <video> tagga che la jQuery sopra fa riferimento.

Answer 12

Per coloro che hanno un problema con autoplay Su safari iOS (o qualsiasi altro browser che rifiuta il pilota automatico) esiste una nuova politica che richiede un'azione dell'utente per riprodurre media (audio, video), nessuna delle soluzioni sopra menzionate non funzionerà. Maggiori dettagli qui https://webkit.org/blog/6784/new-video-policies-for-ios/.

La soluzione migliore è rilevare se il video non è riprodotto usando il success callback e quindi aggiungere un pulsante con un'azione per riprodurre il 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()
});