134.3.84.225: /* GSAP - Slider für Videostart */

2022-08-26T07:09:25Z

GSAP - Slider für Videostart

134.3.84.225: Die Seite wurde neu angelegt: „== Komplette Beispielskripte == === GSAP - Slider für Videostart === Videos mit Ton werden erst nach einer Userinteraktion wie ein Klick auf Play gespielt (Sa…“

2022-08-26T07:08:57Z

Die Seite wurde neu angelegt: „== Komplette Beispielskripte == === GSAP - Slider für Videostart === Videos mit Ton werden erst nach einer Userinteraktion wie ein Klick auf Play gespielt (Sa…“

Neue Seite

== 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>

← Nächstältere Version		Version vom 26. August 2022, 07:09 Uhr
Zeile 96:		Zeile 96:
	});		});

−	</~~javascript~~>	+	</syntaxhighlight>

HTML5 - Video Snippets - Versionsgeschichte

134.3.84.225: /* GSAP - Slider für Videostart */

134.3.84.225: Die Seite wurde neu angelegt: „== Komplette Beispielskripte == === GSAP - Slider für Videostart === Videos mit Ton werden erst nach einer Userinteraktion wie ein Klick auf Play gespielt (Sa…“