PlayElement Player

Question

Quiero eso cuando la página del sitio web cargada reproduce el video automáticamente.

Hice referencia a jQuery.js, MediaElementPlayer.js y MediaElementPlayar.min.css en mi página y la etiqueta de video agregada.

Intenté muchas maneras, por ejemplo autoplay = true Y use el código JavaScript pero no pude hacer que funcione.

Estoy usando BlogEngine.net 2.0.

¿Cómo puedo hacer eso?

Answer 1

Este es un error en mediaselementjs, Autoplay funciona para Native and Silverlight, pero necesita un poco de ayuda con Flash.

Puedes escuchar Poder jugar Evento y comience a jugar tan pronto como el reproductor Flash esté listo.

Los trucos de SetTimeOut pueden fallar en condiciones de carrera.

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

Puedes agregar el autoplay="true" atributo al <video> Etiqueta como se muestra a continuación:

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

Para jugar en todos los navegadores/dispositivos, puede usar jQuery para hacer referencia al objeto y llamar a su play() método.

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

Para obtener más información, puede verificar aquí.

Answer 3

Esto puede ser útil.

$('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 menos que pierda el punto, solo agregue 'Autoplay' a la etiqueta de video HTML5

Answer 6

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


player.play();

Simplemente cree su propio objeto y comience a través de Play ();

Answer 7

Aunque la sugerencia de User932056 no funcionó exactamente para mí, utilicé la idea general en la parte superior de mi página que finalmente funcionó:

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

Answer 8

Aquí está el código que escribí y funciona para mí en casos de video HTML5 y también para 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

Aquí está el código:

$(document).ready(function () {

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

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

    function eventClickTrigger() {

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

Simple, pero me llevó una semana

Answer 10

Aquí está la forma más sencilla que conozco. No estoy seguro de si esto es lo que está buscando, pero si mi comprensión de su pregunta es correcta, esto funcionó para mí. Estoy usando MediaElement 2.9.4.

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

Answer 11

O podrías haber puesto Autoplay y/o preload="auto" hacia <video> etiqueta que la jQuery anterior está haciendo referencia.

Answer 12

Para aquellos que tienen un problema con autoplay En Safari iOS (o en cualquier otro navegador que rechace la autoplay) hay una nueva política que requiere una acción del usuario para reproducir medios (audio, video), cualquiera de las soluciones mencionadas anteriormente no funcionará. Más detalles aquí https://webkit.org/blog/6784/new-video-policies-for-ios/.

La mejor solución es detectar si el video no se reproduce usando el success devolución de llamada y luego agregar un botón con una acción para reproducir el 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()
});