javascript - 在播放器之外显示字幕

Question

我希望在jwplayer之外显示字幕。我们可以在玩家皮肤中单独划分并为字幕设置单独的位置吗？我不希望字幕显示在视频中，但我们希望字幕在播放器外部的单独位置。可以用 JWplayer 做吗？（或任何玩家）

我将使用 JWplayer 来执行此操作，因此请告诉答案，记住这很紧急。如果我正在使用 JWplayer，如果有任何代码或逻辑或任何东西，我将非常感激，但任何帮助都会非常明显。

Answer 1

从此页面上的示例开始。字幕被添加到它们自己的 div 中，其类为.videosubbar. 因此，您可以简单地为此添加自己的样式。

因此，对于上面的示例，我只添加了简单的旧样式以将字幕框移出视频帧。但我不得不使用!important覆盖从 javascript 文件添加的内联样式。

例如

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

或者，您也可以编辑插件的源代码以首先调整字幕的添加位置。

从这个 JS 文件开始。

定位笔从第 92 - 104 行添加，如下所示。

$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和class会明显不同。在另一个示例中，容器的类是.mejs-captions-layer.

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

Answer 2

嗨，感谢 Ethan 和 vletech，他们帮助我解决了我添加代码的问题，以便对社区有所帮助

我只是使用覆盖内联 CSS!important

为了更好地理解，我添加了标题部门的部门和类名

/身份证/

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

/班级/

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

你可以拥有自己的 css 我只是 css 的初学者，所以如果上面的代码中断或者你无法在你希望他们看到的地方看到标题......别担心；）使用 firebug 或检查元素你可以轻松找到 jwcaptions 的正确位置

Answer 3

最近我找到了更好的方法，我们可以使用 jquery webvtt 来解析 webvtt 文件并将其显示在自己的 div 中。（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));
})