显示播放器外的字幕

我想让字幕在之外显示jwplayer。我们可以在玩家皮肤上有独立的分区并且有独立的字幕位置吗？我不希望字幕在视频中显示，但我们希望字幕位于播放器外部的不同位置。 JWplayer有可能吗？（或任何球员）显示播放器外的字幕

我将使用JWplayer来做到这一点，所以请告诉答案，铭记这是迫切的。我真的很感激，如果有任何代码或逻辑或任何东西虽然我使用JWplayer，但任何帮助将是真正可观的。

2013-04-14 Hitesh

我试图找到带有字幕的播放器的HTML5示例，但我只能找到Flash，您有链接吗？ – dev

@vletech：这很容易，你可以很容易谷歌“显示字幕使用轨道标签在html5”我希望这个链接 – Hitesh

@vletech：这很容易，你可以很容易地谷歌“显示字幕使用轨道标签在html5” 和我希望这个链接帮助 http://www.html5rocks.com/en/tutorials/track/basics/ 多一个地方，你可以看到这是 http://mediaelementjs.com/examples/?name=翻译但首先要经过如何安装此播放器..u只需要包含这个对我来说，我使用jWplayer，因为我想这两个HTML5和Flash 和jwplayer似乎更有前途的js文件....希望这有助于 – Hitesh

从this page的例子开始。字幕被添加到他们自己的div中，其类别为.videosubbar。所以你可以简单地添加你自己的样式。

因此，对于上面的示例，我添加了普通的旧式样，将字幕框移出视频帧。但是我必须使用!important覆盖从javascript文件添加的内联样式。

e.g

.videosubbar{ 
    bottom:-100px!important; 
    // etc. 
}

或者你也可以编辑插件来调整，其中字幕是摆在首位交锋源。 104，低于 -

Going from this JS file.

定位stylig从线92加入。

$VIDEOSUB(subcontainer).css({ 
    'position': 'absolute', 
    'bottom': '34px', 
    'width': (videowidth-50)+'px', 
    'padding': '0 25px 0 25px', 
    'textAlign': 'center', 
    'backgroundColor': 'transparent', 
    'color': '#ffffff', 
    'fontFamily': 'Helvetica, Arial, sans-serif', 
    'fontSize': fontsize+'px', 
    'fontWeight': 'bold', 
    'textShadow': '#000000 1px 1px 0px' 
});

随着你送我的其他链接，这是上面相同的方法，但不同的插件的ID和类的字幕容器之间会明显不同。在另一个例子中，容器的类是.mejs-captions-layer。

我建议使用fireBug或其他开发工具来检查字幕容器，并根据需要自由移动它。

来源

2013-04-14 14:36:19 dev

可以ü请检查这一个我正在jwplayer 工作，但我找不到我应该编辑的位置，以显示播放器外的标题 http://www.longtailvideo.com/support/jw-player/28845/adding-视频字幕/ 你需要这个以及 http://www.longtailvideo.com/jw-player/get-player/ http://www.longtailvideo.com/support/jw-player/ 28833 /快速入门指南感谢您的帮助 – Hitesh

@hitesh嗨我会下载播放器并尝试一下，会让你很快知道。 – dev

@hitesh我刚刚设置了一个带有SRT文件的演示程序，它们出现在id为myElement_caption和class jwcaptions的div容器中。 – dev

喜感谢伊森和vletech谁帮我解决这个问题我加入我的代码，以便它会帮助社区

我只是重写使用!important

内联CSS更好地理解我加入字幕分割的两个分割和类名

/ID/

#player_caption div{width:100% !important;text-align:center !important;left:0 !important;}

/CLASS/

.jwcaptions{  
position:absolute;bottom:0px;border:solid 2px #333; 
-moz-border-radius: 15px;opacity:0.7;width:100% !important;bottom:0% 
}

，你希望他们看到你可以有你自己的CSS我只是初学者在这里的CSS这样的情况下，上面的代码中休息，或者你无法看到字幕到位...不要担心;使用萤火虫）或检查元素，你可以很容易地找到了jwcaptions

来源

2013-05-08 06:01:58 Hitesh

如果这个答案不适用于某些人，我很抱歉，这不是确切答案，而仅仅是你的概述需要做:) – Hitesh

感谢分享！ – emaxsaun

正确的位置最近，我发现这个更好的方法，我们可以使用jQuery WebVTT插入解析WebVTT插入文件，并显示在自己的股利。（Jquery Webvtt）

jwplayer('video_id').onTime(function(){ 
       var play_position = jwplayer("video_id").getPosition(); 
       var hr = parseInt((play_position/3600) % 24); 
       hr = checkTime(hr); 
       var min = parseInt((play_position/60) % 60); 
       min = checkTime(min); 
       var sec = parseInt((play_position % 60)); 
       sec = checkTime(sec); 
       var hrTotal = parseInt((videoLength_s/3600) % 24); 
       hrTotal = checkTime(hrTotal); 
       var minTotal = parseInt((videoLength_s/60) % 60); 
       minTotal = checkTime(minTotal); 
       var secTotal = parseInt((videoLength_s % 60)); 
       secTotal = checkTime(secTotal); 
       $('#ci_current_position_'+id).text(hr+':'+min+':'+sec); 
        $('#ci_video_time_'+id).text(hrTotal+':'+minTotal+':'+secTotal); 
var position = hr+":"+min+":"+sec+".000"; 
$('#ci_caption_'+id).html($("#en_"+id).webVtt(position)); 
})

来源

2013-11-01 09:05:56 Hitesh

显示播放器外的字幕

回答

相关问题