如何創建背景視頻的第3部分

05年1月

將視頻添加到Adobe Muse

背景視頻很容易添加在繆斯感謝免費的部件。

Adobe Muse的一個非常有趣的方面是,它允許您使用與用於佈置出版物的佈局類似的工作流程來創建網頁。 您不需要深入了解構建網站或頁面的代碼,但熟悉HTML5,CSS和JavaScript就不會受到傷害。

雖然傳統的網絡視頻通常是通過使用HTML5 Video API添加的,但Adobe Muse通過它所稱的“小部件”來實現相同的功能。 小部件創建特定任務所需的HTML 5,但在Muse中使用純文本界面在頁面發佈時編寫代碼。

在本練習中,我們將使用一個小部件,您可以從Muse Resources免費下載這個小部件。 當小部件下載時,您只需打開.zip文件,然後雙擊全屏視頻文件夾中的.mulib文件。 這會將它安裝到您的Adobe Muse的副本中。

05年05月

如何在Adobe Muse CC中為背景視頻準備頁面

我們首先創建一個新網站並設置頁面尺寸。

安裝小部件後,您現在可以創建將使用該視頻的頁面。

在開始之前,為您的Muse網站創建一個文件夾。 在該文件夾內創建另一個文件夾 - 我使用“ 媒體 ” - 並將您的mp4和webm版本的視頻移動到該文件夾中。

當您啟動Muse時,請選擇File> New Site 。 當佈局對話框打開時,選擇Desktop作為初始佈局 ,並將頁面寬度頁面高度值更改為1200900 。 點擊確定

在平面視圖中雙擊主頁面以打開母版頁面。 當主頁面打開時,將頁眉和頁腳指南移動到頁面的頂部和底部。 這個例子你確實不需要頁眉和頁腳。

05年3月

如何在Adobe Muse CC中使用全屏幕背景視頻小部件

所有你需要做的就是添加視頻名稱,讓小部件處理剩下的部分。

使用小部件非常簡單。 您需要做的第一件事是通過選擇視圖>計劃模式返回到計劃視圖。 當計劃視圖打開時,雙擊主頁打開它。

打開“庫”面板 - 如果它未在界面右側打開,請選擇“ 窗口”>“庫” ,然後向下旋轉[MR]全屏幕背景視頻文件夾。 將小部件拖到該頁面的文件夾中。

您會注意到選項會要求您輸入視頻的mp4和webm版本的名稱。 請輸入與放置它們的文件夾拼寫完全相同的名稱。 確保不出錯的一個小技巧是複制mp4視頻的名稱並將其粘貼到選項菜單MP4WEBM區域。

另一個訣竅:所有這個小部件都是為你編寫HTML 5代碼。 你可以告訴這個,因為你在widget中看到<> 。 在這種情況下,您可以將該部件從網頁上放到粘貼板上,它仍然可以工作。 這樣它就不會干擾您將放置在頁面上的任何內容。

04年05月

如何在Adobe Muse CC中添加視頻和測試頁面

當您測試網站或網頁時,視頻會播放。

儘管您已經添加了播放視頻的代碼,但Muse仍然不知道這些視頻的位置。 要解決此問題,請選擇文件>添加上傳文件 。 當“ 上傳”對話框打開時,導航至包含視頻的文件夾,選擇它們並單擊“ 打開” 。 為確保他們已上傳,請打開“ 資源”面板 ,您應看到兩個視頻。 把它們留在面板中。 他們不需要放在頁面上。

要測試項目,請選擇文件>在瀏覽器中預覽頁面,或者因為這是一個頁面,所以文件>瀏覽器中的預覽站點 。 您的默認瀏覽器將打開,視頻 - 在我的情況下是熱帶暴雨 - 將開始播放。

此時,您可以將Muse文件視為常規網頁,並將內容添加到主頁,並且視頻將在其下面播放。

05年05月

如何在Adobe Muse CC中添加視頻海報框架

總是添加一個海報框架到任何視頻項目。

這是我們在這裡討論的網絡,根據連接速度的不同,您的用戶很可能會打開頁面並在視頻加載時盯著空白屏幕。 這不是一件好事。 以下是如何處理這種尷尬。

這是一個“最佳實踐”,包括視頻的海報框架,視頻加載時會出現。 這通常是視頻中一幀的全尺寸屏幕截圖。

要添加海報框,請在頁面頂部的瀏覽器填充上單擊一次。 點擊圖片鏈接並導航到要使用的圖片。 在擬合區域中,選擇縮放填充 ,然後單擊位置區域中的中心點 。 這將確保在瀏覽器的視口大小更改時,圖像始終會從圖像的中心縮放。 您還將看到圖像填充頁面。

另一個小竅門是至少有一個堅實的不是白色填充顏色,以防海報框架需要一段時間才能出現。 要執行此操作,請單擊顏色芯片以打開Muse顏色選擇器。 選擇吸管工具並單擊圖像中的主要顏色。 完成後,單擊頁面關閉瀏覽器填充對話框。

此時,您可以保存該項目或將其發布。

本系列的最後一部分向您展示瞭如何編寫將視頻幻燈片放入網頁背景的HTML5代碼。