1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學-滑鼠滑入自動播放影片

jQuery教學-滑鼠滑入自動播放影片

2009/07/29

梅問題-jQuery教學-flashplayer滑鼠觸碰播放影片

  一直以來要在網頁嵌入Flash都得要貼很多的碼,以及載入js才可去虛線框,真的不是很方便,於是請教了男丁老師有沒有更方便一點的方法,馬上男丁老師就找到一個jQuery外掛,可快速的將flash嵌入到網頁中,但梅干就在想,若只是單純嵌入實在有些無趣, 於是梅干就想到,之前在blog ad的廣告中曾看到,每當有電影上映時,滑鼠滑入縮圖,就會自動的播放flv影片 ,這真的很酷~於是梅干昨天就利用了Flex寫了一隻播放器,再透過jQuery把參數丟給它,然後自動播放影片, 並且還可指定要播放影片的大小,樣子就可即時的播放影片 ,相當的方便,且梅干已經都整合好了,各位只要把縮圖影片位置指定好,就可使用無需撰寫任何的程式碼。


放在<head>…..</head>之間:

<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js"></script>
<script type=“text/javascript” src=“js/jquery.flash.js”></script>
<script type=“text/javascript” src=“js/flvplayer.js”></script>

放在<body>…..</body>之間:

<img src=“alumb/movie01.jpg” v=“video/video01.flv” w=“400” h=“300”/><br /><br />
<img src=“alumb/movie02.jpg” v=“video/video02.flv” w=“160” h=“120”/><br /><br />
<img src=“alumb/movie03.jpg” v=“video/video03.flv”/><br />
<div id=“swf” style=“position:absolute; overflow:hidden;”></div>
src:影片縮圖
v:影片的存放位置
w:影片播放的寬度
h:影片播放的高度

若w、h沒設,預設為320×240


範例預覽:


[範例下載]
※解壓縮密碼:minwt.com