使用 javascript 显示字幕

Posted

技术标签:

【中文标题】使用 javascript 显示字幕【英文标题】:Displaying subtitles using javascript 【发布时间】:2012-07-26 23:22:19 【问题描述】:

我目前正在使用jquery.srt.js 来显示我拥有的一些视频的字幕。

我想要完成的是在网页中显示字幕的整个文本文件。

这是我的 html 文档中的内容。如何获取“data-srt”(本地文件)内容? 谢谢

<div id='srt'
     class="srt"
     data-video="video"
     data-srt="sample.srt" />

</div>

编辑

    $(function()
    
        $.get($("#srt").data("srt"), function(text) 
            alert(text);
        );
    );

</script>

我尝试了上面的编辑版本,但它没有显示它给我的字幕文本:[object XMLDocument]

【问题讨论】:

【参考方案1】:

我假设 sample.srt 是位于网络服务器上的文本文件?您可以尝试对文本文件执行 ajax 调用并使用 javascript 将响应文本显示到 html 元素。使用 jQuery 执行 AJAX 调用:

$.ajax(

   url: $("#srt").attr("data-srt"),
   success: function(responseText)
   
       alert(responseText);
   
);

【讨论】:

文本文件实际上是本地的。我只是在试验一个网页以及我希望它如何显示文本。 但是如果你选择这种方式,那么.srt文件会在webserver上,对吧?我的意思是您不会尝试访问用户拥有的本地文件。这个建议和 say2joe 提供的更简洁的版本都应该有效。有趣的是,您得到的是对象引用而不是实际文本。文件是否存在?是否与包含此代码的 html 文件位于同一目录中? 你是对的。将来我不会访问本地文件。该文件确实存在,并且位于同一目录中的 .html 文件旁边。如果您点击“jquery.srt.js”上方的链接,我将使用视频和 srt 文件作为示例。你可以自己看看。谢谢 非常漂亮的插件。我仍然不确定为什么你会得到一个对象引用而不是实际的文本。我尝试了各种文件格式,但仍然得到了写在文件上的文本。您使用的是哪个浏览器?您是否尝试过在其他浏览器中运行它? 我使用的是 firefox 14 和 chrome 20.0.1132.57。 Chrome 不允许访问本地文件,因此无法正常工作。我将设置一个 apache 服务器,看看它是否可以从那里工作【参考方案2】:

我看到您正在使用 W3C DOM 方法,但您的文件表明您正在使用 jQuery。因此,以下使用 jQuery 会更短:

$.get($("#srt").data("srt"), function(text)
  alert(text); // Show the subtitles from the text file.
);

享受吧!

【讨论】:

感谢您的帮助。我尝试了上述方法并编辑了我的问题。我将如何访问对象 XMLDocument 以提取整个 .srt 文本? 上面的代码有效。我必须设置一个 apache 服务器才能得到结果。谢谢

以上是关于使用 javascript 显示字幕的主要内容,如果未能解决你的问题,请参考以下文章

使用javascript将字幕与电影同步

使用javaScript添加字幕

JavaScript 使用开始和停止滚动字幕。

javascript中字幕的正则表达式中的可变行数

油管字幕突然间不显示了

如何使用 ffmpeg 在视频中的任意位置显示大量字幕?