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

34
index.html
View File

@ -19,20 +19,24 @@ h2 {
}
#left {
float:left;
width: 550px;
}
#example {
padding-top: 56px;
position: absolute;
top: 56px;
left: 550px;
}
code {
background-color: #eee;
width: 580px;
}
.srt {
font-size: 16px;
padding-left: 550px;
position: absolute;
top: 310px;
left: 0px;
width: 512px;
font-size: 16px;
}
</style>
</head>
@ -42,30 +46,32 @@ code {
<p>
<h2>jquery.srt.js</h2>
<p>
play srt subtitles together with your &lt;video> element
play srt subtitles next to your &lt;video> element
</p>
<p>
<b>Example:</b>
<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;div class="srt" data-video="video"
data-srt="http://example.com/video.srt" />
&lt;div class="srt"
data-video="video"
data-srt="http://example.com/video.srt" />
</code></pre>
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>
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>
<b>Download:</b> <a href="jquery.srt.js">jquery.srt.js</a>
</p>
</div>
<div id="example">
<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>
</p>
<div class="srt" data-video="video" data-srt="sample.srt">
</div>
<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>
</p>
<div class="srt" data-video="video" data-srt="sample.srt">content</div>
</div>

14
jquery.srt.js
View File

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