萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> dreamweaver教程 >> Dreamweaver在網頁中給視頻播放窗口預設圖像

Dreamweaver在網頁中給視頻播放窗口預設圖像

我們在網頁中插入視頻時,有沒有發現,當視頻未播放之前播放窗口黑乎乎的甚是難看,那麼能否在視頻未播放之前先預設一些圖像呢?下面給網友們介紹兩種增加預設圖片的方法。

一、從視頻中獲得圖像
  
從視頻中獲得,主要是讓視頻跳到所需要的幀,然後暫停播放。下面請看在wmp與rm中的代碼示例:

Window Media Player:

1、首先在BODY中添加wmp的控件:

<object id="WMVplayer" height="300" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

<param NAME="AutoStart" VALUE="-1">

<!--是否自動播放-->

<param NAME="url" value="video。mpg">

<!--播放的文件地址-->

</object>

2、其次在HEAD中添加js代碼:

<script>

var obj,obj1;

function stopWMVplayer()

{

if(document。getElementById("WMVplayer")。Controls。currentPosition>=1。1)//如果當前位置超過1。1,則停止播放,並且清除stopWMVplayer函數的執行;否則繼續運行stopWMVplayer函數。

{

document。getElementById(“WMVplayer”)。Controls。Pause();

window。clearTimeout(obj);

}

else

{

obj=window。setTimeout("stopWMVplayer()",10);

}

}

3、再次為body添加onload事件:

<body onload=” document。getElementById("WMVplayer")。Controls。currentPosition=1;stopWMVplayer();”>
RealOne:

1、首先在BODY中添加rm的控件:

<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" name="RMplayer" width="300" height="240 id="RMplayer">

<param name="AUTOSTART" value="-1">

<!--是否自動播放-->

<param name="SRC" value="flower。rm">

<!--播放的文件地址-->

<param name="CONTROLS" value="Imagewindow,ControlPanel,StatusBar">

<!--指定哪些控制可見-->

</object>

2、其次在HEAD中添加js代碼:

function stopRMplayer()

{

if(document。getElementById("RMplayer"。getPosition()>=1100)// 如果當前位置超過1100,則停止播放,並且清除stopRMplayer函數的執行;否則繼續運行

{

document。getElementById("RMplayer")。doPause();

window。clearTimeout(obj1);

}

else

{

obj1=window。setTimeout("stopRMplayer()",10);

}

}

3、再次為body添加onload事件:

<body onload="document。getElementById('RMplayer')。setPosition(2500);stopRMplayer(); ">


二、從外部獲取圖像
  
前面主要是從視頻中獲得某個圖像,那麼我們如果需要從外部獲得一張圖片然後顯示到窗口中,又是怎麼完成呢?

Window Media Plyaer:

1、首先在BODY中添加wmp的控件:

<object id="WMVplayer" height="300" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

<param NAME="AutoStart" VALUE="-1">

<!--是否自動播放-->

<param NAME="PlayCount" VALUE="999">

<!—控制播放次數-->

<param NAME="url" value="movie-pic。gif">

<!--播放的文件地址-->

</object>

2、其次在HEAD中添加js代碼:

<script>

Var obj;

function WMVplayer()

{

if((document。getElementById("WMVplayer")。PlayState=="1"||document。getElementById("WMVplayer")。PlayState=="2")&&document。getElementById("WMVplayer")。url。indexOf("movie-pic。gif")>0)//當視頻文件為圖像文件時,並且播放狀態為暫停或停止則開始播放視頻文件

{

document。getElementById("WMVplayer")。url="video。mpg";

window。clearTimeout(obj);

}

obj=window。setTimeout("WMVplayer()",10);

}

</script>

3、再次為body添加onload事件:

<body onload="WMVplayer();">

RealOne:

1、首先在BODY中添加rm的控件:

<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" name="RMplayer" width="300" height="240 d="player">

<param name="AUTOSTART" value="-1">

<!--是否自動播放-->

<param name="SRC" value="movie-pic。gif">

<!--播放文件地址-->

<param name="CONTROLS" value="Imagewindow,ControlPanel,StatusBar">

<!--指定哪些控制可見-->

<param name="LOOP" value="true">

<!--是否循環播放-->

</object>

2、其次在HEAD中添加js代碼:

<script>

var obj;

function RMplayer()

{

if((document。getElementById("RMplayer")。GetPlayState()=="4"||document。getElementById("RMplayer")。GetPlayState()=="0")&&document。getElementById("RMplayer")。GetSource()。indexOf("movie-pic。gif")>0) //當視頻文件為圖像文件時,並且播放狀態為暫停或停止則開始播放視頻文件

{

document。getElementById("RMplayer")。SetSource("flower。rm");

window。clearTimeout(obj);

}

obj=window。setTimeout("RMplayer()",10);

}

</script>

3、再次為body添加onload事件:

<body onload="RMplayer();">  

其實Window Media Player與RealOne中功能的實現原理基本是一致的,只是一些實現方法的語句不同而已,希望大家在使用時有所注意,關於兩個播放器的其它語句的具體說明這裡就不再多費口舌了,大家可以通過網絡進行搜索。

        :更多精彩教程請關注三聯網頁設計教程 欄目,

copyright © 萬盛學電腦網 all rights reserved