在播放器之外显示字幕 [英] show subtitle outside of player

问题描述

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

I want subtitles to be shown outside of jwplayer. Can we have a separate division in player skin and have separate place for subtitle? I don't want the subtitles to be shown in the video, but we want the subtitle in separate place in outside the player. Is it possible to do with JWplayer? (or any player)

我将使用JWplayer这样做，所以请告诉答案记住
这是紧急的。如果有任何代码或逻辑或任何
虽然我正在使用JWplayer，我会非常感激，但任何帮助都会非常明显。

I will be using JWplayer to do this so please tell the answers keeping that in mind it is urgent. I will really be thankful if there is any code or logic or anything though i am using JWplayer, but any help would be really appreciable.

推荐答案

请参阅此页上的示例。字幕被添加到他们自己的div中，该div具有 .videosubbar 的类。所以你可以简单地添加自己的样式。

Going from the example on this page. The subtitles are added to their own div that has the class of .videosubbar. So you can simply add your own styling for this.

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

So for the example above I added just plain old styling to move the subtitle box out of the video frame. But I had to use !important to override the inline styling that is added from the javascript file.

例如

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

或者你可以编辑源代码该插件可以调整字幕的位置。

Or alternatively you can edit the source for the plugin to adjust where the subtitles are aded in the first place.

来自这个JS文件。

定位stylig是从第92-104行添加的，位于下面。

The positioning stylig is added from lines 92 - 104, which is below.

$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 。

With the other link you sent me, it is the same method as above, but between different plugins the id's and class's of the subtitle containers will obviously differ. With this other example the class of the container is .mejs-captions-layer.

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

I suggest using fireBug or another developer tool to inspect the subtitle container and move it freely as you see fit.

这篇关于在播放器之外显示字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！