用Divi模板、FFMPEG玩轉首頁視頻背景
這幾天看首頁兩張圖有點膩了。準備上傳一個小視頻作為背景。
這個可能對網頁速度有比較大的影響,不過這個網站本來就是要多經曆事情“乾坤遍曆”而設定的,所以測試一下也無妨。
隨手在手機裏找到一個視頻,拍的是從新西蘭著名的蒂卡普湖(Lake Tekapo)到瓦納卡途中一段風景。
蒂卡普湖是南半球有名的觀星聖地,今年4月份到該處半夜兩點爬起來看到了滿天繁星。可惜我的手機夜晚模式實在不行,沒有照片留念了。
隻是勾起了半夜胡謅的癮:
早上起來一看,怎麼寫的這麼挫。改了重寫
唉,還是不怎麼樣。堆徹詞句又不合韻。
這個是硬傷,我們這一代的教育,古文功底不要說跟紅樓夢裏比寶黛了,比之賈環都差的遠。不過謅詩也就是觸景生情抒發胸臆,自娛自樂也無所謂了。
回到主題。視頻下載下來了。但是有一些雜聲。
這就需要視頻處理軟件把聲音去掉。好吧,安裝免費且功能強大的ffmpeg。
Windows下可以裝一個軟件Winff。是將ffmpeg命令行做的可視化界麵。
而我現在用linux係統Ubuntu了。需要運行下列命令安裝ffmpeg
好,ffmpeg裝好了,我剛才下載的視頻文件是1.mp4.那我繼續運行:
找到含有stream信息的幾行。我這裏是:
這樣能看出來0:0道是音頻,0:1道是視頻,現在運行下列語句,就隻將視頻導入到新的文件2.mp4
好了,這個無聲的視頻產生了。
這個視頻超過了2MB,超出了wordpress缺省的文件大小。
我們自己用scp命令將之傳到服務器上
再用ssh命令登錄遠程主機,將視頻放在網站的根目錄
現在我們啟動Divi更改homepage.將運用商業模板Divi打造漂亮博客帖裏的FullWidth Slider更換為FullWidth Header模塊
點開FullWidth Header設置。標題增加這麼幾句,(這幾句忘了是啥背景下謅的)
然後戲肉來了,就是選中背景那處,可以選視頻,添加剛才的視頻2.mp4
下麵幾行小字寫的是手機瀏覽時自動屏蔽視頻,這個符合現在網速不快的大背景。所以再放一張背景圖片。
然後要到design那欄,將全屏打開。
好了,存盤感受一下。有點暈啊,當時拍這視頻的速度太快了。
新來一個問題就解決一個問題。再google找到解決方案,來源fzheng.me。
運行下列命令,將視頻4倍慢速
視頻大小一下子增加到4mb多。網頁下載那實在太慢了。再用剪切命令截掉大半時間
這樣22.mp4不到2mb。好,上傳測試。
大功告成 :-)
到Pingdom測試一下,貌似網速也沒有受到多大影響。
這個可能對網頁速度有比較大的影響,不過這個網站本來就是要多經曆事情“乾坤遍曆”而設定的,所以測試一下也無妨。
隨手在手機裏找到一個視頻,拍的是從新西蘭著名的蒂卡普湖(Lake Tekapo)到瓦納卡途中一段風景。
蒂卡普湖是南半球有名的觀星聖地,今年4月份到該處半夜兩點爬起來看到了滿天繁星。可惜我的手機夜晚模式實在不行,沒有照片留念了。
隻是勾起了半夜胡謅的癮:
月落銀河掛九天,誰於風露立中宵。
如此星辰如此夜,虛名浮利俱可拋。
早上起來一看,怎麼寫的這麼挫。改了重寫
一捧白砂抹蒼穹,萬顆銀棋嵌羅天。
似此星辰如昨年,隻是當時不灑然。
唉,還是不怎麼樣。堆徹詞句又不合韻。
這個是硬傷,我們這一代的教育,古文功底不要說跟紅樓夢裏比寶黛了,比之賈環都差的遠。不過謅詩也就是觸景生情抒發胸臆,自娛自樂也無所謂了。
回到主題。視頻下載下來了。但是有一些雜聲。
這就需要視頻處理軟件把聲音去掉。好吧,安裝免費且功能強大的ffmpeg。
Windows下可以裝一個軟件Winff。是將ffmpeg命令行做的可視化界麵。
而我現在用linux係統Ubuntu了。需要運行下列命令安裝ffmpeg
sudo add-apt-repository ppa:kirillshkrogalev/ffmpeg-next
sudo apt-get update
sudo apt-get install ffmpeg
好,ffmpeg裝好了,我剛才下載的視頻文件是1.mp4.那我繼續運行:
ffmpeg -i \path\1.mp4
找到含有stream信息的幾行。我這裏是:
Stream #0:0(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, mono, fltp, 95 kb/s (default)
Metadata:
creation_time : 2018-04-22T22:10:00.000000Z
Stream #0:1(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 960x540, 1803 kb/s, 30.22 fps, 30 tbr, 90k tbn, 58 tbc (default)
Metadata:
creation_time : 2018-04-22T22:10:00.000000Z
這樣能看出來0:0道是音頻,0:1道是視頻,現在運行下列語句,就隻將視頻導入到新的文件2.mp4
ffmpeg -i \path\1.mp4 -map 0:1 -vcodec copy \path\2.mp4
好了,這個無聲的視頻產生了。
這個視頻超過了2MB,超出了wordpress缺省的文件大小。
我們自己用scp命令將之傳到服務器上
scp \path\2.mp4 yourusername@yourwebsite.com:/home/yourusername
再用ssh命令登錄遠程主機,將視頻放在網站的根目錄
ssh [email protected]
sudo mv 2.mp4 /var/www/yourwebsite.com
現在我們啟動Divi更改homepage.將運用商業模板Divi打造漂亮博客帖裏的FullWidth Slider更換為FullWidth Header模塊
點開FullWidth Header設置。標題增加這麼幾句,(這幾句忘了是啥背景下謅的)
綿綿默照漸入微,虛心實腹道不孤。
眼前光景無需問,萬裏山川盡在壺。
然後戲肉來了,就是選中背景那處,可以選視頻,添加剛才的視頻2.mp4
下麵幾行小字寫的是手機瀏覽時自動屏蔽視頻,這個符合現在網速不快的大背景。所以再放一張背景圖片。
然後要到design那欄,將全屏打開。
好了,存盤感受一下。有點暈啊,當時拍這視頻的速度太快了。
新來一個問題就解決一個問題。再google找到解決方案,來源fzheng.me。
運行下列命令,將視頻4倍慢速
ffmpeg -i 2.mp4 -vf "setpts=4*PTS" 21.mp4
視頻大小一下子增加到4mb多。網頁下載那實在太慢了。再用剪切命令截掉大半時間
ffmpeg -ss 00:00:06 -i 21.mp4 -to 00:00:16 -c copy -copyts 22.mp4
這樣22.mp4不到2mb。好,上傳測試。
大功告成 :-)
到Pingdom測試一下,貌似網速也沒有受到多大影響。
相关文章:
- 2018/09/03 運用商業模板Divi打造漂亮博客
- 2018/09/16 盤點本博安裝激活的21個Wordpress插件
- 2018/09/14 足彩賠率反推返現率、資金比例計算器以及在Wordpress頁麵添加javascript代碼
- 2018/09/10 優化配置Wordpress和Nginx降低服務器響應時間,最便宜服務器跑多插件大模板網站
- 2018/09/02 八步教程 - 從零基礎到2小時建立Google PageSpeed Insights100分、安全度A級的博客站點平台
Jesse Lau
網名遁去的一,簡稱遁一。2012年定居新西蘭至今,自由職業者。
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之,可隨意轉發轉載,轉載請注明出處。