Extract media metadata from selected video and input in field?

I have a custom post type which let’s me select a video to attach to the post. The button looks like this.

<input type=”button” id=”background-video-button” class=”button” value=”<?php _e( ‘Select/Upload Video’, ‘theme’ )?>” />
<input class=”background-video-url” type=”hidden” name=”background-video” id=”background-video” value=”<?php if ( isset ( $theme_stored_meta[‘background-video’] ) ) echo $theme_stored_meta[‘background-video’][0]; ?>” />

This is the jQuery for the video-selection:

jQuery(document).ready(function($){
var meta_video_frame;
$(‘#background-video-button’).click(function(e){
e.preventDefault();
if ( meta_video_frame ) {
meta_video_frame.open();
return;

}
meta_video_frame = wp.media.frames.meta_video_frame = wp.media({
title: meta_video.title,
button: { text: meta_video.button },
library: { type: ‘video’ }
});

meta_video_frame.on(‘select’, function(){
var media_attachment = meta_video_frame.state().get(‘selection’).first().toJSON();
$(‘#background-video’).val(media_attachment.url).trigger(“change”);
});
meta_video_frame.open();
});

$( ‘#background-video’ ).on(‘propertychange change keyup paste input’, function() {
showVideoPreview( $(this).val() );
});
$( ‘#background-video-remove a’ ).click( function(){
$( ‘#background-video’ ).val(”).trigger( “change” );
});
showVideoPreview( $( ‘#background-video’ ).val() );
});

function showVideoPreview(url) {
var container = jQuery( ‘#background-video-preview’ );
container.empty();
if (url) {
var img = jQuery( ‘<img>’ )
.attr(‘src’, “/u/wp-content/themes/test-theme/video.png”)
.attr(‘alt’, url)
.click(function(){
jQuery(‘#background-video-button’).click();
});
container.append(img);
jQuery(‘#background-video-remove’).show();
jQuery(‘#background-video-button’).hide();
} else {
jQuery(‘#background-video-remove’).hide();
jQuery(‘#background-video-button’).show();
}
}

I can see that WordPress does store the length of the video’s, this is shown when selecting videos in the media library. It displays the video’s length in “minute format”, like this Length: 0:06 for a 6 second video. At first I want to pull the length of the selected video, convert it to second format (round up to the closest second), and then input it to a field in the same custom post window, which looks like this:

<?=__(‘Duration’, ‘theme’)?> (<span style=”white-space: nowrap;”><?=round(theme_get_auto_play_speed()/1000)?> <?=__(‘seconds’, ‘theme’)?></span>):
<?php
$slide_duration = isset( $theme_stored_meta[‘slide_duration’] ) ? intval($theme_stored_meta[‘slide_duration’][0]) : ”;
?>
<input type=”number” name=”slide_duration” value=”<?=$slide_duration?>” min=”1″ step=”1″ style=”width: 70px;” /> <?=__(‘seconds’, ‘theme’)?>

Would love some direction or code examples, I have no idea if Javascript or PHP is the way to go.
Thank you!

Read more here:: Extract media metadata from selected video and input in field?

Leave a Reply

Your email address will not be published. Required fields are marked *