2

Video.js プレーヤーを使用してフルスクリーン オーバーレイを作成できた人はいますか? 動画の上に div を表示し、フルスクリーン モードでも利用できるようにする方法を探しています。

4

1 に答える 1

0

これは、JQuery UI ダイアログを使用して最近のプロジェクトで私が行ったことですが、この解決策は、ビデオ上に表示する要素に適用されます。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#overlay').dialog({
        width: $(window).width() * .8,
        height: 100,
        position: { my: "center", at: "bottom", of: window },
        autoOpen: false,
        zIndex: 2147483647
    });
});
int = setInterval(function(){checkNews()},checkNewsInterval);
function checkNews() {
    var url = 'news.php';
        $('#overlay').load(url, function() {
        $('#overlay').dialog('open');
        return false;
}
</script>
<body>
<div id="video-container">
    <video id="myvideo" class="video-js vjs-default-skin" controls
    preload="auto"  poster="" data-setup="{}">
        <source src="<you_video_source>" type='video/mp4'></source>
        <param name="allowfullscreen" value="true" />
    </video>
</div>
<div id="overlay"></div>
</body
</html>

プロパティであるトリック：

zIndex: 2147483647

ダイアログ設定で設定するか、次の CSS として設定します。

#overlay {
    z-index: 2147483647;
}
于 2013-07-19T13:59:09.187 に答える