Personnalisation JWPLAYER et streaming audio

J'ai deux questions en utilisant JWPLAYER. J'ai cherché dans beaucoup d'endroits mais n'ai pas obtenu la réponse, particulièrement concernant audio streaming dans JWPLAYER.Personnalisation JWPLAYER et streaming audio

Question1:

Je travaille sur transcoder les fichiers vidéo en m3u8 et ts morceaux en utilisant aws-elastic-transcoder et vidéos streaming successfull.

Maintenant, je veux diffuser les fichiers audio. Les fichiers audio suivent-ils le même processus de division en blocs m3u8 et ts? De quelles configurations supplémentaires a-t-il besoin? Quels fichiers audio sont pris en charge, J'ai également besoin de la qualité audio HD basculer en audio. Comment l'atteindre?

Question2:

Je souhaite personnaliser mon JWPLAYER, en particulier AUDIO player. Je veux ajouter différents boutons dans le control-bar.

Un bouton de lecture aléatoire
Une image dans la barre de contrôle
Un bouton de téléchargement
Un bouton pour afficher la liste des files d'attente actuelle. (Comment ajouter un fichier audio HLS à la file d'attente)
Un bouton de répétition
Un bouton paramètres

Ainsi, base allié je veux personnaliser le joueur complet. Comment puis-je atteindre cet objectif. Comment puis-je changer tout le HTML JWPLAYER.

Veuillez indiquer une URL de référence si disponible.

Voici mes options,

JWOptions = { 
     id: "myPlayer2", 
     "playlist": [{ 
     "file": "https://s3.amazonaws.com/mypath1/index.m3u8", 
     "image": "assets/img/bg1.jpg", 
     "title": "Sintel Trailer", 
     "mediaid": "ddra573" 
     }, { 
     "file": "https://s3.amazonaws.com/mypath2/index.m3u8", 
     "image": "assets/img/bg2.jpg", 
     "title": "Big Buck Bunny Trailer", 
     "mediaid": "ddrx3v2" 
     }], 
     width: 800, 
     height: 40, 
    }

Merci.

Source

2017-05-17 Sravan

environ 1): vous pouvez convertir en fichiers audio AAC (m4a) comme pour la vidéo. Vous pouvez utiliser le codec AAC-LC pour la qualité non supérieure et HE-AAC pour l'audio de haute qualité. La configuration de jwPlayer est la même que celle de la vidéo, cela fonctionne, mais vous pouvez mieux l'installer en fonction de vos besoins. Environ 2): vous pouvez ajouter un élément à la barre de contrôle comme dans cet exemple http://codepen.io/fdambrosio/pen/XRpBvW mais je pense que l'ajout de 4 ou 5 éléments ne s'intègre pas bien dans la barre de contrôle jwplayer par défaut, car en mode mobile/petite taille la barre de contrôle est minimal et jwplayer montre des articles avec un style différent.

HTML:

<body> 
    <div id='radioplayer'></div> 
</body>

CSS:

#change-speed {font-size: 16px; color: white; padding-left: 5px; margin-right: 5px;}

JS:

var playerInstance = jwplayer("radioplayer"); 
    playerInstance.setup({ 
    file:'//video.radioradicale.it:1935/store-86/_definst_/mp4:2015/01/MQ781257.mp4/playlist.m3u8', 
    width:544, 
    height: 306, 
    androidhls: true, 
    autostart: true, 
}); 

var tag; 

    jwplayer("radioplayer").on('ready', function(){ 

     if (jwplayer("radioplayer").getProvider().name == "html5" | jwplayer("radioplayer").getProvider().name == "shaka") { 
      console.log('1X'); 
      var normale = document.createElement("div"); 
      normale.id = "change-speed"; 
      normale.setAttribute('class','jw-reset jw-text jw-icon-inline'); 
      normale.innerHTML = "1x"; 
      document.getElementsByClassName('jw-controlbar-right-group')[0].appendChild(normale); 

       tag = document.querySelector('video'); 
       tag.defaultPlaybackRate = 1.0; 
       tag.playbackRate = 1.0; 

       $('#change-speed').on('click', function() { 
     console.log('test'); 
       speed_bfr = tag.playbackRate; 

       console.log(speed_bfr, 'prima'); 
       switch(speed_bfr) { 
       case 1.0: 
       console.log('1.0'); 
       normale.innerHTML = "1.5x"; 
       tag.playbackRate = 1.5; 
       break; 

       case 1.5: 
       console.log('1.5'); 
       normale.innerHTML = "1x"; 
       tag.playbackRate = 1.0; 
       break; 

       } 

      }); 

     } 
    });

Vous pouvez également ajouter un seul bouton (ex de téléchargement.) Sur l'image de l'affiche, comme décrit ici : https://developer.jwplayer.com/jw-player/demos/basic/add-download-button/

Sinon, vous pouvez développer votre barre de contrôle personnalisée, ou ajouter des boutons près du lecteur, en utilisant l'API JwPlayer: https://developer.jwplayer.com/jw-player/docs/javascript-api-reference/

Source

2017-05-17 12:55:56 Francesco

Personnalisation JWPLAYER et streaming audio

Répondre

Questions connexes