media player first release

by Felis Catus

HTML

<p class="target"><span>A good movie</span></p>
<p class="target"><span>A bad movie</span></p>
<div id="mediaplayer">
    
    <svg id="playerback" width="100%" height="100%" viewBox="0 0 162 122">
        <path d="M4,121.5c-1.9,0-3.5-1.6-3.5-3.5V4c0-1.9,1.6-3.5,3.5-3.5h154c1.9,0,3.5,1.6,3.5,3.5v114    c0,1.9-1.6,3.5-3.5,3.5H4z" fill="#2D2D2D" />
        <path d="M158,1c1.7,0,3,1.3,3,3v114c0,1.7-1.3,3-3,3H4c-1.7,0-3-1.3-3-3V4c0-1.7,1.3-3,3-3H158 M158,0H4     C1.8,0,0,1.8,0,4v114c0,2.2,1.8,4,4,4h154c2.2,0,4-1.8,4-4V4C162,1.8,160.2,0,158,0L158,0z" fill="#1A1A1A" />
    </svg>
    <div id="playcaption">
        I know what you did last summer
    </div>
    <div id="playbutton">
        <div class="playback">
            <svg width="100%" height="100%" viewBox="-1 -1 42 42">
                <path d="M20,40L20,40C9,40,0,31,0,20v0C0,9,9,0,20,0h0c11,0,20,9,20,20v0C40,31,31,40,20,40z" fill="#00B7F1" />
            </svg>
        </div>
        <div class="ripple">
            <svg class="outer" width="100%" height="100%" viewBox="-1 -1 42 42">
                <circle  cx="20" cy="20" r="20" fill="#2d2d2d"/>
                
            </svg>
            <svg class="inner" width="100%" height="100%" viewBox="-1 -1 42 42">
                <circle class="inner" cx="20" cy="20" r="20" fill="#00B7F1"/>
            </svg>    
        </div>
        <div class="spincontainer">
            <div class="spinner back">
        <svg width="100%" height="100%" viewBox="-1 -1 202 202">
            <path id="rail" d="M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 20,100 A 80,80 0 0,1 100,20 A 80,80 0 0,1 180,100" style="fill:none"/>
        </svg>
    </div>
    <div class="spinner bubble">
        <svg width="100%" height="100%" viewBox="-1 -1 202 202">
            <path id="bubble" d="M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 20,100 A 80,80 0 0,1 100,20 A 80,80 0 0,1 180,100" style="fill:none"/>
        </svg>
    </div> 
    <div class="spinner fore">
        <svg width="100%"...

CSS

@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    src: local("PT Sans"), local("PTSans-Regular"), url("http://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff") format("woff");
}
@keyframes ellipsis_dance{
    0% {transform:translate(0,10px); opacity:1;}
    20%{transform:translate(0,-3px);}
    30%{transform:translate(0,0);}
    60%{transform:translate(0,0);opacity:1;}
    90%{transform:translate(0,0);opacity:0;}
    100%{transform:translate(0,10px);opacity:0;}
}
@-webkit-keyframes ellipsis_dance{
    0% {transform:translate(0,10px); opacity:1;}
    20%{transform:translate(0,-3px);}
    30%{transform:translate(0,0);}
    60%{transform:translate(0,0);opacity:1;}
    90%{transform:translate(0,0);opacity:0;}
    100%{transform:translate(0,10px);opacity:0;}
}
@keyframes status_fade{
    0% {opacity:1}
    50%{opacity:0.5}
    100%{opacity:1}
}
@keyframes ripple_outer{
    0% {transform:scale(0.2)}
    100%{transform:scale(1.2)}
}
@keyframes ripple_outer_clicked{
    0% {transform:scale(0.2)}
    100%{transform:scale(1.2)}
}
@keyframes ripple_inner{
    0% {transform:scale(0)}
    100%{transform:scale(1);}
}
@keyframes ripple_inner_clicked{
    0% {transform:scale(0)}
    100%{transform:scale(0.01);}
}
@-webkit-keyframes ripple_outer{
    0% {-webkit-transform:scale(0.2)}
    100%{-webkit-transform:scale(1.2)}
}
@-webkit-keyframes ripple_outer_clicked{
    0% {-webkit-transform:scale(0.2)}
    100%{-webkit-transform:scale(1.2)}
}
@-webkit-keyframes ripple_inner{
    0% {-webkit-transform:scale(0)}
    100%{-webkit-transform:scale(1);}
}
@-webkit-keyframes ripple_inner_clicked{
    0% {-webkit-transform:scale(0)}
    100%{-webkit-transform:scale(0.01);}
}
@keyframes ripple_play{
    0%{transform:scale(1)}
    20%{transform:scale(0.6)}
    60%{transform:scale(1)}
    100%{transform:scale(1)}
}
@keyframes ripple_play_clicked{
    0%{transform:scale(1)}
    20%{transform:scale(0.6)}
    60%{transform:scale(1)}
   ...

JavaScript

(function setEvents(){
    var active=0;
    /* to modify behavior to restrict click to button */
    /* var mplayer=document.getElementById("playbutton"); */
    var mplayer=document.getElementById("mediaplayer");
    var movies = Array.prototype.slice.call(document.querySelectorAll(".target>span"));
    var animFunc=((/^((?!chrome).)*safari/i.test(navigator.userAgent))?"webkitAnimationName":"animationName");
    /* spinner vars */
    var intId=0;
    var int2Id=0;
    var aperture=10;
    var angle=0;
    var dAperture=1.5;
    var dAngle=-15;
    var transformFunc=((/^((?!chrome).)*safari/i.test(navigator.userAgent))?"-webkit-transform":"transform");
    
    var arc=document.getElementById("spincircle");
    var spinner=document.getElementsByClassName("fore")[0];
    var bubble=document.getElementsByClassName("bubble")[0];
    function setAperture(ang){
        ang%=360;
        var ex=100+(80*Math.cos(6.28318531*ang/360.0));
        var ey=100+(80*Math.sin(6.28318531*ang/360.0));
        if(ang<=90){
            arc.setAttribute("d","M 180,100 A 80,80 0 0,1 "+ex+","+ey);
        }else if(ang<=180){
            arc.setAttribute("d","M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 "+ex+","+ey);
        }else if(ang<=270){
            arc.setAttribute("d","M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 20,100 A 80,80 0 0,1 "+ex+","+ey);
        }else{
            arc.setAttribute("d","M 180,100 A 80,80 0 0,1 100,180 A 80,80 0 0,1 20,100 A 80,80 0 0,1 100,20 A 80,80 0 0,1 "+ex+","+ey);
        }
    }
    function burstBubble(){
        var iterations=1,bubbleInt=0;
        function startBurst(){
            bubble.setAttribute("class","spinner burst");
            setTimeout(function doBurst(){
                bubble.setAttribute("class","spinner bubble");
            },50);
            iterations--;
            if((!iterations)&&(bubbleInt))clearInterval(bubbleInt);
        }
        startBurst();
        if(iterations){
           ...