Scott Taylor 5:43 pm on March 11, 2014
Tags: Audio ( 3 ), media ( 90 ), MediaElement ( 5 ), video ( 6 )

Audio/Video 2.0 Update – Media Modal

The latest major updates to Audio/Video before BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. were related to editing shortcodes in the medial modal. TinyMCE placeholders for audio and video have been added like so:

When you click the placeholder, the media modal will now be launched. And when you get there, there are some new ways to manage HTML5 playback without writing anything by hand.

Add Multiple Sources

MediaElement.js provides cross-browser support for many extensions by providing Flash and Silverlight files that will bridge the browser support gap when necessary. Ideally, as many browsers as possible would be using native HTML5 playback. To ensure this, you need to specify multiple versions of your files. Since 3.6, the audio and video shortcodes have supported this by allowing you specify multiple extensions as attributes: mp3="yolo.mp3" ogg="yolo.ogg" wma="yolo.wma", etc.

A quick and easy way to encode your files is to use FireFogg (works in Firefox only). Here are some instructions for audio and video files:

HTML5 Audio

Click “Make web video”
Select a File (your iTunes files on a Mac are in: ~/Music/iTunes/iTunes Media/Music – Pick a tune!)
Click “Advanced Options”
Uncheck Video, make sure Audio is checked
Format: Ogg (Theora/Vorbis)
Set quality to 10.0
Optionally add metadata
Click “Encode” – make sure to change the extension in the file prompt from “.ogv” to “.ogg”

HTML5 Video

Click “Advanced Options”
Make sure Audio and Video are both checked
Format: choose Ogg (Theora/Vorbis) or WebM (VP8/Vorbis)
Optionally add metadata
Click “Encode”
(Repeat these steps for the format you didn’t select this time)

There is now a workflow to make adding these extra sources to shortcodes easy:

Multiple sources are specified now. Make sure to click blue “Update” button to save your shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. back to the editor.

Video Workflow

Here is a video workflow, assuming your shortcode has no attributes and you click it:

Add each video source:

Optionally add a poster image:

Subtitles

If you’re feeling CRAZY, add some Subtitles! Here’s a post about them. They’re pretty cool. Probably make sure your web server is serving .vtt files as text/vtt.

Add your subtitles using our easy workflow:

When you’ve added them, MediaElement knows to support them out of the box:

Boom. Subtitles while your video plays:

When you add your subtitles, if will show you a list of “track” elements you have added, you will still need to set your language manually – all will default to English. The idea is that you can add a track element per language. Tracks get stored as the body of your video shortcode.

Testing + Tweaks

Now comes the time for testing and refining, while fixing esoteric bugs. PLEASE HELP! Put your UIUI User interface + UXUX User experience hats on, if you wear that kind of hat.

#audio, #media, #mediaelement, #video

Scott Kingsley Clark 6:31 pm on March 11, 2014

Is Audio/Video modal stuff able to be integrated into separate fields from TinyMCE yet? Or too early to try testing that?
- Scott Taylor 6:37 pm on March 11, 2014
  Great question – yes:
  https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js#L95
  
  var frame = wp.media.video.edit( data );
  
  “data” is a shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site..
```
frame.on( 'close', function () {
	frame.detach();
} );
frame.state( 'video-details' ).on( 
'update replace add-source select-poster-image add-track', 
function ( selection ) {
	var shortcode = wp.media.video.shortcode( selection );
	// shortcode is the updated shortcode, do something with it.
	frame.detach();
} );
frame.open();
```
  - Manny Fleurmond 7:48 pm on March 11, 2014
    
    Is there a version of the modal to be used outside of shortcodes and the editor, like how you can use the media select modal in plugins?
    - Scott Taylor 7:53 pm on March 11, 2014
      
      I honestly hadn’t thought about other use cases until Scott’s comment. All of the code is in media-editor.js, media-models.js, and media-views.js which get loaded via `wp_enqueue_media()`. If those files + MediaElement are loaded, you can do whatever you want. The adminadmin (and super admin) glue is the “wpgallery” TinyMCE pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party where we have shoved all of the shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. handlers, playlists too. So, you need your own glue, but see my above comment, it’s pretty easy.
      - Manny Fleurmond 4:21 am on March 17, 2014
        
        Is there a way to use the edit audio/video frames without shortcodes?
        
        Scott Taylor 4:25 am on March 17, 2014
        
        wp.media.audio.edit( ‘[ audio ]’ ).open();
      - Manny Fleurmond 4:39 am on March 17, 2014
        
        So basically, I’d have to encode the data into shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. before I could even use this modal, then.
        
        Scott Taylor 4:47 am on March 17, 2014
        
        wp.media({ frame: 'audio', state: 'audio-details', metadata: {DATA_GOES_HERE} }).open()
      - Manny Fleurmond 4:58 am on March 17, 2014
        
        Awesome and thank you. 2 more questions, then you can chase me away:
        
        1. What kind of metadata and how is it formatted? is it just a hash of audio type and url?
        2. Will the same events shown above ( ‘update replace add-source select-poster-image add-track’ ) work with this code?
        3. (wait, didn’t I ask for 3?) what does detach do?
        
        Thank you and sorry for all the questions. Digging through the code is tricky because I’m still new to backbone so I’m glad that people in the know such as yourself are will to share the knowledge. Can’t wait for documentation.
        
        Scott Taylor 5:03 am on March 17, 2014
        
        1. look at “defaults” here: https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/media-editor.js#L702
        
        2. Those events are in reaction to what happens in the media modal, they get set up here:
        https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js#L109
        
        3. Removes the frame from the DOM when the state is to be discarded or the modal is closed.
      - Manny Fleurmond 5:05 am on March 17, 2014
        
        Thank you. I had just played around with the code in the js console and got an output from and update event. Thank you for the starting point. 🙂
Robert Chapin 7:47 pm on March 11, 2014

I love that I can upload audio files and have my own player without embedding cross-domain scripts. This is awesome.
Gabriel Koen 11:57 pm on March 12, 2014

This stuff is awesome!
Looimaster 11:09 am on March 18, 2014

@Scott Taylor: Would it be possible that you update Codex pages with examples for developers such as `wp.media.audio.edit( ‘[ audio ]‘ ).open();` etc.? It would be beyond awesome to have this documented in detail, with properties, methods, exact parameters, return values, examples etc. I’m not that proficient in JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. and it’s hard to find information such as what the actual data (parameters) are for `wp.media()` or for `metadata: {DATA_GOES_HERE}`. If you hadn’t told us that we can do `wp.media.audio.edit( ‘shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site.-here’ ).open();` then few people would be able to get to know that from the source code.

I think that this page https://codex.wordpress.org/Media_Library could be made like this: https://codex.wordpress.org/Embeds or this: https://codex.wordpress.org/Child_Themes It’s super informative and it’s the only source of information that I’m able to understand quickly and use in plugins and themes.

PS
This new media library is an AWESOME step forward. You’re great!
Stephanie Leary 3:11 pm on March 23, 2014

Where is the relationship between video and subtitle file stored? I’ve played with the latest nightly and I can’t find anything in the posts, postmeta, or options tables that indicates which subtitle file goes with which video. I’d like to be able to query videos with subtitles vs. those without.
- Scott Taylor 8:40 pm on April 17, 2014
  
  the subtitles are the body of the video shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site., look in the Text editor tab
manuelmasia 4:40 pm on April 19, 2014

Is there any way to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. the box to add some fields: besides “Autoplay” and “LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.”? I would like to add the ability to select the video start volume and another field to define whether to use the video as background (according with a theme I’m working on). Is there any tutorial or resources? TIA, Manuel 🙂