Le déclenchement d'une vidéo en lecture automatique basé sur la position de défilement

Je suis en train d'écrire un script qui utilise l'effacement, de l'animation de la scrollorama.js script. J'espère être en mesure de mettre en œuvre une vidéo pour la lecture automatique à certains marqueurs dans le défilement de la profondeur: c'est à dire, quand une page vidéo a anéanti l'autre, et est maintenant entièrement visible. J'ai compris comment mesurer de défilement de la profondeur, je suis connecté avec succès dans ma console. J'ai compris comment mesurer la profondeur, j'ai défilé, mais peut-être que je suis si fatigué, je ne sais pas comment faire pour demander la vidéo pour lire automatiquement le défilement de la profondeur. J'espère que c'est une question juridique, et que je peux obtenir de l'aide. A quelqu'un là-bas essayé cela avant? Voici le code à ce jour.

enter code here $(document).ready(function() {

$(window).scroll(function(e) {

  var scrollAmount = $('body').scrollTop();
  console.log(scrollAmount);

});

    var controller = $.superscrollorama();
    var pinDur = 800;   
    //create animation timeline for pinned element
var pinAnimations = new TimelineLite();

//pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5)
pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5) 
pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5);
pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5);
//pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));


controller.pin($('#content_wrapper'), pinDur, {
    anim:pinAnimations, 
    onPin: function() {
        $('#content_wrapper').css('height','100%');
    }, 
    onUnpin: function() {
        $('#content_wrapper').css('height','1000px');
    }


});

});

OriginalL'auteur nickyr | 2013-03-24

J'ai compris cela, j'ai donc la réponse à ma propre question avec l'aide de beaucoup d'autres réponses rapiécées ici!

Si quelqu'un est intéressé, le html est simple:

    <div id="videoHolder"></div>

Jquery a été aussi simple:

        $(function(){

    $(window).scroll(function(e) {

        var scrollAmount = $('body').scrollTop();   
        console.log(scrollAmount);


    if(scrollAmount >="theamountyouwant" && scrollAmount <= "theotheramountyouwant") {


        $("#videoHolder").html(
            '<video width="1200" height="700" autoplay>' +

         '<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.webm" type="video/webm"></source>'  +
        '<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"></source>' +

         '</video>');

c'est l'ajout de la vidéo à la DOM lorsque défile, pas autoplaying une vidéo qui est déjà sur le DOM, je pense que c'est mieux en cas d'utilisation puisque l'utilisateur va effectivement voir la vidéo dans la position actuelle au lieu de la vidéo apparaissant soudainement.

OriginalL'auteur nickyr

il suffit d'ajouter le script à partir de ci-dessous et ajouter playonscroll param votre balise vidéo de n'importe où sur une page.

Ainsi, à certains moments, il est nécessaire d'utiliser différents de défilement conteneur que le corps, parfois c'est pas évident, de sorte que le code suivant fonctionne comme un charme pour moi:

setInterval(function () {
    $('video[playonscroll]').each(function () {
        var videoElement = $(this)[0]; 
        var eTop = $(this).offset().top;
        var elementOffestY = (eTop - $(window).scrollTop());
        var videoOffset = [elementOffestY, elementOffestY+$(this).height()];
        if ((videoOffset[0] < 100) && (videoOffset[1] > 350)) {
            console.log('play');
            if (!videoElement.playing) {
                videoElement.play();
            }
        } else {
            if (videoElement.playing) {
                videoElement.pause();
            }
        }
    });
},300);

dans le cas si vous utilisez toujours des corps de récipient pour faire défiler il suffit de changer setInterval $(window).faites défiler

Et n'oubliez pas de définir la propriété pour la Vidéo de la balise de l'élément:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return (this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

OriginalL'auteur Andrey Merkulov

Vous devez vous connecter pour publier un commentaire.