Frotter la vidéo HTML5

J'ai été à la recherche d'une solution où je peux "frotter" à travers la vidéo HTML5. Je n'ai pas trouvé un encore et était sur le point de commencer à écrire mon propre. Mais avant de faire ça, je pensais que ça allait faire un certain sens de l'exécuter passé, ALORS premier.

Avant d'entrer dans mon approche, voir ceci:

http://www.kokokaka.com/demo/bluebell_ss10/site

Ce site de cours est construit en Flash, mais sert d'un exemple de ce que j'aimerais réaliser à l'aide de HTML5.

J'ai expérimenté avec la playbackRate (-1) l'attribut de la balise vidéo sans beaucoup de chance. Je soupçonne que c'est parce que le codage (ogg, mp4, vp8) sont mieux adaptés à la lecture vers l'avant.

avec ça, je vois deux approches possibles:

  1. créer deux vidéos, l'une pour le jeu vers l'avant, et un autre en arrière pour jouer. bien sûr, cela double la taille de toutes les vidéos qui n'est pas idéal.

  2. diviser la vidéo en jpg images et d'échanger les images. Cela signifierait que je n'ai pas de son, mais dans mon application particulière, ce n'est pas un problème.

J'ai l'impression que la deuxième option est la mieux adaptée pour mon application particulière et permet une certaine souplesse dans la lecture. Qu'en pensez-vous?

  • Ne sais pas beaucoup sur la vidéo HTML5, mais avez-vous essayé la manipulation de la propriété currentTime? dev.w3.org/html5/spec/...
  • non, mais je crois que je vais être présenté avec les mêmes problèmes. je vais examiner de plus. merci!
  • bonjour, avez-vous résolu ce problème?
  • Rien de nouveau avec cette @CaseyYee ?
InformationsquelleAutor Casey Yee | 2011-11-18
  1. 3

    Générer une série de vignettes de votre vidéo par tous les moyens.
    Une fois que vous avez tous vos pouces à partir de la vidéo, vous pouvez utiliser quelque chose comme cela, qui détecte les mouvements de la souris et remplace la vignette sur la base des mouvements -- placez les frotter.

    Exemple 1: http://codepen.io/simsketch/pen/gwJBRg

    Exemple 2: http://jsfiddle.net/simsketch/x4ko1x1w/

    ou pour quelque chose de moins verbeux, si vous voulez horizontalement concaténer toutes les vignettes des images dans un sprite, vous pouvez utiliser ceci, un autre bel exemple de l'passez gommage.

    http://jsfiddle.net/simsketch/r6wz0nz6/152/

    mais vous devez lier l'événement à mousedown au lieu de mousemove

    ce n'est pas vraiment vous donner l'effet désiré, de sorte que vous devez combiner mousedown et mousemove que ce qui est suggéré ici: https://stackoverflow.com/a/1572688/1579789

    ce serait plutôt de vous donner l'effet que vous recherchez, mais sans l'aide de la vidéo HTML5, et sans le son.

    cependant, vous pouvez ajouter de l'audio ainsi si vous liez le mouvement de la souris à un code temporel dans la piste audio, je suppose. à ce stade, vous pourriez probablement tout aussi facilement manipuler une piste vidéo à la place.

    InformationsquelleAutor Elon Zito
  2. 1

    je pense que ce que vous voulez peut être fait avec popcornjs, disponible à l' popcornjs.org

    • Je vais jeter un oeil dans cette. Merci
    InformationsquelleAutor albert
  3. 0

    M'est arrivé de me trouver aujourd'hui à cette question après la en vedette histoire sur la page d'accueil de Google a été ce, qui dispose d'une barre de lecture vidéo.

    Je n'avais jamais vu une vidéo de l'épurateur avant et a été soufflé!

    Puis j'ai trouvé https://www.emergeinteractive.com/demos/javascript-video-scrubber/, qui décrit la manière de l'atteindre.

    Ces gens ont peut-être inventé ce concept pour Nike ans.

    Ils offrent un extrait de code et un lien vers Github:

    window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      ||  
    window.msRequestAnimationFrame     || 
    function( callback ){
        window.setTimeout(callback, 1000 / 60);
    };
})();

(function animloop(){
    requestAnimFrame(animloop);
    targetStep = Math.max( Math.round( getYOffset() / 30 ) , 1 ); //what frame to animate to
    if(targetStep != step ) { step += (targetStep - step) / 5; } //increment the step until we arrive at the target step
    changeFrame();
})();

function changeFrame() {
    var thisStep = Math.round(step); //calculate the frame number
    if(images.length > 0 && images[thisStep]) { //if the image exists in the array
        if(images[thisStep].complete) { //if the image is downloaded and ready
            $('#video').attr('src',images[thisStep].src); //change the source of our placeholder image
        }
    }
}
    InformationsquelleAutor Ryan