Javascript, 網頁設計

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

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

放在<head>.....</head>之間:
<script type="text/javascript" src="https://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
UAG軍規iPhone防摔殼