Uly.me

cloud engineer

videos

Bulk FFMPEG Resize

Here’s how to resize videos and pictures using FFMPEG.

Bulk Resize Pictures

for filename in *.JPG; do 
  ffmpeg -i "$filename" -vf scale=-1:720 final/"$filename";
done

Bulk Resize Video and Create Thumbnail

for filename in *.MP4; do 
  ffmpeg -i "$filename" -s 1080x720 -pix_fmt yuv420p -crf 18 "$filename".mp4; 
  ffmpeg -ss 00:00:00 -i "$filename" -vframes 1 "$filename".jpg;
done

Override WordPress Video Dimensions

WordPress comes with its own media player. It supports M4a, MP4, OGG, WebM, FLV, WMV, MP3, WAV and WMA formats. In addition, you can also embed videos from a dozen external sites such as YouTube, Vimeo, etc. WordPress will automatically embed the video when you add it to your post. You can change the dimensions of your videos by overriding the width and the height of the media player.

Edit the functions.php file, and add the following code.

function override_video_dimensions( $out, $pairs, $atts ) {
  $out['width'] = '640';
  $out['height'] = '360';
  return $out;
}
add_filter( 'shortcode_atts_video', 'override_video_dimensions', 10, 3 );

Here’s how to add YouTube videos in WordPress.

YouTube HTML5 Video Player

YouTube now defaults to HTML5 video player instead of Flash. The new player takes advantage of MediaSource extensions for its Adaptive Bitrate streaming allowing viewers to quickly and seamlessly switch resolutions. The new player also uses a new video codec called VP9 which gives you higher resolution with low bandwidth. YouTube will also start using WebRTC for recording videos and for live streaming capabilities. Read more.

HTML5 Fullscreen Background Videos

I noticed several websites using a fullscreen background videos on their home pages. A good example is Paypal.com. The videos are typically short, between 10-15 seconds, with the sound turned off. The video falls back to a still background image for visitors whose browsers do not support HTML5 videos.

In addition, Paypal is using what looks like a playlist of several short videos that are displayed in a loop. If you’re interested in how you can implement background videos on your web pages, demothenes.info has a tutorial on how to add video background videos on your website.