CAMP/jquery-srt-fork
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix html

Browse Source
This commit is contained in:
j 2008-11-28 20:53:12 +01:00
parent a6c6f248c3
commit a72a63a218
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@ -19,20 +19,24 @@ h2 {
} }
#left { #left {
float:left;
width: 550px; width: 550px;
} }
#example { #example {
padding-top: 56px; position: absolute;
top: 56px;
left: 550px;
} }
code { code {
background-color: #eee; background-color: #eee;
width: 580px; width: 580px;
} }
.srt { .srt {
font-size: 16px; position: absolute;
padding-left: 550px; top: 310px;
left: 0px;
width: 512px; width: 512px;
font-size: 16px;
} }
</style> </style>
</head> </head>
@ -42,30 +46,32 @@ code {
<p> <p>
<h2>jquery.srt.js</h2> <h2>jquery.srt.js</h2>
<p> <p>
play srt subtitles together with your &lt;video> element play srt subtitles next to your &lt;video> element
</p> </p>
<p> <p>
<b>Example:</b> <b>Example:</b>
<pre><code> <pre><code>
&lt;script type="text/javascript" src="jquery.js">&lt;/script>
&lt;script type="text/javascript" src="jquery.srt.js">&lt;/script>
&lt;video src="http://example.com/video.ogv" id="video" controls> &lt;video src="http://example.com/video.ogv" id="video" controls>
&lt;div class="srt" data-video="video" &lt;div class="srt"
data-video="video"
data-srt="http://example.com/video.srt" /> data-srt="http://example.com/video.srt" />
</code></pre> </code></pre>
jquery.srt.js will try to load subtitles in all elements with 'srt' class.<br> jquery.srt.js will try to load subtitles in all elements with 'srt' class.<br>
'data-video' atribute is used to link to the related video,<br> 'data-video' atribute is used to link to the related video,<br>
if not data-srt is provided, the contents of the div is parsed as srt. if no data-srt is provided, the contents of the div is parsed as srt.
</p> </p>
<p> <p>
<b>Download:</b> <a href="jquery.srt.js">jquery.srt.js</a> <b>Download:</b> <a href="jquery.srt.js">jquery.srt.js</a>
</p> </p>
</div> </div>
<div id="example"> <div id="example">
<p> <p>
<video src="http://footage.stealthisfilm.com/stream/Robert%20Darnton%20-%20Two%20Information%20Systems%20at%20War%2C%20in%2018th%20Century%20France.ogg" id="video" autplay controls> <video src="http://footage.stealthisfilm.com/stream/Robert%20Darnton%20-%20Two%20Information%20Systems%20at%20War%2C%20in%2018th%20Century%20France.ogg" id="video" autplay controls></video>
</p> </p>
<div class="srt" data-video="video" data-srt="sample.srt"> <div class="srt" data-video="video" data-srt="sample.srt">content</div>
</div>
</div> </div>

14
jquery.srt.js
View File

@ -9,12 +9,12 @@
*/ */
/* /*
usage: usage:
<video src="myvideo.ogg" id="myvideo" /> <video src="example.ogg" id="examplevideo" />
<div id="subtitles" class="srt" data-video="myvideo" data-srt="myvideo.srt"></div> <div class="srt" data-video="examplevideo" data-srt="example.srt"></div>
all elements with class 'srt' that have a data-video atribute, jquery.srt.js will try to load subtitles in all elements with 'srt' class.
referencing the related video, if not data-srt is provided, 'data-video' atribute is used to link to the related video,
the contents of the div is parsed as srt. if no data-srt is provided, the contents of the div is parsed as srt.
*/ */
$(document).ready(function() { $(document).ready(function() {
@ -57,8 +57,8 @@ $(document).ready(function() {
} }
var currentSubtitle = -1; var currentSubtitle = -1;
var ival = setInterval(function() { var ival = setInterval(function() {
currentTime = document.getElementById(videoId).currentTime; var currentTime = document.getElementById(videoId).currentTime;
subtitle = -1; var subtitle = -1;
for(s in subtitles) { for(s in subtitles) {
if(s > currentTime) if(s > currentTime)
break break