于前端開發人員來說,css是我們再熟悉不過的朋友的,它就相當于是我們頁面的衣服,頁面好不好看,就看我們css運用的是否爐火純青[小鼓掌][小鼓掌][小鼓掌]。css學起來簡單,但是我們要把它“修煉”到出神入化境界,那這可不是一丁點時間就可以的,需要我們的日積月累,時刻專研。
而今天,就帶給大家一個CSS特效-霓虹燈按鈕,這也是我看到很不錯的效果,帶來分享給大家,希望大家喜歡[送心][送心][送心]
效果如下:
最終效果
那好,廢話不多說,開始我們的CSS代碼。
// 這里我們用div標簽來模擬button按鈕,標簽可以隨意,a、p、span等都可以
// 通常在開發中使用別的標簽來代替button標簽,是因為原始的標簽樣式不好看,
// 我們還得重置樣式,而其他標簽不帶有樣式,我們可以更好的控制自己想要的樣式,
// 當然,button標簽也是可以的,但是如前面所說,原始的樣式需要我們重置。
<div class="btn">button</div>
body {
margin: 0;
padding: 0;
background: #000; // 黑色背景,只為更能突出樣式效果
}
// 初始化按鈕樣式
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 24px;
font-family: sans-serif;
text-decoration: none;
text-transform: uppercase;
box-sizing: border-box;
// linear-gradient() 漸變屬性,函數用于創建一個表示兩種或多種顏色線性漸變的圖片
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
}
初始樣式為這樣:
初始樣式
然后我們給按鈕加上動畫,代碼如下:
.btn:hover {
// linear: 動畫從開始到結束具有相同的速度。
// infinite: 無限次播放
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
效果就變為下面這樣:
最后我們給它加上鼠標移上去的效果,代碼如下:
.btn::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: .5s;
}
.btn:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
現在這樣,就是我們的最終效果了:
就此,我們的霓虹燈的按鈕效果就完成了
不足百行,我們就完成了這個效果,以下是我們的CSS的全部代碼:
在剛接觸 p5.js 時我以為這只是一個藝術方向的 canvas 庫,沒想到它還支持視頻文件和視頻流的播放。
本文簡單講講如何使用 P5.js 播放視頻。
p5.js 除了可以使用 video 元素播放視頻外,還支持使用 image 控件播放視頻。
p5.js 的 createVideo() 方法可以創建一個 <video> 元素。
createVideo(src, [callback]) 可以傳入2個參數:
錄制 GIF 后比較卡,將就看著吧~
// 加載本地視頻
let playing = false // 播放狀態
let video = null // 視頻
let button = null // 按鈕
// 視頻加載完成的回調函數
function afterLoad() {
console.log('加載完成')
}
// 加載資源的生命周期
function preload() {
video = createVideo('assets/02.mp4', afterLoad)
}
// 初始化的生命周期
function setup() {
noCanvas()
button = createButton('播放')
button.mousePressed(toggleVid)
}
// 點擊按鈕的事件
function toggleVid() {
if (playing) {
video.pause()
button.html('播放')
} else {
video.loop()
button.html('暫停')
}
playing = !playing;
}
粗略講講上面這段代碼。
除了 video.loop() 方法,還可以使用 video.play() 播放視頻。loop 是循環播放;play 只播放一次,播完就暫停。
createVideo() 方法的第一個參數除了傳入一個字符串類型的視頻地址外,還可以傳入字符串數組,作用就是兼容處理。
比如你的視頻資源只有 2.mp4,你希望可以先播放 1.mp4,沒有這個視頻再播放 2.mp4,就可以這樣寫:
createVideo(['1.mp4', '2.mp4'])
但通常我們不會這樣寫,通常我們會給同一個視頻提供不同的視頻格式,然后用這種方法傳入多個視頻地址。
因為有些瀏覽器不一定支持你想播放的地址,此時就可以做個保底處理。
使用 createVideo() 方法創建完視頻后,可以通過 size(width, height) 設置視頻的寬高。
let video = null
function preload() {
video = createVideo('assets/02.mp4')
video.size(300, 600)
}
使用 createVideo() 創建的視頻控件可以使用 volume() 設置視頻的音量,該方法接受1個參數,參數值在 0~1 之間。
let video = null
function preload() {
video = createVideo('assets/02.mp4', videoLoaded)
}
function videoLoaded() {
video.volume(0.5) // 將視頻音量設置為50%
}
一開始我也沒想到 image 控件可以播放視頻,誤打誤撞試出來的。
這次我就不錄屏了,工友們自己運行試試看吧。
let playing = false
let video = null
let button = null
function preload() {
video = createVideo('assets/02.mp4')
}
function setup() {
video.hide()
createCanvas(568, 320)
button = createButton('播放')
button.mousePressed(toggleVid)
}
function draw() {
image(video, 0, 0)
}
function toggleVid() {
if (playing) {
video.pause();
button.html('播放');
} else {
video.loop();
button.html('暫停');
}
playing = !playing;
}
上面的代碼中,我在 setup() 里使用了 video.hide() 方法將 createVideo() 創建出來的 <video> 元素隱藏起來,因為這次我們需要將視頻渲染到畫布中,所以不再需要 <video> 了。
接著我們在 draw() 里用 image 不斷刷新視頻,所以上面這樣寫是對的。
其他地方沒變化。
如果你的設備有攝像頭,p5.js 是支持調用攝像頭并將內容展示在畫布上的。
let capture
function setup() {
createCanvas(480, 360)
capture = createCapture(VIDEO)
capture.hide()
}
function draw() {
image(capture, 0, 0, capture.width, capture.height)
}
通過 createCapture() 方法創建一個包含攝像頭的音頻/視頻源 <video> 元素,把這個元素的內容放在 p5.js 的 image 控件里。
這個默認是顯示的,而且它是一個獨立的元素,默認和畫布分離。所以使用 capture.hide() 方法把 <video> 元素隱藏起來,不然頁面中會出現兩個視頻窗口。
其他做法和前面的【方式2】差不多,這里就不再啰嗦了。
《p5.js 光速入門》
《p5.js 使用npm安裝p5.js后如何使用?》
《p5.js 變換操作》
《p5.js 3D圖形-立方體》
《p5.js 開發點彩畫派的繪畫工具》
《p5.js畫布操作實戰:創建,綁定指定元素,動態調整大小,隱藏滾動條,刪除畫布》
點贊 + 關注 + 收藏 = 學會了
用說明:把代碼中的視頻路徑換成與自己的相對路徑或絕對路徑,播放器的窗口大小,根據需要修改高和寬的參數。
1.avi格式
復制代碼
代碼如下:
<object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="1">
<param name="AutoStart" value="1">
<param name="AutoRewind" value="0">
<param name="PlayCount" value="0">
<param name="Appearance value="0 value=""">
<param name="BorderStyle value="0 value=""">
<param name="MovieWindowHeight" value="240">
<param name="MovieWindowWidth" value="320">
<param name="FileName" value="http://www.jb51.net/sample.avi">
<embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" autostart="1" autorewind="0" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="http://www.jb51.net/sample.avi" src="sample.avi">
</embed>
</object>
2.mpg格式
復制代碼
代碼如下:
<object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250">
<param name="Appearance" value="0">
<param name="AutoStart" value="-1">
<param name="AllowChangeDisplayMode" value="-1">
<param name="AllowHideDisplay" value="0">
<param name="AllowHideControls" value="-1">
<param name="AutoRewind" value="-1">
<param name="Balance" value="0">
<param name="CurrentPosition" value="0">
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableSelectionControls" value="0">
<param name="EnableTracker" value="-1">
<param name="Filename" value="http://www.jb51.net/sample.mpg" valuetype="ref">
<param name="FullScreenMode" value="0">
<param name="MovieWindowSize" value="0">
<param name="PlayCount" value="1">
<param name="Rate" value="1">
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="ShowControls" value="-1">
<param name="ShowDisplay" value="-1">
<param name="ShowPositionControls" value="0">
<param name="ShowTracker" value="-1">
<param name="Volume" value="-480">
</object>
3.rm格式
復制代碼
代碼如下:
<OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=288 WIDTH=352> <param name="_ExtentX" value="9313">
<param name="_ExtentY" value="7620">
<param name="AUTOSTART" value="0">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="SRC" value="rtsp://203.207.131.35/vod/dawan-a.rm";>
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="Clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000"><embed SRC type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ImageWindow" HEIGHT="288" WIDTH="352" AUTOSTART="false"> </OBJECT>
4.wmv格式
復制代碼
代碼如下:
<object id="NSPlay" width=200 height=180 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" align="right" hspace="5">
<!-- ASX File Name -->
<param name="AutoRewind" value=1>
<param name="FileName" value="xxxxxx.wmv">
<!-- Display Controls -->
<param name="ShowControls" value="1">
<!-- Display Position Controls -->
<param name="ShowPositionControls" value="0">
<!-- Display Audio Controls -->
<param name="ShowAudioControls" value="1">
<!-- Display Tracker Controls -->
<param name="ShowTracker" value="0">
<!-- Show Display -->
<param name="ShowDisplay" value="0">
<!-- Display Status Bar -->
<param name="ShowStatusBar" value="0">
<!-- Diplay Go To Bar -->
<param name="ShowGotoBar" value="0">
<!-- Display Controls -->
<param name="ShowCaptioning" value="0">
<!-- Player Autostart -->
<param name="AutoStart" value=1>
<!-- Animation at Start -->
<param name="Volume" value="-2500">
<param name="AnimationAtStart" value="0">
<!-- Transparent at Start -->
<param name="TransparentAtStart" value="0">
<!-- Do not allow a change in display size -->
<param name="AllowChangeDisplaySize" value="0">
<!-- Do not allow scanning -->
<param name="AllowScan" value="0">
<!-- Do not show contect menu on right mouse click -->
<param name="EnableContextMenu" value="0">
<!-- Do not allow playback toggling on mouse click -->
<param name="ClickToPlay" value="0">
</object>
5:最簡單的播放代碼
復制代碼
代碼如下:
<embed src="http://www.jb51.net/sample.wmv" autostart="true" loop="true" width="200" height="150" >
6:有圖像的rm格式
復制代碼
代碼如下:
<OBJECT classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA height=288 id=video1 width=305 VIEWASTEXT>
<param name=_ExtentX value=5503>
<param name=_ExtentY value=1588>
<param name=AUTOSTART value=-1>
<param name=SHUFFLE value=0>
<param name=PREFETCH value=0>
<param name=NOLABELS value=0>
<param name=SRC value=//www.jb51.net/sample.ram>
<param name=CONTROLS value=Imagewindow,StatusBar,ControlPanel>
<param name=CONSOLE value=RAPLAYER>
<param name=LOOP value=0>
<param name=NUMLOOP value=0>
<param name=CENTER value=0>
<param name=MAINTAINASPECT value=0>
<param name=BACKGROUNDCOLOR value=#000000>
</OBJECT>
7:無圖像的rm格式:(如相聲,歌曲...)
復制代碼
代碼如下:
<object ID=video2 WIDTH=300 HEIGHT=62 CLASSID=CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA>
<param name=_ExtentX value=9657>
<param name=_ExtentY value=847>
<param name=AUTOSTART value=-1>
<param name=SHUFFLE value=0>
<param name=PREFETCH value=0>
<param name=NOLABELS value=0>
<param name=SRC value=//www.jb51.net/sample.rm>
<param name=CONTROLS value=StatusBar,controlpanel>
<param name=CONSOLE value=Clip1>
<param name=LOOP value=0>
<param name=NUMLOOP value=0>
<param name=CENTER value=0>
<param name=MAINTAINASPECT value=0>
<param name=BACKGROUNDCOLOR value=#000000>
</object>
8:最簡單的media格式的播放器
復制代碼
代碼如下:
<embed src=mms://www.jb51.net/sample.wmv width=200 height=200 autostart=true loop=true></embed>
9:有圖像的media播放器,自動調用網上的插件
復制代碼
代碼如下:
<object id=nstv classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 width=280 height=265 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>
<param name=URL value=//www.jb51.net/sample.wma>
<PARAM NAME=UIMode value=full><PARAM NAME=AutoStart value=true>
<PARAM NAME=Enabled value=true>
<PARAM NAME=enableContextMenu value=false>
<param name=WindowlessVideo value=true></object>
10:無圖像的media播放器
復制代碼
代碼如下:
<object id=nstv classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 width=280 height=60 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>
<param name=URL value=//www.jb51.net/sample.wma>
<PARAM NAME=UIMode value=full><PARAM NAME=AutoStart value=true>
<PARAM NAME=Enabled value=true>
<PARAM NAME=enableContextMenu value=false>
</object>
11:在線播放rm格式視頻代碼
復制代碼
代碼如下:
<object id="player" name="player" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="400" height="272">
<param name="_ExtentX" value="18415">
<param name="_ExtentY" value="9102">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://www.jb51.net/sample.rm">
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object><br>
<object ID="RP2" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="400" HEIGHT="57">
<param name="_ExtentX" value="18415">
<param name="_ExtentY" value="1005">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://www.jb51.net/sample.rm">
<PARAM NAME="CONTROLS" VALUE="ControlPanel,StatusBar">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>
媒體播放器的外觀界面
在網頁中,你可以通過相關屬性來控制媒體播放器的哪些部分出現,哪些部分不出現。
媒體播放器包括如下元素:
VideoDisplayPanel:視頻顯示面板;
VideoBorder:視頻邊框;
ClosedCaptioningDisplayPanel;字幕顯示面板;
TrackBar;搜索欄;
ControlBarwithAudioandPositionControls:帶有聲音和位置控制的控制欄;
GoToBar:轉到欄;
DisplayPanel:顯示面板;
StatusBar:狀態欄;
下面的屬性用來決定顯示哪一個元素:
ShowControls屬性:是否顯示控制欄(包括播放控件及可選的聲音和位置控件);
ShowAudioControls屬性:是否在控制欄顯示聲音控件(靜音按鈕和音量滑塊);
ShowPositionControls屬性:是否在控制欄顯示位置控件(包括向后跳進、快退、快進、向前跳進、預覽播放列表中的每個剪輯);
ShowTracker屬性:是否顯示搜索欄;
ShowDisplay屬性:是否顯示顯示面板(用來提供節目與剪輯的信息);
ShowCaptioning屬性:是否顯示字幕顯示面板;
ShowGotoBar屬性:是否顯示轉到欄;
ShowStatusBar屬性:是否顯示狀態欄;
播放列表
媒體播放器提供下面的方法來訪問播放列表中的剪輯:
Next方法,跳到節目(播放列表)中的下一個剪輯;
Previous方法,跳回到節目中的上一個剪輯;
媒體播放器的一個特性是能夠預覽節目中的每一個剪輯,使用如下屬性:
PreviewMode屬性,決定媒體播放器當前是否處于預覽模式;
CanPreview屬性,決定媒體播放器能否處于預覽模式;
在windows媒體元文件中,可以為每一個剪輯指定預覽時間——PREVIEWDURATION,如果沒有指定,那么默認的預覽時間是10秒鐘。
你也可以用Windows媒體元文件來添加watermarks與banners,元文件也支持插入廣告時的無間隙流切換。
節目信息
使用GetMediaInfoString方法可以返回相關剪輯或節目的如下信息:
文件名:Filename
標題:Title
描述:Description
作者:Author
版權:Copyright
級別:Rating
URLs:logoicon、watermark、banner的地址
剪輯信息可以放在媒體文件中,也可以放在Windows媒體元文件中,或者兩者都放。如果在元文件中指定了剪輯信息,那么用GetMediaInfoString方法返回的就是元文件中的信息,而不會返回剪輯中包含的信息。
在元文件中,附加信息可以放置在每一個剪輯或節目的PARAM標簽中。你可以為每個剪輯添加任意多個PARAM標簽,用來存儲自定義的信息或鏈接到相關站點。在PARAM標簽中的信息可以通過GetMediaParameter方法來訪問。
下面的屬性返回有關大小和時間的信息:
ImageSourceHeight、ImageSourceWidth:返回圖像窗口的顯示尺寸;
Duration屬性,返回剪輯的長度(秒),要檢測這個屬性是否包含有效的數值,請檢查IsDurationValid屬性。(對于廣播的視頻,其長度是不可預知的)。
字幕
你可以用.smi文件來為你的節目添加字幕。媒體播放器支持下面的屬性來處理字幕:
SAMIFileName屬性,指定.smi文件的名字;
SAMILang屬性,指定字幕的語言(如果沒有指定則使用第一種語言);
SAMIStyle屬性,指定字幕的文字大小和樣式;
ShowCaptioning屬性,決定是否顯示字幕顯示面板;
腳本命令
伴隨音頻、視頻流,你可以在流媒體文件中加入腳本命令。腳本命令是多媒體流中與特定時間同步的多對Unicode串。第一個串標識待發命令的類型,第二個串指定要執行的命令。
當流播放到與腳本相關的時間時,控件會向網頁發送一個ScriptCommand事件,然后由事件處理進程來響應這個事件。腳本命令字符串會作為腳本命令事件的參數傳遞給事件處理器。
媒體播放器會自動處理下面類型的內嵌腳本命令:
1)URL型命令:當媒體播放器控件收到一個URL型的命令時,指定的URL會被裝載到用戶的默認瀏覽器。如果媒體播放器嵌在一個分幀的HTML文件中,URL頁可以裝載到由腳本命令指定的幀內。如果腳本命令沒有指定一個幀,將由DefaultFrame屬性決定將URL頁裝入哪一幀。
你可以通過設置InvokeURLs屬性來決定是否自動處理URL型的腳本命令。如果這個屬性的值為false,媒體播放器控件將忽視URL型命令。但是腳本命令事件仍會觸發,這就允許你有選擇地處理URL型命令。
URL型命令指定的是URL的相對地址。基地址是由BaseURL屬性指定的。媒體播放器控件傳送的腳本命令事件的命令參數是鏈接好的地址。
2)FILENAME型命令:當媒體播放器控件收到一個FILENAME型的命令時,它將FileName屬性設置為腳本命令提供的文件,之后媒體播放器會打開這個文件開始播放。媒體播放器控件總是自動處理FILENAME型命令,不象URL型命令,它們不能被禁止。
3)TEXT型命令:當媒體播放器控件收到一個TEXT型的命令時,它會將命令的內容顯示在控件的字幕窗口。內容可以是純文本的,也可以是HTML。
4)EVENT型命令:當媒體播放器控件收到一個EVENT型的命令時,它會在媒體元文件中搜索EVENT元素的NAME屬性。如果NAME屬性與腳本命令中的第二個字符串匹配,媒體播放器控件就執行包含在EVENT元素中的條目。
5)OPENEVENT型命令:當媒體播放器控件收到一個OPENEVENT型的命令時,它會在媒體元文件中檢查EVENT元素,并打開匹配的標題,但不播放,直到收到來自EVENT型命令的同名真實事件。
捕捉鍵盤和鼠標事件
EnableContextMenu與ClickToPlay屬性為用戶提供了在圖像窗口進行操作的方法。
如果EnableContextMenu屬性為true,在圖像窗口右擊鼠標可以打開關聯菜單,如果將ClickToPlay屬性設為true,用戶可以單擊圖像窗口進行播放與暫停的切換。
要接收鼠標移動和單擊事件,請將SendMouseMoveEvents和SendMouseClickEvents屬性設為true。鼠標事件有:
MouseDown,當用戶按下鼠標時產生;
MouseUp,當用戶釋放鼠標時產生;
MouseMove,當用戶移動鼠標時產生;
Click,當用戶在媒體播放器上單擊鼠標按鈕時產生;
DbClick,當用戶在媒體播放器上雙擊鼠標按鈕時產生;
要接收鍵盤事件,請將SendKeyboardEvents屬性設為true。鍵盤事件有:
KeyDown,當用戶按下一個鍵時產生;
KeyUp,當用戶釋放一個鍵時產生;
KeyPress,當用戶按下并釋放一個鍵時產生;
監測流狀態與網絡鏈接
流狀態屬性包括:
PlayState:播放狀態;
OpenState:打開狀態;
Bandwidth:帶寬;
支持的事件有:
OpenStateChange:打開狀態改變(僅當SendOpenStateChangeEvents屬性為true時觸發)
PlayStateChange:播放狀態改變(僅當SendPlayStateChangeEvents屬性為true時觸發)
EndOfStream:流結束時觸發;
NewStream:打開新流時觸發;
網絡接收屬性包括:
ReceptionQuality:接收質量;
ReceivedPackets:已經收到的包;
LostPackets:丟失的包;
監測緩沖的屬性有:
BufferingTime:緩沖時間;
BufferingCount:緩沖次數;
BufferingProgress:緩沖進程;
Buffering:緩沖事件;
錯誤處理
媒體播放器提供了內建的錯誤處理功能——在對話框或狀態欄顯示錯誤信息。另外,你可以自己添加錯誤處理程序。如果SendErrorEvents屬性設置為true,將不會顯示錯誤框,而是發送錯誤事件;如果SendErrorEvents屬性設置為false,將顯示錯誤框,而是發送錯誤事件。
媒體播放器支持下面的錯誤處理事件:
Error事件,指有危險性錯誤發生;
Warning事件,指發生了非危險性的錯誤;
當你的應用程序接收到一個錯誤事件,你可以檢測下面的屬性來確定具體的錯誤信息:
HasError:檢測目前的媒體播放器是否有錯誤;
ErrorCode:提供與該類型錯誤相關的代碼值;
ErrorDescription:提供錯誤的描述信息;
ErrorCorrection:指定媒體播放器對該類型的錯誤進行校正;
播放CD
媒體播放器將CD看作(在每個音軌的開頭具有標記的)單一音頻流。要在網頁中使用CD,你需要將FileName屬性設為CDAUDI,必須帶有冒號,如下所示:
復制代碼
代碼如下:
<HTML>
<HEAD><TITLE>CDAudioPlaybackExample</TITLE></HEAD>
<BODY>
<OBJECTID="MediaPlayer"
CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
WIDTH="320"
HEIGHT="508"
STYLE="position:absolute;left:0px;top:70px;">
<PARAMNAME="FileName"VALUE="cdaudi">
<PARAMNAME="AutoStart"VALUE="0">
<PARAMNAME="ShowControls"VALUE="1">
<PARAMNAME="ShowStatusBar"VALUE="1">
<PARAMNAME="ShowDisplay"VALUE="1">
</OBJECT>
</BODY>
</HTML>
之后你可以用Play方法播放CD了。
你可以在windows媒體元文件中指定播放順序以及每個音軌的信息。示例如下:
<ASXVERSION="3.0">
<TITLE>CDAudiowiththeMediaPlayer</TITLE>
<AUTHOR>WindowsMediaTechnologies</AUTHOR>
<COPYRIGHT>(c)1999,Microsoft,Inc.</COPYRIGHT>
<ENTRY>
<TITLE>Track1:Title1</TITLE>
<REFhref="/blog/cdaudi"/>
<STARTMARKERNUMBER="1"/>
<ENDMARKERNUMBER="2"/>
</ENTRY>
<ENTRY>
<TITLE>Track2:Title2</TITLE>
<REFhref="/blog/cdaudi"/>
<STARTMARKERNUMBER="2"/>
<ENDMARKERNUMBER="3"/>
</ENTRY>
<ENTRY>
<TITLE>Track3:Title3</TITLE>
<REFhref="/blog/cdaudi"/>
<STARTMARKERNUMBER="3"/>
<ENDMARKERNUMBER="4"/>
</ENTRY>
<ENTRY>
<TITLE>Track4:Title4</TITLE>
<REFhref="/blog/cdaudi"/>
<STARTMARKERNUMBER="4"/>
</ENTRY>
</ASX>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。