Use the content of a video shortcode when provided

[wonderboymusic]

In order to support chapters and subtitles for video elements using the <track> HTML5 tag, the user needs to be able to specify content when manually editing the video shortcode markup. We currently ignore the content passed.

[wonderboymusic]

Example usage:

[video width="640" height="360" mp4="http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4"]
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="myvideo.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="myvideo.ogv" />
<!-- Optional: Add subtitles for each language -->
<track kind="subtitles" src="subtitles.srt" srclang="en" />
<!-- Optional: Add chapters -->
<track kind="chapters" src="chapters.srt" srclang="en" /> 
[/video]

[joedolson]

Making this option available would increase the ability of users to make their content accessible, since they would be able to easily add captions and subtitles to their videos. Right now, although MediaElementJS supports captions, there's no simple way to add them to a video within WordPress. This is a good first step.

[wonderboymusic]

26628.diff​​ adds a unit test and a TinyMCE plugin to handle image replacement for the Audio and Video shortcodes. Replacement is necessary to void squashing the inside of [video name="value"]{EVERYTHING IN HERE GETS ERASED WHEN SWITCHING FROM TEXT TO VISUAL OTHERWISE}[/video]

Right now, [audio] and [video] are replaced with an image (wp-includes/js/tinymce/skins/wordpress/images/embedded.png for now) - Dashicons aren't currently loaded in the rich editor iframe. If they were, we could use the Audio and Video icons in there. If that isn't kosher, we need images created to use for Audio and another for video. The images are a pre-req for this to go in.

[wonderboymusic]

26628.2.diff​​ updates TinyMCE to include Dashicons, and updates the audiovideo TinyMCE plugin added by this patch to use the required ghetto markup to get Dashicon <div>s to appear in the Visual tab and get replaced properly when switching to Text. Also inserts proper markup when Inserting from Media Library.

Screenshot of the hotness attached.

[azaozz]

Was about to say there's no reason dashicons cannot be added to the editor, but you added it in 26628.2.diff :)

Looking at the TinyMCE plugin, the regexps can be simplified a bit and the name should start with wp like the other custom WordPress plugins (will change that on commit).

Also it triggered a bug with send_to_editor(): we preemptively replace the shortcodes with the html there which is not needed any more. The bug is that the regex can still find the shortcode string inside the title attr. and replace it again on editor.on( 'BeforeSetContent', ... ), so it ends up quite broken. Will fix that first.

[azaozz]

In 26628.3.diff:

• Set the <div> as a placeholder and make it contenteditable="false". A div cannot be a wrapper of a placeholder as the user is able to place the caret in it and type. That can break the placeholder and the typed content is lost.
• When setting the shortcode as title, remove the opening [. This prevents it from being parsed again (while inside the title attribute).
• Renamed the functions, still may need better naming :)

TODO:

• Are the changes to wpautop() really needed (seems it's been working without them)? If yes, perhaps it's better to combine stripping of line breaks around all elements inside <object>, <audio> and <video>. Also why look for the unparsed shortcode there?
• Using contenteditable="false" for the placeholder works well, but the user cannot delete it once inserted. This can work perhaps by setting "selected" state on click and binding a keyboard shortcut for backspace and delete keys.

[azaozz]

In 26628.4.diff:

• Added deleting of the placeholder <div> by setting a class onclick and looking for that class on delete and backspace keys.

[wonderboymusic]

awesome - that was my first time messing with TinyMCE, glad you were there to clean up after me :) I only *kinda* knew what I was doing

[wonderboymusic]

26628.5.diff​ removes the duped new plugin.js code - this happened to me almost every time as well when applying patches that contained an un svn add'd file.

The wpautop() code is necessary, as evidenced by the unit test, which was failing in .4.diff. I added it back. Without it, all kinds of <br>s get dropped inside the <video> tag.

[azaozz]

Opened #26864 for the wpautop() changes. We can consolidate it with the <object> handling as all three tags behave in a similar way in HTML 5.

Looking at the shortcode when switching Visual to Text: we need to tweak pre_wpautop() a bit. At least add line breaks after it, as currently it's merged with the following paragraph. On the front-end when the tag is replaced by a div, it's still wrapped in the <p>.

[azaozz]

The audiovideo mce plugin, for ref. only

[azaozz]

@wonderboymusic added a patch for wpautop and a few tests to #26864. The parsing of a video shortcode test fails, not because of wpautop. Only the first <source> makes it through.

[wonderboymusic]

In 27097:

When a video shortcode has content in its body, append it as inner HTML in the resulting <video>.

Reverts [27096].
Fixes #26628.
See #27016.

[wonderboymusic]

In 27100:

The unit test for the video shortcode needs to mimic the default params for width and post ID.

See #26628.