正文

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

 2023-03-07  167

关键词：

【中文标题】如何在 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

【讨论】：

Safari 没有在 Rails 应用程序中加载 HTML5 视频

】Safari没有在Rails应用程序中加载HTML5视频【英文标题】：SafarinotloadingHTML5videoinRailsapp【发布时间】：2016-02-1802:20:36【问题描述】：我有一个Rails应用程序，我正在尝试使用以下标记播放HTML5视频：不起作用：<videocontrolsposter="htt... 查看详情

如何在字幕文件中加载外部或自定义字体

】如何在字幕文件中加载外部或自定义字体【英文标题】：Howtoloadexternalorcustomfontsinsubtitlefile【发布时间】：2020-11-1818:20:46【问题描述】：如何从外部文件路径/自定义路径加载.ass字幕文件中的字体？假设我在一个文件夹中有一... 查看详情

如何在 android 中加载 youtube 视频缩略图？

】如何在android中加载youtube视频缩略图？【英文标题】：Howtoloadyoutubevideothumbnailsinandroid?【发布时间】：2011-12-0822:45:23【问题描述】：如何在android中使用youtubeurl制作视频缩略图？在单击该缩略图时，我想在youtube应用程序或网络... 查看详情

如何在 Firefox 中播放 MP4 视频

】如何在Firefox中播放MP4视频【英文标题】：HowtoplayMP4videoinfirefox【发布时间】：2017-04-0706:00:14【问题描述】：我有一个来自数据库的动态视频路径。视频可以任何格式上传。当我在Firefox中加载视频时，我看到以下错误不支持“vi... 查看详情

在 Elementor 中加载 youtube 视频时暂停音频播放器

】在Elementor中加载youtube视频时暂停音频播放器【英文标题】：PausingaudioplayerwhenyoutubevideoloadsinElementor【发布时间】：2021-03-2604:52:36【问题描述】：我有一个客户，我在Elementor工作，我有一个我正在通过varaudio=document.getElementById(&qu... 查看详情

如何在 Google Chrome 中加载 mpeg-dash 视频

】如何在GoogleChrome中加载mpeg-dash视频【英文标题】：HowdoIloadanmpeg-dashvideoinGoogleChrome【发布时间】：2014-09-2318:37:07【问题描述】：我需要在GoogleChrome中加载一个mpeg-dash视频。是否可以将mpeg-dash视频格式直接加载到HTML5视频标签中？... 查看详情

HTML5 视频未在 chrome 中加载，但在打开开发人员控制台时有效

】HTML5视频未在chrome中加载，但在打开开发人员控制台时有效【英文标题】：HTML5videonotloadinginchrome,butworkswhenthedeveloperconsoleisopenedup【发布时间】：2018-11-1501:36:51【问题描述】：我正在为客户开发一个Web应用程序，但HTML5视频标签... 查看详情

ROOKIE ALERT (Learning HTML5/ JavaScript/ CSS from a book): 为啥我的视频文件不能在 Firefox 中加载和播放（使用 Win 8，av

】ROOKIEALERT(LearningHTML5/JavaScript/CSSfromabook):为啥我的视频文件不能在Firefox中加载和播放（使用Win8，avi/wmv文件）？【英文标题】：ROOKIEALERT(LearningHTML5/JavaScript/CSSfromabook):whywon\'tmyvideofileloadandplayinFirefox(usingWin8,avi/wmvfiles)? 查看详情

无法在android中加载视频流

.../197.243.19.131:1935/rtv/rtv/playlist.m3u8任何人都可以帮助我了解如何在android中从该url播放视频请帮助我查看详情

HTML5 视频 + TTML 字幕不显示字幕

...出现[在chrome中检查]。当我在IE11中检查时，它在HTML5视频播放器中显示CC选项，但也没有字幕。这是我查看详情

如何在 PlaybackTransportControlGlue android TV 上动态更改字幕

...1-08-2606:41:19【问题描述】：我正在为AndroidTV构建一个视频播放器应用。我正在使用https://developer.android.com/train 查看详情

告诉 MPMoviePlayerViewController 中加载的视频停止播放

】告诉MPMoviePlayerViewController中加载的视频停止播放【英文标题】：TellvideoloadedinMPMoviePlayerViewControllertostopplaying【发布时间】：2010-09-2022:07:31【问题描述】：我有一个导航视图，其中包含一个表格视图，其中列出了一些视频。选择... 查看详情

跨源视频无法在 Chrome 中加载

】跨源视频无法在Chrome中加载【英文标题】：crossoriginvideodoesnotloadinChrome【发布时间】：2012-07-0717:16:51【问题描述】：我正在尝试在Chrome（版本20.0.1132.47m）中播放具有crossorigin属性的视频。它甚至不加载。网络面板显示OPTIONS（所... 查看详情

HTML5 音频文件无法在 Safari 中加载

】HTML5音频文件无法在Safari中加载【英文标题】：HTML5AudiofilesfailtoloadinSafari【发布时间】：2010-11-1704:43:45【问题描述】：[编辑：使用没有Javascript等的简化测试页面]我有一个包含四个音频文件的网页。这些文件以HTML5<audio&... 查看详情

如何在 tensorflow 服务 (gpu) 中加载自定义动态库 (*.so)？

】如何在tensorflow服务(gpu)中加载自定义动态库(*.so)？【英文标题】：Howtoloadcustomizeddynamiclibs(*.so)intensorflowserving(gpu)?【发布时间】：2021-09-0320:33:31【问题描述】：我写了自己的cudaMelloc，如下所示，我计划将其应用到tensorflow服务（... 查看详情

如何在 iOS 的同一个 UICollectionView 中加载图像和视频

】如何在iOS的同一个UICollectionView中加载图像和视频【英文标题】：HowtoloadimagesandvideosinsameUICollectionViewiniOS【发布时间】：2017-02-2611:29:16【问题描述】：我正在尝试创建一个集合视图，它可以根据时间戳显示相机胶卷中的所有图... 查看详情

在我的 phonegap iphone 应用程序中加载 youtube 视频

】在我的phonegapiphone应用程序中加载youtube视频【英文标题】：Loadingyoutubevideoinmyphonegapiphoneapp【发布时间】：2012-04-2512:41:04【问题描述】：大家好，我正在尝试使用iframe方法在iPhone上的phonegap应用程序中加载youtube/Dailymotion视频，... 查看详情

HTML5 视频字幕样式

...12-1511:17:56【问题描述】：是否可以将样式应用于HTML5视频播放器字幕轨道元素？我想将字幕移到媒体播放器之外。我试过用css定位媒体播放器和track元素，都没有任何效果。如果不可能，我可以用jquery读取字幕轨道元素的内容吗... 查看详情

正文