Transition sans plomb de la vidéo à la vidéo en utilisant html5

J'essaie de créer une fonctionnalité où un utilisateur peut changer (aller et venir) entre plusieurs vidéos tout en conservant un seul audio cohérent. Pensez à pouvoir regarder un concert à partir d'angles multiples, mais en écoutant un seul audio. Le problème que j'ai avec cette fonctionnalité est qu'il ne peut y avoir un décalage entre les changements de vidéo ou l'audio ne sera plus synchronisé avec les vidéos (surtout vrai après de multiples changements).

J'ai essayé deux méthodes, toutes deux utilisant html5 uniquement (je préférerais ne pas utiliser Flash alors que j'aurai éventuellement un repli) qui n'ont pas fonctionné de façon transparente, bien que selon le navigateur et le matériel, il puisse être très proche.

Méthodes de base:

Méthode 1: préchargement de toutes les vidéos et modification du chemin de sortie de la vidéo à chaque clic à l'aide de javascript

Méthode 2: Précharger de nouveau la vidéo et utiliser plusieurs balises et changer entre elles en utilisant javascript à chaque clic.

Est-il possible d'obtenir l'une ou l'autre de ces deux méthodes pour fonctionner sans problème sans écart? Devrais-je utiliser un peu de tour de main, comme jouer les deux vidéos simultanément pendant une seconde avant de révéler la seconde et d'arrêter la première? Peut-on ne pas finir avec les joueurs html5? Peut-on être fait avec flash?

J'ai vu ce type de question à plusieurs reprises avec la vidéo et l'audio sans solution claire, mais ils avaient quelques mois et j'espérais qu'il y a maintenant une solution. Merci pour l'aide.

Il vaut la peine d'ajouter qu'il est possible avec l' API MediaSource proposée par Google. Cette API vous permet d'alimenter des données binaires arbitraires sur un seul élément vidéo. Ainsi, si vous partagez votre vidéo en morceaux, vous pouvez récupérer ces morceaux via XHR et les ajouter à votre élément vidéo, ils seront joués sans lacunes.

Actuellement, il est implémenté uniquement sur Chrome et vous devez activer l' Enable Media Source API on <video> elements dans chrome: flags pour l'utiliser. En outre, seul le conteneur WebM est actuellement pris en charge.

Voici un article sur HTML5Rocks qui démontre comment fonctionne l'API: vidéo "Stream" à l'aide de l'API MediaSource .

Un autre article utile qui parle de playlist fragmentée: Segmenting WebM Video et l'API MediaSource .

J'espère que cette implémentation sera adoptée et bénéficiera d'un soutien plus large pour les conteneurs multimédias.

MISE À JOUR JUN 2014 Le support du navigateur s'améliore progressivement: (Merci @Hugh Guiney pour le conseil)

Chrome Stable
FF 25+ a un drapeau media.mediasource.enabled [ MDN ]
IE 11+ sur Windows 8.1 [ MSDN ]

Avez-vous trouvé une meilleure façon de le faire?

J'ai implémenté une double lecture tampon utilisant deux balises vidéo. Un est utilisé pour la lecture en cours, et le second pour précharger la vidéo suivante. Lorsque la vidéo est terminée, "permuter" les balises:

 function visualSwap() { video.volume = video2.volume; video2.volume = 0; video.style.width = '300px'; video2.style.width = '0px'; }

Il a un comportement non déterministe, donc je ne suis pas satisfait à 100%, mais il vaut la peine d'essayer …

La modification de la balise SRC est rapide, mais pas claire. J'essaie de trouver la meilleure méthode pour un lecteur multimédia. Je crée et précharge la prochaine piste et la substitution de la src via "terminé" laisse un écart d'environ 10-20 ms, ce qui peut sembler petit, mais il suffit d'être remarquable , Surtout avec la musique.

Je viens de tester à l'aide d'un second élément audio qui se déclenche dès que le premier élément audio se termine par l'événement «terminé» et qui a marqué le même écart.

On dirait (sans utiliser de hacks élaborés) il n'y a pas une manière simple (ish) d'obtenir une lecture sans interruption, du moins en ce moment.

c'est possible. Vous pouvez vérifier ceci: http://evelyn-interactive.searchingforabby.com/ tout est terminé dans html5. Ils préchargent toutes les vidéos au début et commencent en même temps. Je n'ai pas encore eu le temps de vérifier comment ils le font exactement, mais peut-être que cela vous aide si vous vérifiez leurs scripts via Firebug

Après de nombreuses tentatives, j'ai fini par utiliser quelque chose de similaire à la Méthode 2. J'ai trouvé ce site http://switchcam.com et j'ai essentiellement copié leur approche. J'ai pré-tamponné au fur et à mesure que l'heure de début de la vidéo approchait et ensuite jouée automatiquement lorsque le point de départ des vidéos a frappé. J'ai joué simultanément les vidéos actuelles (dans un petit div – en tant que bonus d'interface utilisateur) et les utilisateurs pouvaient basculer entre les vidéos en changeant la "vue de l'écran principal". Comme toutes les vidéos jouaient à la fois, vous pouviez choisir l'audio et l'écart ne finissait pas par un problème.

Malheureusement, je n'ai jamais fini de résoudre mon problème exactement et je ne suis pas sûr que ma solution ait les meilleures performances, mais cela fonctionne bien avec une connexion rapide.

Merci de votre aide!