HTML5 - Video Snippets

Komplette Beispielskripte

GSAP - Slider für Videostart

Videos mit Ton werden erst nach einer Userinteraktion wie ein Klick auf Play gespielt (Safari, Firefox). Ein Slider Drag funktioniert nicht. Aber man kann den Klick bei der ersten Sliderberührung simulieren und das Video sofort wieder stoppen. Ab diesem Moment können wir den Player auch selbst steuern. Z.B. wenn der Slider komplett gezogen ist.

$(document).ready(function(){

  //init
  const myVideo = document.getElementById('myVideo')
  //const myAudio = document.getElementById('myAudio')

  tl=gsap.timeline({paused:true});
  tl.to('#intro',{backgroundColor:'#28282D', color:'#6E6E75'})
      .fromTo('#myVideo',{opacity:0},{opacity:1})
      .to('#video-overlay',{backgroundColor:'transparent', backgroundImage:'none'},'<')
      .to('#intro-slider',{opacity:0,display:"none"})
      .fromTo('#btn-skip',{opacity:0},{opacity:1})
  var initClick = false;
  $('#slider-plate').on('mousedown', function(){
      //myAudio.play();
    if(!initClick){
      console.log("initial click to prevent autoplay-blocking")
      //myVideo.play();
      //myVideo.pause();
      initClick=true;
    }
  })

  // gsap
  gsap.registerPlugin(InertiaPlugin)
  Draggable.create("#slider-plate",{
    type: "x",
    bounds: "#slider-bounds",
    inertia:true,
    edgeResistance: 1,
    dragResistance:0,
    duration: {min:0.3, max: 0.5},
    snap: {
      x: function(xPos) {
        if(xPos < this.maxX){return 0}
        else{return xPos}
      },
    },
    onThrowComplete: function(){ 
      //console.log("intertia flick complete ended at " + this.x + " out of " + this.maxX);
      if(this.x == this.maxX){
        tl.play()
        console.log("play video")
        var promise = myVideo.play()
        if (promise !== undefined) {
          promise.catch(error => {
            console.log("autoplay prevented by browser")
            console.log(error)
            // show video controls
            video = document.getElementById('myVideo')
            video.setAttribute("controls","controls") 

          }).then(() => {
            console.log("player started")
          });
        }
      }else {
        myVideo.pause();
        //myAudio.pause();
        console.log("pause video")
      }
    },
    onDragStart: function(){
      // stop autosliding
      //tl.progress(0);
      tlSimDrag.pause();
    },
  });


  // toggle controls
  function toggleControls() {
    if (video.hasAttribute("controls")) {
        video.removeAttribute("controls")   
    } else {
        video.setAttribute("controls","controls")   
    }
  }
  // simulate a drag to notice the user
  tlSimDrag = new gsap.timeline({ 
    defaults:{ease: "power2.out"},
    repeat: -1, 
    delay: 1,
    repeatDelay:3,
  });
  
  tlSimDrag.to('#slider-plate',0.7,{x:100}).to('#slider-plate',1.5,{
    x:0,
    delay: 0.1
  });
});