Javascript, 網頁設計

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

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

放在<head>.....</head>之間:
<script type="text/javascript" src="https://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