11485 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
après avoir capturé quelques dizaines de timelapses avec mon smartphone (Samsung Galaxy A20e, 200€) et la free app adéquate, j'ai créé la page web suivante
https://sentrais.eu/timelapse/timelapse.htm

désolé si le lien sur Alsacréations est désactivé
qui semble parfaitement fonctionner.

Où, ce jour 22 vidéos peuvent être lues à-la-suite dans un même lecteur web, grâce à une simple liste de numéros à cliquer.

Un unique lecteur, personnalisé par javascript où apparaissent utilement le temps de lecture s'écoulant et la durée globale de chaque vidéo, a été mon fun créatif ...

Considérant le débit moyen d'une connexion à Internet (et selon quel visiteur : grand-moyen-petit citadin ?), j'ai opté pour conserver autant une haute qualité d'image (1280x720, 2Mo/sec) (-"Fi ! de Youtube, de Facebook") que la fluidité de lecture escomptée : cela est mon compromis, avec une prudence additionnelle pour éviter, dans mon lecteur le redoutable NaN de la durée globale, par une ligne dans la fonction suivante :
function handler(e)
{
...
video.addEventListener('canplay', (event) => {
setTimeout(function(){Duree();vid.play();pp.style.background='#438566'},1500);
});
}

Or, et ce dont je veux traiter avec vous, c'est que je ne doute pas qu'une compilation javascript plus intelligente puisse être menée. Notamment en associant d'emblée les numéros de la liste (en les marquant) avec la vidéo associée, par une autre écriture que celle que j'ai réalisée.

Qu'en feriez-vous, selon vous ? Une super double-triple boucle intelligente ?

Et qui n'entamerait pas l'efficacité actuelle, évidemment ... Voyez le code source.

Bonne découverte, et merci d'avance pour vos lumières !

Note : chacune des vids présentée est lisible sur FireFox ou Chrome, et d'un clic-droit téléchargeable en son format .mp4 ... sans filigrane. Et sans virus.
Modifié par niuxe (19 Jun 2020 - 05:14)
Modérateur
Et l'eau,

Arrival a écrit :

désolé si le lien sur Alsacréations est désactivé


Pour insérer un lien dans le sujet, il est préférable de renseigner l'url. Je me suis permis de rééditer le post pour que cela fonctionne. En effet, le lien fonctionne.
Modifié par niuxe (19 Jun 2020 - 05:15)
Bonjour,
je pense avoir simplifié efficacement le javascript de la façon suivante, en supprimant toute écriture de onclick sur chacun des liens distincts, et en intégrant dans la boucle for l'exécution générique de 2 fonctions :
var video_player = document.getElementById('video_player'),
links = video_player.getElementsByTagName('a');

for (var i=0; i<links.length; i++) {
	links[i].addEventListener('click', handler);
	links[i].addEventListener('click', function(){alterner3(this.id)});
}
J'ai également re-converti toutes les vids en .webm, et soulagé leur volume (total : de 2.3Go à 441Mo) sans altérer leur qualité à l'écran. Cela aide à la lecture ...

Bon ! comme tout cela fonctionne et que je suis satisfait, je marque le sujet comme résolu.

À +
Modifié par Arrival (29 Jun 2020 - 19:04)