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

jQuery教學-滑鼠滑入自動播放影片(加強版)

2009/07/30

梅問題-jQuery教學-滑鼠觸碰播放影片-加強版

  上一篇當中,其實已成功的將Flash影音與jQuery作結合,雖然已經可以使用,但整體的流暢度來說,有些的不完美,因此梅干請教了一下男丁老師,這有解嗎?於是男丁提了一個很重要的概念,那就是直接透過js與flex來作溝通,所以梅干就花了點時間作了點修正,並加入了Loading動畫,以及消除影音最後一格所殘留下的影像問題,讓整體使用起來更加順暢,並且梅干也將它們整合好了,各位一樣的只要把縮圖跟影音準備好,就可立即使用了。


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

<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js"></script>
<script type=“text/javascript” src=“js/minwt.videoplay.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;left:-999999px;”> <object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” id=“JSCallFlex” width=“0” height=“0”> <param name=“movie” value=“jsCallflexVideo.swf” /> <param name=“quality” value=“high” /> <param name=“allowScriptAccess” value=“sameDomain” /> </object> </div>

src:影片縮圖
v:影片的存放位置
w:影片播放的寬度
h:影片播放的高度
若w、h沒設,預設為320×240

※經梅干測試,可在各大瀏覽器中使用,如:IE6~8、Firefox2~3、Google chrome、Safari、Opera…等。


範例預覽:


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