5

字幕をjwplayerの外に表示したい。プレーヤーのスキンに別のセクションを設けて、字幕用に別の場所を設けることはできますか? ビデオに字幕を表示したくありませんが、プレーヤーの外の別の場所に字幕を表示したいです。JWplayerでできますか？（または任意のプレイヤー）

私はこれを行うためにJWplayerを使用しますので、緊急であることを念頭に置いて答えを教えてください. JWplayerを使用していますが、コードやロジックなどがあれば本当に感謝していますが、どんな助けも本当にありがたいです.

4

3 に答える 3

4

このページの例から進みます。字幕は、 のクラスを持つ独自の 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 とクラスが明らかに異なります。この他の例では、コンテナのクラスは.mejs-captions-layer.

fireBug または別の開発者ツールを使用して字幕コンテナーを検査し、必要に応じて自由に移動することをお勧めします。

于 2013-04-14T14:36:19.897 に答える
0

最近、これに対するより良いアプローチを見つけました。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));
})
于 2013-11-01T09:05:56.000 に答える