JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<ul id="slideshow">
   <li>
       <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" />
   </li>
  <li>
      <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" />
   </li>
   <li>
       <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg" />
   </li>
   <li>
        <video width="320" height="240" controls="controls" id="asvideo3" autoplay style="width: 100%; height: 100%;">
            <source src="http://css-tricks.com/examples/AnythingSlider/demos/video/movie.ogg" type="video/ogg" />
            <source src="http://css-tricks.com/examples/AnythingSlider/demos/video/movie.mp4" type="video/mp4" />
            <source src="http://css-tricks.com/examples/AnythingSlider/demos/video/movie.webm" type="video/webm" />
                Your browser does not support the video tag. But you could include an iframe/embeded video here.
       </video> 
    </li>
</ul>

CSS

#slideshow { 
    margin: 0px auto; 
    position: relative; 
   padding: 0px; 
    width: 450px;
    height:200px;
    list-style:none;
}

#slideshow > li { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
    display: none
}
#slideshow > li > video {width:100%; height:100%}

JavaScript

(function($){
    var SlideShow = function(options) {
        
        
        this.settings = $.extend({}, this.defaultOptions, options);
        this.started = false;
        
        return this.each(function() {
            var $this = $(this);
        });
    };
    
    var SSProto = {
        defaultOptions: {
            duration: 4000
        },
        startSlider: function(){
            jQuery('#slideshow > li:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            
            .end()
            .appendTo('#slideshow');
        },
        next:function(){   
        }
    };
    
    SlideShow.prototype = SSProto;
    
    $.fn.extend({
        SlideShow: SlideShow
    });
})(jQuery);





if (jQuery("#slideshow li").has('img') == true) {
    startSlider(4000);
}else{
    myVideoPlayer =	jQuery('video').get(0);
    
    myVideoPlayer.addEventListener('loadedmetadata', function() {
        
        var ddur =  Math.round(myVideoPlayer.duration) * 1000;
        console.log(ddur);
        startSlider(ddur);
    });
}