ビデオプレーヤーの上にオーバーレイコンテンツレイヤー

Question

ビデオコンテントをストリーミングしているビデオプレーヤーの上にレイヤーをオーバーレイしたいと思います。これは可能ですか？

レイヤーはビデオプレーヤーの上にあるので、理想的には透明度も持つことができます。

また、ビデオプレーヤーが「フルスクリーン」されている場合。ユーザがプレーヤ上のフルスクリーンアイコンをヒットすると、そのレイヤは同じ比率に移動/拡大することになる。

jqueryを使用してこれが可能かどうか疑問ですか？

誰か親切に私にこの操縦を教えてください。出来ますか？誰にも例がありますか？

ありがとうございます！ Ryan

Answer 1

この質問には2つの異なる部分があるようです。

1. は、ビデオプレーヤー
2. それはすべての可能ですが、特定の条件下でのみと仕事の公平なビットをフルスクリーンビューでプレーヤーをカバーするために

をdiv要素の拡大を超える透明のdivを表示します。最も重要なことは、ビデオプレーヤーがページに埋め込まれている方法を制御する必要があり、ビデオプレーヤーにdivのサイズ変更をトリガーするJavascript APIが必要であることです。

ビデオプレーヤーがFlash SWFの場合、パラメータ「wmode」が埋め込まれたSWFが「不透明」（または「透過」）に設定されている場合にのみ、1が可能です。基本的にwmodeの設定は、Flashに通常のHTML要素のように動作し、その上に配置されているものは表示しません。 （詳細はhereです。）さらに、動画プレーヤーでは、divのZ-インデックスよりも低いCSSの「z-index」プロパティが必要です。

動画プレーヤーのコンテナのposition：relativeが設定されている場合は、divの位置を指定することができます：CSSでは絶対値を指定し、左上のプロパティでビデオプレーヤーを基準にして配置します。

divを透明にすることも確かに可能です。しかし、内容が不透明な半透明であるようにするには、少し複雑になることがあります。 CSS for transparencyには何か、inside a translucent divと表示するにはjiggery-pokeryの詳細があります。

hereの要素がJW Media Playerの上にレイヤーされている例があります。これは、その部分がどのように行われたかをあなたに知らせるものです。

2にはJavascriptが必要で、JQueryやMootools、または単純なJavascriptで行うことができます。重要なのは、動画プレーヤーがフルスクリーンにリサイズされたときに、ページの残りの部分を伝える必要があることです.Javascriptでdivを適切にサイズ変更することができます。ここでは、別の良いビデオプレーヤー、FlowPlayerのコード例を示します。これは、listen for the "onFullScreen" eventの方法を示しています。 onFullScreen機能インサイド

$f("player1", "flowplayer.swf", { 
    onFullScreen: function(){ 
     // div resizing stuff here 
    } 
}); 

あなたはdiv要素のサイズを変更してコードを置くところ。また、プレーヤーが収縮したときにもう一度サイズを変更するには、別のリスナーを使用する必要があります。

Answer 2

多分、このGitHub ressourceが役に立ちます。これはJWPlayerでこれに必要な完全なJavascriptスタックを提供します。 JWPlayerにはウォーターマークが付いています。

あなたは //プラグインの参照や設定パラメータを渡しJWPlayer（あまりにもそれのオープンソース）あなたのmain.jsファイル==============の

コンテンツを使用することができます（」埋め込みスクリプトにテキスト '）

jwplayer('id-of-container').setup({ 
    file: '/path/to/my/video.mp4', 
    plugins: { 
    '/path/to/overlay.js': { 
     text: 'Text that you want to go within the overlayed banner' 
    } 
    } 
}); 

エンド==============================

= === overlay.jsファイルの内容=============

(function(jwplayer) { 

    var overlay = function(player, config, div) { 

    var setupOverlay = function() { 
     div.innerHTML = config.text; 
    }; 

    var showOverlay = function() { 
     setStyle({ 
     opacity: 1 
     }); 
    }; 

    var hideOverlay = function() { 
     setStyle({ 
     opacity: 0 
     }); 
    }; 

    var setStyle = function(object) { 
     for(var style in object) { 
     div.style[ style ] = object[ style ]; 
     } 
    }; 

    // Matches our text container to the size of the player instance 
    this.resize = function(width, height) { 
     setStyle({ 
     position: 'absolute', 
     margin: '0', 
     padding: '10px 15px 10px', 
     background: 'rgba(0, 0, 0, .7)', 
     color: 'white', 
     fontSize: '12px', 
     width: '100%' 
     }); 
    }; 

    // Bind player events 
    player.onReady(setupOverlay); 
    player.onPlay(hideOverlay); 
    player.onPause(showOverlay); 
    player.onComplete(showOverlay); 
    }; 

    jwplayer().registerPlugin('overlay', overlay); 

})(jwplayer); 

これはJWPlayerでこれに必要な完全なJavascriptスタックを提供します。 JWPlayerにはウォーターマークが付いています。