{"id":21760,"date":"2018-07-12T18:02:28","date_gmt":"2018-07-12T18:02:28","guid":{"rendered":"http:\/\/building_a_live_feed_of_fifa_world_cup_moments"},"modified":"2022-02-26T01:44:20","modified_gmt":"2022-02-26T01:44:20","slug":"building_a_live_feed_of_fifa_world_cup_moments","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/building_a_live_feed_of_fifa_world_cup_moments","title":{"rendered":"Building a Live Feed of FIFA World Cup Moments"},"content":{"rendered":"

Widely acclaimed as the world\u2019s biggest sporting event, the World Cup has established itself as the most captivating tournament to look forward to across the globe. Dating back to 1930, when the first World Cup was hosted in Uruguay, it has always engendered numerous moments of excitement, not only for the participating teams but also for the countries they ably represented. Little could anyone have anticipated that a game of 22 able-bodied men running to take possession of a leather ball could become so famous.<\/p>\n

This year\u2019s World Cup is, as before, living up to expectations with countless surprising and enthralling moments. In fact, it\u2019s been a rollercoaster of intense emotions as we\u2019ve seen some of the football giant nations kicked out of the tournament.<\/p>\n

If you are like me and love to savor some of the memorable moments from the 2018 FIFA World Cup, let me show you a few impressive Cloudinary features for capturing them. As a rule, professionally resizing and merging multiple videos<\/a>, also adding songs as an overlay, would require access to sophisticated tools and a reasonable level of expertise on how to use them effectively. Not so with Cloudinary, which provisions for end-to-end video-management services geared toward compilation of videos in just a few simple steps without coding. I\u2019ll walk you through them below. Also check out this interactive Twitter Tutorial thread<\/a> I made!<\/p>\n

Upload Videos<\/h2>\n

For easy access to your videos, upload them to Cloudinary and store the public ID of each of the videos.To access a video, type in the browser:<\/p>\n

https:\/\/res.cloudinary.com\/*YOUR_CLOUD_NAME*\/video\/upload\/*ID*.mp4<\/code><\/p>\n

Replace YOUR_CLOUD_NAME<\/em> and ID<\/em> with the your cloud name and the video\u2019s public ID on Cloudinary, respectively, as in this example:<\/p>\n

\n \n\n\n\n <\/video><\/p>\n

Manipulate Videos<\/h2>\n

In Cloudinary, you can manipulate and thus transform videos directly from the URL by adding the required properties, for example:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\n \n\n\n\n <\/video><\/p>\n

The link above shows that you\u2019ve dynamically resized a video on the fly by configuring its width (w<\/code>) and height (h<\/code>) parameters. Did you notice the size of the video, too? Now compare it with that of the original. Cool, right? You\u2019ve changed the video\u2019s default dimension directly from the browser, hassle free.<\/p>\n

Concatenate Videos<\/h2>\n

With Cloudinary, you can easily concatenate two videos by configuring the overlay video parameter l_video:<\/code> in the URL to show the name of another uploaded video. You can add many videos in the same way but that might be problematic because all of them will be played simultaneously.<\/p>\n

To overlay videos and play them sequentially, add the splice<\/code> flag fl_splice<\/code> to the URL for concatenation.. Do the following:<\/p>\n

Update your link to look like this:<\/p>\n

https:\/\/res.cloudinary.com\/*YOUR_CLOUD_NAME*\/video\/upload\/*OVERLAY_TRANSFORMATION_HERE*\/*ID*.mp4 \u2026\n<\/code><\/pre>\n
Replace the OVERLAY_-TRANSFORMATION_HERE<\/em> variable with the appropriate parameters, for example:<\/p>\n
l_video:*ID*,fl_splice,w_1.0,h_1.0,fl_relative,c_fill<\/code><\/p>\n
Replace ID<\/em> with the ID of the video with which you are overlaying. For example, if that video ID is suarez<\/code>, your URL would look like this:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\n      \n\n\n\n    <\/video><\/p>\n
You\u2019ve now concatenated video suarez<\/code> with video bade<\/code> into a single video.<\/p>\n
Note:<\/strong> 
..*l_video<\/code> is the video with which you want to overlay.<\/p>\n
..* fl_splice<\/code> tells Cloudinary to concatenate the video, not  overlay it. This parameter is crucial for the videos to play successively.<\/p>\n
..* w_1.0,h_1.0,fl_relative,c_fill<\/code> tells Cloudinary to scale the video\u2019s width and height to fit its original dimension. 1.0 stands for 100 percent.<\/p><\/div>\n
Add Videos<\/h2>\n
Let\u2019s add one more video with a public ID of messi-100<\/code>. Your URL would look like this:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\n      \n\n\n\n    <\/video><\/p>\n
Mute Videos<\/h2>\n
Also in Cloudinary, you can control a video\u2019s audio volume by configuring the volume<\/code> effect parameter e_volume<\/code> in the URL. In this tutorial, let\u2019s mute the video completely with e_volume:-100<\/code> since we intend to replace the video with ours. Your URL would then look like this::<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\n      \n\n\n\n    <\/video><\/p>\n
Customize Themes<\/h2>\n
Wrapping up, you can overlay your own sound to be played simultaneously with that in the concatenated videos. Simply upload an MP3 file and then configure the l_video:<\/code> parameter to overlay it, like this:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\n      \n\n\n\n    <\/video><\/p>\n
Add More Videos<\/h2>\n
Add more videos for a robust collection of memorable 2018 World Cup moments:<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\n      \n\n\n\n    <\/video><\/p>\n
Congratulations! You\u2019ve just built your own FIFA World Cup moments with a customized theme sound.<\/p>\n
Explore Cloudinary<\/h2>\n
As shown above, you can easily leverage some of Cloudinary\u2019s awesome video-management features to create wonderful effects. The sky is the limit to what you can achieve.<\/p>\n
Do create an account on Cloudinary<\/a> and check out its documentation<\/a> for more fabulous features.<\/p>\n
\n
Further Reading on Video Manipulation<\/h2>\n