Question

我想在 jwplayer 之外显示字幕。我们可以在玩家皮肤上有一个单独的部门并且有字幕的单独位置吗？我不希望字幕显示在视频中，但我们希望字幕位于播放器外部的单独位置。是否可以使用JWplayer？（或任何球员）

我将使用JWplayer这样做，所以请记住答案，牢记这一点迫在眉睫。如果有任何代码或逻辑或任何东西，我将非常感激虽然我正在使用JWplayer，但任何帮助都会非常明显。

Answer 1

来自this page上的示例。字幕将添加到其自己的具有.videosubbar类的div中。所以你可以简单地添加自己的样式。

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

e.g

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

或者您也可以编辑插件的来源，以便首先调整字幕的位置。

Going from this JS file.

定位触控笔从线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和类别明显不同。在另一个示例中，容器的类是.mejs-captions-layer。

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

Answer 2

非常感谢Ethan和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的初学者，所以如果上面的代码中断或你无法看到你希望他们看到的标题...别担心;）使用firebug或inspect元素，您可以轻松找到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));
})

在播放器之外显示字幕

3 个答案: