隱私權聲明
本公司關心使用者隱私權與個人資訊,並遵守本公司的網站隱私政策,使用者若有任何問題,可以參考本公司的「網站隱私政策」,或利用電子郵件或連絡電話詢問本公司.
2014
11
03

Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer

關鍵字:網頁設計程式設計JAVA程式設計網頁設計作品

部份網站在製作網頁的過程中,會在背景中放置一張圖片讓網頁看起來豐富,
現在我們就可以利用HTML5+JQuery將Youtube視頻以全螢幕方式呈現在網頁背景上。

實際在運作時,可依以下方法,在您的網頁中進行修改:
1. 於<head></head>區間加入script的內容

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>

2. JS call

<script>
jQuery(function(){
jQuery(".player").mb_YTPlayer();
});
</script>

3. 初始化YTPlayer背景

<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">My video</a>
你可能有興趣的作品案例
傑立資訊傑立資訊事業有限公司
Powered by AWS Cloud Computing

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.| 網站隱私政策

線上詢價