<ckplayer>是一款流行的HTML5視頻播放器，可以在網(wǎng)頁上實現(xiàn)視頻的播放和控制。在使用ckplayer的過程中，有時候我們希望對播放器進行一些特殊的處理，比如希望在播放器上方覆蓋一層遮罩div，用來展示一些額外的信息。下面我將通過幾個代碼案例來詳細解釋如何實現(xiàn)"ckplayer遮掩div"的效果。
第一個案例是最簡單的情況，我們希望在ckplayer上方覆蓋一層半透明的遮罩div，并在遮罩div上顯示一段文字。代碼如下：

<div id="player"></div>
<div id="mask">
<p>這是一個遮罩層</p>
</div>
<br>
<script>
var flashvars={
f:'video.mp4',
c:0
};
var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
CKobject.embedSWF('ckplayer/ckplayer.swf','player','ckplayer','100%','100%',flashvars,params);
document.getElementById("mask").style.display = 'block';
</script>

在這段代碼中，創(chuàng)建了一個id為"player"的div，用來放置ckplayer播放器。然后創(chuàng)建了一個id為"mask"的div，用來作為遮罩層。在<script>標(biāo)簽中，通過CKobject.embedSWF函數(shù)嵌入ckplayer播放器，其中的參數(shù)flashvars表示視頻文件的路徑，params表示ckplayer的配置參數(shù)。最后一行代碼將遮罩層的display屬性設(shè)置為'block'，使其顯示在ckplayer上方。
第二個案例是在播放器上方覆蓋一個透明的遮罩div，并在遮罩div上顯示一張圖片。代碼如下：

<div id="player"></div>
<div id="mask"></div>
<div id="info">
<img src="info.jpg" alt="info" />
</div>
<br>
<style>
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
<br>
#info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
</style>
<br>
<script>
var flashvars={
f:'video.mp4',
c:0
};
var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
CKobject.embedSWF('ckplayer/ckplayer.swf','player','ckplayer','100%','100%',flashvars,params);
</script>

在這段代碼中，同樣創(chuàng)建了一個id為"player"的div，用來放置ckplayer播放器。接著創(chuàng)建了一個id為"mask"的div，用來作為遮罩層。然后創(chuàng)建了一個id為"info"的div，用來放置額外的信息，這里以圖片為例。在<style>標(biāo)簽中，對遮罩層和額外信息層進行了樣式設(shè)置，其中遮罩層的background屬性使用rgba來設(shè)置透明度。在<script>標(biāo)簽中，通過CKobject.embedSWF函數(shù)嵌入ckplayer播放器。在頁面的布局和樣式設(shè)置中，遮罩層的z-index屬性設(shè)置為1，額外信息層的z-index屬性設(shè)置為2，使得額外信息層顯示在遮罩層之上。
通過以上兩個案例，我們可以看到如何在ckplayer上方實現(xiàn)遮罩div的效果，并在遮罩div上顯示額外的信息。根據(jù)實際需求，我們可以自由地調(diào)整遮罩div的樣式和內(nèi)容，實現(xiàn)更加復(fù)雜和個性化的效果。