Forums Développement Multimédia

Aller au contenu

Modifier dynamiquement la source d'un lecteur vidéo

javascript video.js video jquery

2 réponses à ce sujet

#1 Daelis

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 11 July 2014 - 14:48 PM

Salut :)

Je travaille sur un lecteur vidéo développé à l'aide de video.js. J'ai créé un bouton HD qui permet à l'utilisateur de switcher entre le mode HD et SD d'une vidéo.


vjs.HdToggle.prototype.onClick = function() {
var mp4Vid = document.getElementById('mp4Source');
var webmVid = document.getElementById('webmSource');
var oggVid = document.getElementById('oggSource');
if(vjs.options.isHD == "false") {
  this.player_.pause();
  $(mp4Vid).attr('src', vjs.options.urlVideoHD);
  $(webmVid).attr('src', vjs.options.urlVideoHD);
  $(oggVid).attr('src', vjs.options.urlVideoHD);
  vjs.options.isHD = "true";
         this.player_.load();
         this.player_.play();
         console.log(vjs.options.isHD);
         console.log("isHD");
} else if(vjs.options.isHD == "true") {
  this.player_.pause();
  $(mp4Vid).attr('src', vjs.options.urlVideo);
  $(webmVid).attr('src', vjs.options.urlVideo);
  $(oggVid).attr('src', vjs.options.urlVideo);
  vjs.options.isHD = "false";
  this.player_.load();
  this.player_.play();
  console.log(vjs.options.isHD);
  console.log('noHD');
}
}
 

Voici la partie de code qui gère le changement de source dynamiquement. Elle fonctionne sur Firefox, mais pas sur Chrome. Ca fait un petit moment que je cherche déjà à résoudre ce problème mais je n'ai aucune solution et j'espère que quelqu'un pourra m'aider et me débloquer.

Merci d'avance pour votre aide :).

#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2530 messages

Posté 17 July 2014 - 18:55 PM

Salut,

Tu as la version en ligne ?

Aucune erreur dans la console ?
Que remontent les log ?

edit : je n'ai pas encore regardé comment ça fonctionne, mais tu utilises bien jQuery ?

Pourquoi faire un document.getElementById( ) ?


var mp4Vid = document.getElementById('mp4Source');
// et plus loin ...
$(mp4Vid).attr('src', vjs.options.urlVideoHD);
 

Alors que tu pourrais plutôt faire

var mp4Vid = $('#mp4Source');
// ...
mp4Vid.attr('src', vjs.options.urlVideoHD);

// voir même par convention, nommer le noeud avec un $, ce qui donnerait
var $mp4Vid = $('#mp4Source');
//...
$mp4Vid.attr('src', vjs.options.urlVideoHD);
 

edit 2 :

Et vu que tu cibles probablement des navigateurs récents et ie8+, si vraiment tu veux utiliser du javascript sans jQuery, tu peux faire

var $mp4Vid = document.querySelector('#mp4Source');
 

mais bon, vu que jQuery est chargé et que la différence de perf' doit être ridicule, autant utiliser la syntaxe jQuery ;-)
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#3 Daelis

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 18 July 2014 - 08:25 AM

Salut,
Merci pour ta réponse !

Ca fonctionne parfaitement. C'est vrai qu'une fois que j'y étais continuer d'utiliser jQuery est beaucoup plus logique.

Bonne journée à toi,
peut être à bientôt sur le forum.

Daelis.


PS : J'y pense, tu aurais une idée de comment je peux faire pour relancer la vidéo au moment où l'utilisateur c'est arrêté lorsqu'il a cliqué sur le bouton HD ?

edit : Je viens de retester, bizarrement ça marche 1 fois de temps en temps.... Je comprends pas vraiment pourquoi ça me fait ça...



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP