How to setup Fullwidth Video Background with DIVI and FFMPEG
2018-09-16
416 words
2 mins read
Prepare to upload a small video as a background.
I found a video on my mobile phone, taking a picture from New Zealand's famous Lake Tekapo to Wanaka.
But there are some noises.
This requires video processing software to remove the sound.
Ok, let's install the free and powerful ffmpeg.
Windows users can install a software Winff. Is a visual interface to the ffmpeg command line.
I am using Ubuntu 18 now. Need to run the following command to install ffmpeg
Ok, ffmpeg is installed, the video file I just downloaded is 1.mp4 and I continue to run:
Find a few lines with stream information. Here is:
This can be seen that 0:0 is audio, 0:1 is video, now run the following statement, just import the video to the new file 2.mp4
Ok, this silent video is produced.
This video exceeds 2MB, which is beyond the default file size of WordPress.
We use the SCP command to pass it to the server.
Then use SSH command to log in to the remote host and put the video in the root directory of the website.
Now let's start Divi to change the home page.
Click the FullWidth Header setting. Select the background to the video just 2.mp4
Also choose a background image for mobile devices.
Then go to the design column and open the full screen.
Ok, save it and feel it. A little dizzy, the speed of shooting this video was too fast.
Then Google finds the solution, source fzheng.me.
Run the following command to move the video 4 times slower
The video size has suddenly increased to more than 4MB. It maybe make the website too slow. Use the cut command to cut off most of the time.
This 22.mp4 is less than 2MB. Ok, upload the test.
Goto Pingdom's test, it seems that the speed of the website has not been greatly affected.
I found a video on my mobile phone, taking a picture from New Zealand's famous Lake Tekapo to Wanaka.
But there are some noises.
This requires video processing software to remove the sound.
Ok, let's install the free and powerful ffmpeg.
Windows users can install a software Winff. Is a visual interface to the ffmpeg command line.
I am using Ubuntu 18 now. Need to run the following command to install ffmpeg
sudo add-apt-repository ppa:kirillshkrogalev/ffmpeg-next
sudo apt-get update
sudo apt-get install ffmpegOk, ffmpeg is installed, the video file I just downloaded is 1.mp4 and I continue to run:
ffmpeg -i \path\1.mp4Find a few lines with stream information. Here is:
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
This can be seen that 0:0 is audio, 0:1 is video, now run the following statement, just import the video to the new file 2.mp4
ffmpeg -i \path\1.mp4 -map 0:1 -vcodec copy \path\2.mp4
Ok, this silent video is produced.
This video exceeds 2MB, which is beyond the default file size of WordPress.
We use the SCP command to pass it to the server.
scp \path\2.mp4 [email protected]:/home/yourusernameThen use SSH command to log in to the remote host and put the video in the root directory of the website.
ssh [email protected]
sudo mv 2.mp4 /var/www/yourwebsite.com
Now let's start Divi to change the home page.
Click the FullWidth Header setting. Select the background to the video just 2.mp4
Also choose a background image for mobile devices.
Then go to the design column and open the full screen.
Ok, save it and feel it. A little dizzy, the speed of shooting this video was too fast.
Then Google finds the solution, source fzheng.me.
Run the following command to move the video 4 times slower
ffmpeg -i 2.mp4 -vf "setpts=4*PTS" 21.mp4
The video size has suddenly increased to more than 4MB. It maybe make the website too slow. Use the cut command to cut off most of the time.
ffmpeg -ss 00:00:06 -i 21.mp4 -to 00:00:16 -c copy -copyts 22.mp4
This 22.mp4 is less than 2MB. Ok, upload the test.
Goto Pingdom's test, it seems that the speed of the website has not been greatly affected.
Related Articles:
Authored By Jesse Lau
A freelancer living in New Zealand, engaged in website development and program trading. Ever won 1st ranking twice in the Dukascopy Strategy Contest. This article is licensed under a Creative Commons Attribution 4.0 International License.