<section class="adobewordpress">
<a href="http://www.adobewordpress.com" target="_blank"><img src="http://www.adobewordpress.com/wp-content/themes/adobewordpress/images/logo.png" class="kanal"></a>
<video width="320" height="180" ontimeupdate="textcontrol();" controls="1"><source src="https://dl.dropboxusercontent.com/s/ldnrmjjtaf3gi66/Family-Guy.mp4?token_hash=AAGdnMYdt75v689ZpwPMC10zf2R7YH3NBS2dorlbtWjRA&amp;dl=1" type="video/mp4"></video>
<div class="altyazi" id="altyazi"></div>
<div id="metinler">
<span start="1" end="3.5" >AdobeWordPress.com HTML5 Dersleri</span> 
<span start="3.5" end="5" >Ugh, you look like a nude Larry David.</span>
<span start="5" end="8" >No, no, no!</span>
<span start="9" end="11" >Oh, my God, Super Mario? What are you doing here?</span>
<span start="12" end="14" >I jumped on a turtle, Stewie.</span>
<span start="14" end="17" >It’s not an exciting life, but it’s my life.</span>
</div>
</section>
.adobewordpress{
width: 320px; 
height: 180px; 
position: absolute; 

/* Oynatıcının  Arka Plan Ayarları*/
background: #092756;
background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
padding:15px;
border-radius:10px;

/* Oynatıcının  Gölge Ayarları*/
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.kanal{
/* Kanal Logosu */
position: absolute; 
margin:30px; 
width:70px; 
left:0; 
top:0; 
z-index:999;
}

  
.altyazi{
position:relative;
bottom:30px;
text-align:center;
width: 95%;
margin:0 auto;
font:bold 12px Helvetica;
color:white;
text-shadow: 2px 2px 1px #000;
padding;10px;
}

#metinler{display:none;}
var metinler = document.querySelectorAll("#metinler span");
var altyazi = document.querySelector("#altyazi");
var textcontrol = function(){
var adobewordpress = document.querySelector("video");
currenttime = parseFloat(adobewordpress.currentTime);
for( x = 0, l = metinler.length; x < l; x++ ){
diyecek = metinler[x];
if(parseInt(diyecek.getAttribute("start")) <= currenttime && currenttime <= diyecek.getAttribute("end") ){
altyazi.innerHTML = diyecek.innerHTML;
}
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.