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.

<syntaxhighlight lang="javascript"> $(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
 });

});

</javascript>