video erst abspielen wenn classe aufgerufen wird

[vmd]

hallo, ich habe in diesen ioslider
ein video eingebunden.

Nun möchte ich, dass es erst abspielt, wenn der bestimmte (bestimmte classe) im viewport erscheint.

Auf der Seite habe ich folgendes gefunden:

<script type="text/javascript">
            $(document).ready(function() {
    
                $('.iosSlider').iosSlider({
                    desktopClickDrag: true,
                    snapToChildren: true,
                    infiniteSlider: true,
                    navSlideSelector: '.sliderContainer .slideSelectors .item',
                    onSlideComplete: slideComplete,
                    onSliderLoaded: sliderLoaded,
                    onSlideChange: slideChange,
                    autoSlide: true,
                    scrollbar: true,
                    scrollbarContainer: '.sliderContainer .scrollbarContainer',
                    scrollbarMargin: '0',
                    scrollbarBorderRadius: '0',
                    keyboardControls: true
                });
            
            });
            
            function slideChange(args) {
                        
                $('.sliderContainer .slideSelectors .item').removeClass('selected');
                $('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
            
            }
            
            function slideComplete(args) {
                
                if(!args.slideChanged) return false;
                
                $(args.sliderObject).find('.text1, .text2').attr('style', '');
                
                $(args.currentSlideObject).find('.text1').animate({
                    right: '100px',
                    opacity: '0.8'
                }, 400, 'easeOutQuint');
                
                $(args.currentSlideObject).find('.text2').delay(200).animate({
                    right: '50px',
                    opacity: '0.8'
                }, 400, 'easeOutQuint');
                
            }
            
            function sliderLoaded(args) {
                    
                $(args.sliderObject).find('.text1, .text2').attr('style', '');
                
                $(args.currentSlideObject).find('.text1').animate({
                    right: '100px',
                    opacity: '0.8'
                }, 400, 'easeOutQuint');
                
                $(args.currentSlideObject).find('.text2').delay(200).animate({
                    right: '50px',
                    opacity: '0.8'
                }, 400, 'easeOutQuint');
                
                slideChange(args);
                
            }
        </script>

Wie kann ich das nun für ein Video tag verwenden?? habe im moment autoplay...

vieln Dank, wenn dass jemand lösen könnte
LG

 

[Duddle]

AW: video erst abspielen wenn classe aufgerufen wird

Naja, du musst im Callback für onSlideComplete erkennen ob die gewünschte Seite angezeigt wird, z.B. per Seitennummer oder mit einem jQuery-Selektor.
Wenn das ein positives Ergebnis liefert, musst du per JS das Video starten. Für das <video>-Tag , für andere HTML-Versionen müsstest du in die Dokumentation des Players schauen ob dieser JS unterstützt.


Duddle

 

[vmd]

AW: video erst abspielen wenn classe aufgerufen wird

ok, danke für den hinweis. Leider bin ich überhaupt nicht fit mit JS. Ich schnibbel mir alles so zusammen und hoffe es klappt. Könntest du deinen Tipp bisschen auf mein Beispiel konkretisieren? Wäre sehr hilfreich!

LG

also die website wäre :

http://www.lewicki.me/