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

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

放在<head>.....</head>之間:
?View Code JAVASCRIPT
1 2
<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>之間:
1 2 3 4 5 6 7 8 9 10 11
<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




回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 5 梅留言

  • 第5梅
    beanbean 說道:

    ….但是
    可以不用"滑入"嗎?
    面是用按下來選擇
    還有影片不能 暫停 也不能 調整音量…

    回應:
    這範例只有載入影片而已~~
    並沒有用來控制影片中的任何事件
  • 第4梅
    beanbean 說道:

    :哭: 這個方法找了很久!
    我就是想做種這種效果!

    如果我要做到點選一個按鈕,令一個影片變成另一個段片段? (如圖)
    http://img.photobucket.com/albums/v243/beancurd1988/c6e9a178.jpg

    回應:
    關於這個你可到男丁的部落格問問,
    他是這方面的專家http://abgne.tw