Lecture automatique de MediaElementPlayer

Question

Je veux que lorsque la page du site Web est chargée, lise la vidéo automatiquement.

J'ai fait référence à jquery.js, mediaelementplayer.js et mediaelementplayar.min.css sur ma page et j'ai ajouté une balise vidéo.

J'ai essayé de nombreuses façons, par exempleautoplay = true et utilisez du code javascript mais je n'ai pas pu le faire fonctionner.

J'utilise BlogEngine.Net 2.0.

Comment puis-je faire cela?

Answer 1

Il s'agit d'un bogue dans MediaElementJS, la lecture automatique fonctionne pour native et silverlight, mais a besoin d'un peu d'aide avec Flash.

Vous pouvez écouter l'événement canPlay et commencer à jouer dès que le lecteur Flash est prêt.

Les astuces setTimeout peuvent échouer dans des conditions de course.

$('#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

Vous pouvez ajouter l'attribut autoplay="true" à la balise <video> comme indiqué ci-dessous:

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

Pour le lire sur tous les navigateurs / appareils, vous pouvez utiliser jQuery pour référencer l'objet et appeler sa méthode play().

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

Pour plus d'informations, vous pouvez consulter ici .

Answer 3

Cela peut être 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

Sauf si je rate le point, ajoutez simplement "lecture automatique" à la balise vidéo HTML5

Answer 6

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


player.play();

créez simplement votre propre objet et démarrez-le via play ();

Answer 7

Bien que la suggestion de user932056 n'ait pas vraiment fonctionné pour moi, j'ai utilisé l'idée générale en haut de ma page qui a finalement fonctionné:

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

Answer 8

Voici le code que j'ai écrit et qui fonctionne pour moi dans des boîtiers vidéo HTML5 et pour flash player aussi;

$('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

voici le code:

$(document).ready(function () {

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

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

    function eventClickTrigger() {

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

simple, mais cela m'a pris une semaine

Answer 10

Voici le moyen le plus simple que je connaisse. Je ne sais pas si c'est ce que vous recherchez, mais si ma compréhension de votre question est correcte, cela a fonctionné pour moi.J'utilise MediaElement 2.9.4.

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

Answer 11

Ou vous pourriez avoir mis autoplay et / ou preload="auto" à la balise <video> que le jQuery ci-dessus fait référence.

Answer 12

Pour ceux qui ont un problème avec autoplay sur Safari iOS (ou tout autre navigateur qui rejette la lecture automatique), il existe une nouvelle politique qui nécessite une action de l'utilisateur pour lire le média (audio, vidéo), aucune des solutions mentionnées ci-dessus ne seratravail. plus de détails ici https://webkit.org/blog/6784/nouvelles-politiques-vidéo-pour-ios / .

La meilleure solution de contournement consiste à détecter si la vidéo n'est pas en cours de lecture à l'aide du rappel success, puis à ajouter un bouton avec une action pour lire la vidéo

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