{source}

<div style="width: 640px; height: 480px; position:relative;">
    <video id="joulukontsert-2015-video" width="640" height="480" poster="/images/stories/kontsert2015.jpg" >
        <source src="/images/stories/kontsert2015.webm" type="video/webm">
        <source src="/images/stories/kontsert2015.mp4" type="video/mp4">
        <small>Su brauser ei toeta video elementi.</small>

<p>Kuusalu Keskkooli jõulukontsert</p>

<p>Reedel, 18. detsembril algusega kell 18.00</p>


    </video>
<audio id="joulukontsert-2015-audio" controls>
        <source src="/images/stories/mudilased2015.ogg" type='audio/ogg; codecs="opus"'>
        <source src="/images/stories/mudilased2015.mp3" type="audio/mp3">
    </audio>
    <div id="joulukontsert-2015-video-play"
        style="width: 220px; height: 220px; background: url(/images/stories/play-button.png) no-repeat; position:absolute; bottom: 30px; right: 30px; cursor: pointer;">
    </div>
</div>
<script type="text/javascript">
    (function(){
        var btn = document.querySelector("div#joulukontsert-2015-video-play");
        var vid = document.querySelector("video#joulukontsert-2015-video");
        var aud = document.querySelector("audio#joulukontsert-2015-audio");
        aud.volume = 0.3;

        addEvent(vid, "ended", show);
        addEvent(vid, "pause", show);
        addEvent(vid, "playing", hide);
        addEvent(btn, "click", play);
 
        function addEvent(obj, ev, f)
        {
            if(obj.addEventListener)
                obj.addEventListener(ev, f);
            else if(obj.attachEvent)
                obj.attachEvent("on" + ev, f); 
     }
 
        function show() { btn.style.display = "block"; }
        function hide() { btn.style.display = "none"; }
 
        function play()
        {
            hide();
            aud.style.display = "block";
            aud.volume = 0.3;
            if (vid.paused == true) {
                vid.play();
                aud.play();
            }
        }
    })();
</script>

{/source}