MediaElement.js Modifier la source de la vidéo sur un clic

Dans le MediaElement.js je suis en train de faire un "multi" lecteur vidéo. Plus ou moins, je vais avoir des vignettes de changement de la source de la vidéo basée sur ce que l'utilisateur clique sur.

J'ai réussi à le faire pour le HTML5 source à l'aide de

<img src="http://mydomain.com/mysouceimage.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/BTBW.m4v';" />

<img src="http://mydomain.com/mysouceimage-2.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/myVideo-2.m4v';" />

MAIS cela ne fonctionne que pour le lecteur HTML5 et pas le Flash tomber en arrière.
Je suis l'aide de la base balise vidéo et de laisser mediaelement.js ne la reprise du travail.
Je pensais que le changement de la source comme dans l'exemple ci-dessus pourrait fonctionner, mais il ne le fait pas.

Je veux la vidéo d'arrêter et de passer à la suivante lorsque l'image suivante est sélectionnée et vice versa avec le lecteur Flash de secours.

Est-il un moyen facile de faire cela. Je n'ai pas vu trop de documentation sur la façon de passer dynamiquement des vidéos avec l'Mediaelement.js des trucs.

Toutes les suggestions sont grandement appréciés.

source d'informationauteur ClosDesign

  1. 19

    Si vous utilisez le lecteur avec l'API, vous pouvez utiliser le bouton "setSrc" la méthode.

    Exemple:

    <script>
var player = new MediaElementPlayer('video', {
    defaultVideoWidth: 960,
    defaultVideoHeight: 410,
    features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'], 
    success: function (mediaElement, domObject) {}
});

//... sometime later

player.setSrc('urlToVid.mov');
player.play();
</script>
  2. 2

    Vous ne pouvez pas changer la source du fichier vidéo. Vous devez supprimer le mejs div, créer une nouvelle vidéo html5, et ensuite appeler mediaelement sur elle à nouveau. En répétant ce processus, vous êtes en avoir générer un nouveau flash de secours à chaque vidéo, en tant que de besoin.

  3. 1

    il a travaillé pour moi à charger le support d'objet après le src avait été changé .. comme:

    var player = new MediaElementPlayer('#vid'/*, Options */);        

$('#the_url').on('keypress',function(e){    
    if (e.which == 13) {
        player.pause();
        player.setSrc($('#the_url').val());        
        player.media.load();
    }
});
  4. 1

    Old post - pensé que je voudrais ajouter ma résolution

    Remarque: l'appel de load() sera également l'auto-jouer la vidéo. Ce code suppose également que votre entrée a une valeur déjà là, et c'est un enfant de la balise d'ancrage qui a été cliqué.

    $('#idThatSwitches').click(function (e) {
    //get youTubeId
    var youTubeId = $(this).find('input[type="hidden"]').val();

    //switch out player's video source and reload
    var player = $('#idOfYourPlayer')[0].player.media;
    player.setSrc('http://youtube.com/watch?v=' + youTubeId);
    player.load();
});
  5. 0

    Puisque cela a pris beaucoup de temps pour moi de m'en occuper, je vais poster ce que j'ai trouvé ici. J'ai utilisé le MediaElementJS WordPress plug-in. Pour changer la source, vous pouvez obtenir une référence à l'élément média player comme ceci:

    $('#wp_mep_1')[0].player.media

    La raison pour cela est parce que dans WordPress le plug-in ne vous donne pas une variable d'appeler des fonctions comme .load() ou .play(). Donc, j'ai finalement compris que c'était la façon dont vous pouvez obtenir une référence à l'acteur inséré par le plug-in.

    Donc pour modifier la src:

    var player = $('#wp_mep_1')[0].player.media;
if(player.setSrc)
    player.setSrc('xyz.mp4');
  6. 0

    Je vais prendre mon tour à ressusciter une vieille question.

    Je ne sais pas si quelque chose a changé dans le MediaElement plugin, mais aucune des solutions ci-dessus a fonctionné pour moi à 100%, certains ont travaillé partiellement et certains n'ont pas de travail du tout. Un couple de questions que j'ai rencontrées, je ne pouvais charger la vidéo dans un élément si il n'y avait pas déjà une précédente vidéo chargement et la lecture, ce n'était pas bon pour moi, car il était destiné à être utilisé comme une liste de lecture de sélection. L'autre question était pour quelque raison que ce soit la vidéo ne se charge pas tout le chemin et tout simplement arrêter quelques secondes.

    Ci-dessous, cependant, est de travailler pour moi que de Oct '15.

    <a href="http://www.youtube.com/watch?v=VIDEO-ID" onclick="
  playerObject.pause();
  playerObject.setSrc(this.href);
  playerObject.media.load();
  playerObject.load();
  return false
">
<img src="yourimg">
</a>

    J'aime utiliser Un tage pour m'aider avec la mise en forme cliquable objets comme cela, préserve également ouvrir dans une nouvelle fenêtre/onglet fonctions.