H5制作視頻或交互式視頻H5是屬于比較受歡迎的H5的玩法，方法很多，下面我們介紹如何使用 意派Epub360 H5頁面制作工具制作出視頻H5的效果

視頻制作尺寸

手機(jī)屏幕尺寸型號(hào)如此繁多，如何確保一致的用戶體驗(yàn)，尺寸控制是一個(gè)關(guān)鍵因素。現(xiàn)在提供了兩種尺寸供大家參考，可以根據(jù)實(shí)際需要二選一。

官方建議尺寸1：制作750*1200px尺寸大小的視頻，調(diào)整畫布尺寸為微信PLUS畫布，把視頻拉伸成375*603px（內(nèi)框尺寸，編輯器里視頻變形不影響）。

尺寸2：制作符合畫布（外框）大小的視頻，即844*1496px（這是畫布尺寸，注意內(nèi)容盡量放在安全內(nèi)框）

視頻來源：《大哥，一起洗澡嗎》by三人游創(chuàng)意坊

視頻格式標(biāo)準(zhǔn)

前期需要制作視頻，沒有視頻素材的派友也可以下載本次案例的視頻體驗(yàn)一把。在制作時(shí)候要注意，視頻的清晰度會(huì)受到編碼頻率，格式，幀速率（每秒多少幀），比特率，視頻的體積，畫質(zhì)，視頻的尺寸等因素的影響，這里就不講解太多了，主要是針對(duì)我們編輯器上傳本地視頻來說明一下。

這里是視頻制作軟件AE的設(shè)置參數(shù)，需要注意的幾點(diǎn)：

視頻格式：MP4

視頻編碼：H.264（AAC音頻）

視頻尺寸：750*1200（官方建議）或740*1136

幀速率：25幀

畫質(zhì)：8

視頻體積：20MB左右

比特率編碼：VBR，2次

視頻在AE里的布局

壓縮視頻

一定要對(duì)視頻進(jìn)行壓縮處理，建議使用格式工廠，根據(jù)經(jīng)驗(yàn)，建議整個(gè)視頻不超過50M。

請(qǐng)使用編碼為H.264壓縮標(biāo)準(zhǔn)的MP4，且文件應(yīng)該壓縮后上傳，這也是為了同時(shí)兼容各手機(jī)平臺(tái)、各種桌面瀏覽器播放視頻的需要，以下是常用視頻壓縮工具格式工廠的截圖。

注意：不建議使用AVI/WMV等其他視頻格式

注意事項(xiàng)

（1）其中編碼和格式是固定的H.264 MP4（AAC音頻），其余的參數(shù)值都不是固定的，只是提供一個(gè)大概范圍，具體的是可以根據(jù)你的實(shí)際場(chǎng)景進(jìn)行小的調(diào)整。

（2）在其他參數(shù)值一樣的情況下，幀速率越大，畫質(zhì)越高，尺寸越大越清晰，相對(duì)的體積也會(huì)越大

6.視頻在意派Epub360編輯器里的布局

在不同機(jī)型中的適配情況如圖

視頻預(yù)處理

針對(duì)之前視頻類H5經(jīng)常出現(xiàn)視頻無法播放的問題，Epub360做出進(jìn)一步優(yōu)化，現(xiàn)將所有用戶上傳到Epub360素材庫的視頻進(jìn)行預(yù)處理。視頻上傳素材庫成功后，編輯器做視頻預(yù)處理，需一定時(shí)長(zhǎng)，待處理完畢后，才可以插入到編輯器當(dāng)中。

如果想了解更多細(xì)節(jié)，可以戳說明了解《關(guān)于視頻上傳后預(yù)處理（必看）》。

組件用法

基本用法

1.播放設(shè)置

（1）點(diǎn)擊本地視頻組件

（2）彈出視頻素材窗口，上傳或選擇要添加的視頻

（3）視頻拉伸成內(nèi)框的尺寸

（4）如果需要視頻在蘋果手機(jī)上一打開就自動(dòng)播放，要勾選微信蘋果首頁自動(dòng)播放

注意：由于微信升級(jí)，安卓系統(tǒng)的視頻播放必須用手勢(shì)觸發(fā)，不建議使用頁面觸發(fā)器（如切換到當(dāng)前頁時(shí)）、動(dòng)畫開始或結(jié)束時(shí)的觸發(fā)器。

高級(jí)用法

1.點(diǎn)擊其他元素，播放視頻

2.如何做好視頻播放前后的過渡銜接

（1）播放前過渡

雖然使用的是視頻，但我們不希望別人看出來是視頻，這就需要點(diǎn)擊播放過渡自然一點(diǎn)。

當(dāng)視頻很大，加載需要很長(zhǎng)時(shí)間時(shí)，點(diǎn)擊播放可能出現(xiàn)“閃屏”的現(xiàn)象。可以用偽視頻封面的方法，當(dāng)視頻開始播放的時(shí)候隱藏偽視頻封面圖，就可以很大程度上避免這個(gè)問題，通過視頻設(shè)置封面選項(xiàng)，默認(rèn)用視頻首頁截圖作為視頻封面圖，點(diǎn)擊小預(yù)覽圖可以替換視頻封面。

（2）播放完過渡

視頻播放結(jié)束后一般是跳轉(zhuǎn)到宣傳公司或是活動(dòng)信息的頁面上，這里我們需要在設(shè)置視頻結(jié)束播放后跳轉(zhuǎn)頁面，切換效果選擇【無】，下一頁背景圖最好是視頻的最后一幀，這樣就可以實(shí)現(xiàn)無縫跳轉(zhuǎn)了。

3.補(bǔ)充：如何區(qū)分蘋果安卓系統(tǒng)

有的用戶問，蘋果和安卓用戶怎么區(qū)分呢？總不能做兩個(gè)作品蘋果版和安卓版吧？這里我們添加一個(gè)系統(tǒng)參數(shù)組件和一個(gè)按鈕，按鈕設(shè)置初始隱藏，當(dāng)用戶為安卓機(jī)型時(shí)顯示按鈕，按鈕上設(shè)置激活時(shí)播放音視頻即可。

（1）點(diǎn)擊添加系統(tǒng)參數(shù)

（2）系統(tǒng)參數(shù)設(shè)置，當(dāng)系統(tǒng)參數(shù)判斷到H5打開設(shè)備的系統(tǒng)時(shí)，就顯示播放視頻的按鈕。

4.其他視頻設(shè)置：點(diǎn)擊播放按鈕及控制條播放

（1）上傳本地視頻之后，勾選右側(cè)顯示播放圖標(biāo)，視頻上會(huì)顯示一個(gè)默認(rèn)的視頻播放按鈕，點(diǎn)擊按鈕可播放視頻；也可以不勾選。

（2）勾選顯示播放控制條，會(huì)在視頻播放的時(shí)候顯示，如圖：

（3）蘋果、安卓可以跳出微信實(shí)現(xiàn)全屏播放，只需要勾選下圖中的選項(xiàng)即可：

5.視頻在指定區(qū)域內(nèi)播放

如果希望視頻在指定的區(qū)域播放，針對(duì)安卓系統(tǒng)特殊說明一下：《小尺寸視頻在安卓機(jī)指定區(qū)域內(nèi)播放說明》

5在電腦端可以實(shí)現(xiàn)打開后自動(dòng)播放，全屏播放，只需勾選下圖中的：