所有主題

+
Home > 資源>技巧> 如何讓 HTML5 幻燈片

如何使 HTML5 幻燈片

HTML5,作為下一代網路標準,在拐角處。你會將 HTML5 支援添加到您的網站?也許它是至少準備時間。這篇文章將告訴你 2 如何使 HTML5 幻燈片嵌入到您的網站。

自運行 HTML5 幻燈片

HTML5 的最大升級之一是你可以直接嵌入並通過使用播放線上視頻。這種方式,遊客可以觀看 HTML5 幻燈片,只要他們的瀏覽器支援 HTML5。沒有所需的 Flash 播放機。因為 HTML5 尚未到其最終版本,視頻編解碼器可能可以使用 WebM、 H264、 吊架或兩者。

這裡是如何你可以嵌入幻燈片 HTML5 視頻:

< 視頻 poster="movie.jpg"控制項 >
< 源 src='movie.webm' 類型 =' 視頻/webm;編解碼器 ="vp8.0,vorbis"' / >
< 源 src='movie.ogv' 類型 =' 視頻/ogg;編解碼器 ="theora,vorbis"' / >
< 源 src='movie.mp4' 類型 =' 視頻/mp4;編解碼器 ="avc1.4D401E、 mp4a.40.2"'/ >
</視頻 >

如果你能看到下面的視頻,您的 web 瀏覽器支援 HTML5,太。如今,大多數瀏覽器已經支援 HTML5 的幻燈片。請參閱有關 HTML5 瀏覽器的更多詳細資訊。

HTML5 創建的幻燈片顯示視頻與DVD Slideshow Builder Deluxe -包括超過 100 過渡。

現在你需要什麼只是 HTML5 幻燈片軟體並創建幻燈片視頻格式MP4 (AVC)

Download Win Version

互動式的 HTML5 幻燈片

像在網站上目前使用 Flash 投影片放映,還可以設計 HTML5 幻燈片沒有安裝任何東西。當然,你不必自己編寫的編解碼器。在這裡我們採取廣泛共用的 HTML5 放映幻燈片線上示例向您展示如何將嵌入到 HTML5 幻燈片。

1.將檔放在正確的地方。

當你從這裡下載 HTML5 專案檔案時,解壓到您的電腦、 檔和移動或上載到您的網站的資料夾。

html5 slideshow

也有其他人來分享他們在網上的幻燈片 HTML5 專案。谷歌一和變化以適應您的需要。它是更好地把版權通知感謝別人的工作,或遵循的許可聲明。

2.更改代碼以滿足您的需求

通常,您不需要更改 css 和 js 檔,除了連結位址的代碼,如果你有放在不同的資料夾中。例如,應將 css 檔連結位址更改為 'scripts/script.js',如果你已經到現有資料夾中稱為 '腳本' 的 script.js 檔。這種類型的連結位址稱為相對連結,而另一種類型是絕對的鏈路,如 HTTP://yoursite.com/scripts/script.js。如果 HTML5 幻燈片嵌入到一個資料夾中的頁,則應使用類似 '。/scripts/script.js。如果你不熟悉的差異,更好地將使用絕對連結。

這個 HTML5 幻燈片的最重要部分被標記在紅色的盒子裡。將這些代碼複製到你想要 HTML5 幻燈片可顯示和更改圖像位址像任何頁上文所述。

html5 slideshow code
點擊放大。

3.與 HTML5 瀏覽器預覽

最後,請參閱如何 HTML5 幻燈片顯示看起來像在 HTML5 瀏覽器中。通常,您將獲得這個 HTML5 幻燈片。在頁面上,您也可以下載 HTML5 幻燈片檔,看看詳細設計過程,它由馬丁 · 安格洛夫。

也可查閱Flash 幻燈片範本網站幻燈片進行點擊。

與產品有關的問題?直接對我們的支援小組說話 >>

返回頁首