如何在 html5 视频播放器中加载动态字幕

Posted 2023-03-07

【中文标题】如何在 html5 视频播放器中加载动态字幕

【英文标题】：how to load dynamic subtitles in html5 video player

【发布时间】：2012-12-24 14:42:09

【问题描述】：

我需要一些关于使用动态字幕播放 html5 视频的帮助

这里是html

视频html

<video 
    
    
   id="videoplayer" 
   controls 
   src="zzz_f817951280x720.m4v" type="video/mp4">
         <track id="subtitleid" srclang="en" default="" label="ინგლისური"></track>
</video>

字幕转换器html

<ul>
   <li><a href="0" class="subtitle_clicker selected">off</a></li>
   <li><a class="subtitle_clicker" id="s15"
            href="Uploads/Subtitles/test_a1ee4c.srt">rus</a></li>
   <li>∙<a class="subtitle_clicker" id="s16"
            href="Uploads/Subtitles/test_797ed1.srt">eng</a></li>                                    
</ul>

和js

$(document).ready(function () 

 $('.subtitle_clicker').live('click', function (e) 
        e.preventDefault();
        SubtitleChager($(this));
    );
);

function SubtitleChager(_this) 
    if ($('.x-player .player-view video').attr("width")) 
        $('.subtitle_clicker.selected').removeClass('selected');
        $('#subtitleid').removeAttr('src');
        if (_this.attr("href") == '0') 
            $('#subtitleid').removeAttr('src');
        
        else 
            $('#subtitleid').attr('src', _this.attr("href"));
        
        $(_this).addClass('selected');
    

当我尝试更改字幕时，我只是在 attr src 中更改 sustitle url 这两个字幕相互重叠

那么如何删除旧字幕并插入新字幕？ 请帮忙

【参考方案1】：

添加了一个名为 Track 的新标签（仅在 Chrome 和 IE10 中可用）

请查看 WebVTT - http://www.html5rocks.com/en/tutorials/track/basics/

微软也开始使用名为 TTML 的 XML 格式的字幕，这两者之间也有一些很好的比较 - http://www.balisage.net/Proceedings/vol10/html/Tai01/BalisageVol10-Tai01.html