影片是最能夠幫助行銷者說好故事的工具。許多研究都表明，影片可以極大地提升轉化率。
62％的消費者在購買商品之前會觀看產品評論影片。
在接受調查的消費者中，有84％的人說服他們觀看了品牌的影片後便購買了產品或服務。
97％的影片行銷者報告說，影片增強了用戶對產品或服務的理解，而76％的影片報告者稱影片幫助他們增加了銷售額。
在目標網頁上添加影片可以將轉化次數提高80％以上。
56％的消費者認為公司應在其網站上提供影片內容。Business2Community
作為行銷者，十八般武藝自然是必須的。你可以不懂How，但是要知道What和Why，其中也包括影片的應用。那麼如果今天你要策劃一個含有影片的落地頁，應該考慮哪些呢？
優化影片格式
影片的清晰度和文件大小直接相關。而影片編碼和影片格式會直接影響文件大小。目前市面上主流的瀏覽器都支持mp4格式，因此mp4影片格式會是你的首選。不過除了蘋果的Safari v14版本以下瀏覽器都支持更加高級的WebM格式，這是文件更小的影片格式，方便播放下載。在Chrome支持WebM十一年之後，Safari 14瀏覽器終於能夠播放WebM文件。
在HTML5標準中，我們可以通過在<video>標籤中嵌套<source>標籤來指定多個影片文件格式。
<video controls > <source src="maxket.webm" type="video/webm"> <source src="maxket.mp4" type="video/mp4"> <p>Your browser cannot play the provided video file.</p> </video>瀏覽器會自上而下查看第一個它所支持的格式進行播放。在上述代碼中，瀏覽器會先查看webm文件是否能播放，其次再嘗試mp4文件。如果均無法播放則會顯示“你的瀏覽器無法播放”。代碼中的controls屬性表示網頁中的播放器將顯示播放控件。
為影片添加字幕並默認靜音
影片字幕是影片必選的配置，因為你無法想像觀眾是否能夠“聽”到你訴說的故事。許多影片製作的時候將字幕直接放入影片，這樣做在多語言分發時會增加製作成本。正確的做法是為同一個影片分配多個字幕文件。 W3支持主流的WebVTT格式作為字幕文件，文件名後綴為vtt。市面上也有不少WebVTT的生成和編輯軟件。製作完vtt文件後你可以放入HTML的代碼塊中。
<video controls muted > <source src="maxket.webm" type="video/webm"> <source src="maxket.mp4" type="video/mp4"> <track src="subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default /> <track src="subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="en"/> <p>This browser does not support the video element.</p> </video>上面的例子中，我們為影片附上了兩個語言的字幕，default屬性表示默認字幕。用戶可以在影片控件菜單上進行切換。
在這裡的例子中，我們還加入了默認靜音的muted屬性。當用戶點擊播放後會存在打擾周圍人的尷尬，此時可能直接關掉你的頁面。畢竟你的著陸頁和影片APP還是有很大區別的，當用戶使用影片APP時本身就已經處在接受音頻的場景中，為此非常有必要默認靜音。
為影片選擇封面
用戶點不點影片取決於他們對影片所承載內容的預期，一個好的影片封面會讓人有點的衝動。在影片網站上許多影片UP主都會想方設法讓自己的封面更吸引人。如果你沒有設定影片封面，那麼播放器會默認用影片的第一幀來代替。此時效果往往十分不理想。
<video poster="poster.jpg" ...> … </video>為影片添加封面你只要在video標籤中添加poster屬性即可。上面的代碼範例中的poster.jpg便是影片封面的圖片地址。許多人也開始用gif圖片來展示影片中的精彩瞬間。
當所有的影片格式都不被瀏覽器支持時，瀏覽器會默認顯示影片封面。為影片添加封面還可以提升你的SEO效果，當你的影片被收錄後，搜索引擎可能會用你的封面圖片生成縮略圖用於搜索引擎結果頁面。
影片開始的時間戳
有時候同一個落地頁會服務多個不同興趣點，而多個興趣點可以用一段影片來表現。此時你就可以找到各個興趣點的時間戳並用此來設定影片開始播放的時間。
具體的做法是在影片文件後面加上參數#t=[start_time],[end_time]。
<source src="maxket.webm#t=5,20" type="video/webm">上面的代碼表示影片開始播放時僅播放第5到第20秒。此時用戶不用下載多餘的影片內容。如果用戶想要看其他部分，依然可以用拖拽功能實現。
你也可以使用時間戳格式實現#t=00:01:05表示從一分五秒開始播放，#t=,00:01:00表示從開頭播放到第一分鐘。
自動播放和預加載
你可能知道<video>標籤有一個autoplay的屬性用於自動播放。然而即便聲明了autoplay由於瀏覽器不同和用戶設定以及互動歷史不同並不能每次都實現。 Chrome，Safari，Firefox的策略各不相同。
和autoplay類似preload也可以對用戶播放體驗造成影響。 preload為預加載屬性，它具有三個值：
- none，不預加載
- metadata，預加載基本訊息，如時長，2D/3D，字幕文件等
- auto或者不設值，根據網絡狀況和不同瀏覽器有不同表現
由於各瀏覽器普遍對於autoplay和preload本身就有很強的約束，比如影片在頁面不可見的時候一定不會autoplay，HubSpot One還是建議在落地頁中開啟這兩個屬性，凡是能用總說明不會對體驗有太多的負面影響。
iPhone中的內嵌播放
記得在<video>標籤中使用playsinline屬性，該屬性可以讓iPhone用戶播放影片時不再自動彈出全屏播放，而可以像gif文件一樣內嵌在網頁中播放。這個屬性加上循環播放的loop屬性還可以幫我們成功替代gif這樣性價比較低的格式。
<video autoplay loop muted playsinline > <source src="image.mp4"> <source src="image.webm" onerror="fallback(parentNode)"> <img src="image.gif"> </video>function fallback(video) { var img = video.querySelector('img'); if (img) video.parentNode.replaceChild(img, video); }在上面的例子中，瀏覽器會嘗試播放影片，而當最後一個播放源無法播放時則會用<img>來替換整個<video>標籤。
使用影片還有哪些要注意的？
對影片的使用還需要注意
- 不要對影片進行扭曲拉伸，這會影響播放體驗。
- 要注意影片寬度，不要溢出也不要浪費移動設備上有限的空間。
- 為多種網絡環境準備，提供標清選項。
- 為影片尋找可靠的託管空間並用CDN進行加速。
一圖胜千言，一片胜千圖。希望你能用對影片，用好影片，有效提高行銷的效果。