Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use cloudinary to convert animated gif to video and reduce file size. Learn more at http://cloudinary.com/blog/reduce_size_of_animated_gifs_automatically_convert_to_webm_and_mp4
<?php
add_filter( 'the_content', function ( $content ) {
$doc = new DOMDocument();
// modify state
$libxml_previous_state = libxml_use_internal_errors( true );
$doc->loadHTML( $content );
// handle errors
libxml_clear_errors();
// restore
libxml_use_internal_errors( $libxml_previous_state );
$doc->preserveWhiteSpace = false;
$images = $doc->getElementsByTagName( 'img' );
$cloudinary_imgs = array();
foreach ( $images as $img ) {
$url = $img->getAttribute( 'src' );
//if cloudinary image url
if ( false !== stripos( $url, 'cloudinary' ) ) {
$cloudinary_imgs[] = $img;
}
}
$remove_images = array();
foreach ( $cloudinary_imgs as $cloudinary_image ) {
$url = $cloudinary_image->getAttribute( 'src' );
if ( '.gif' === strrchr( $url, '.' ) ) {
// store image object
$remove_images[] = $cloudinary_image;
// create video tag
$video = $doc->createElement( 'video' );
// add video tag attributes
$video->setAttribute( 'autoplay', 'autoplay' );
$video->setAttribute( 'loop', 'loop' );
$video->setAttribute( 'muted', 'muted' );
$video->setAttribute( 'poster', $cloudinary_image->setAttribute( 'src', str_replace( '.gif', '.jpg', $url ) ); );
// create source tag for mp4
$mp4 = $doc->createElement( 'source' );
$mp4->setAttribute( 'type', 'video/mp4' );
$mp4->setAttribute( 'src', str_replace( '.gif','.mp4', $url ) );
$video->appendChild( $mp4 );
// create source tag for webm
$webm = $doc->createElement( 'source' );
$webm->setAttribute( 'type', 'video/webm' );
$webm->setAttribute( 'src', str_replace( '.gif','.webm', $url ) );
$video->appendChild( $webm );
// create text message for browsers that doesn't support HTML5 video tag
$no_video_support = $doc->createTextNode( 'Your browser does not support HTML5 video tag.' );
$video->appendChild( $no_video_support );
// create link to original gif animations for browsers that doesn't support HTML5 video tag
$a = $doc->createElement( 'a' );
$a->setAttribute( 'src', $url );
$link_text = $doc->createTextNode( 'Click here to view original GIF' );
$a->appendChild( $link_text );
$video->appendChild( $a );
// Add video tag to DOM
$cloudinary_image->parentNode->insertBefore( $video, $cloudinary_image );
}
}
// remove old .gif image tags
foreach ( $remove_images as $rmimg ) {
$rmimg->parentNode->removeChild( $rmimg );
}
return $doc->saveHTML();
}, 10, 1 );
@soderlind

This comment has been minimized.

Copy link
Owner Author

soderlind commented Feb 20, 2017

Prerequisite, you've added the images using the Cloudinary WordPress plugin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.