Extract media metadata from selected video and input in field?

by jockebq   Last Updated April 16, 2018 06:08 AM

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:

    var meta_video_frame;
        if ( meta_video_frame ) {

        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' ).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' );
    if (url) {
        var img = jQuery( '<img>' )
            .attr('src', "/u/wp-content/themes/test-theme/video.png")
            .attr('alt', url)
    } else {

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>):
  $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!

Related Questions

onclick button,enable scroll on home page

Updated June 02, 2016 08:03 AM

Upload a web module (html and JS) to wordpress

Updated March 11, 2017 03:08 AM

Changing content onclick

Updated April 17, 2017 05:08 AM