Make WordPress Core

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#26628 closed enhancement (fixed)

Use the content of a video shortcode when provided

Reported by: wonderboymusic's profile wonderboymusic Owned by: wonderboymusic's profile wonderboymusic
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.6
Component: Media Keywords: has-patch
Focuses: Cc:


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.

Attachments (8)

video-shortcode.diff (1.8 KB) - added by wonderboymusic 11 years ago.
26628.diff (8.1 KB) - added by wonderboymusic 11 years ago.
26628.2.diff (9.1 KB) - added by wonderboymusic 11 years ago.
media.png (21.5 KB) - added by wonderboymusic 11 years ago.
26628.3.diff (7.0 KB) - added by azaozz 11 years ago.
26628.4.diff (10.0 KB) - added by azaozz 11 years ago.
26628.5.diff (8.4 KB) - added by wonderboymusic 11 years ago.
plugin.js (4.2 KB) - added by azaozz 10 years ago.
The audiovideo mce plugin, for ref. only

Download all attachments as: .zip

Change History (23)

#1 @wonderboymusic
11 years ago

  • Version set to 3.6

#2 @wonderboymusic
11 years ago

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="" srclang="en" />
<!-- Optional: Add chapters -->
<track kind="chapters" src="" srclang="en" /> 

#3 @joedolson
11 years ago

  • Cc design@… added

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.

#4 @wonderboymusic
11 years ago

  • Keywords needs-design added

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.

11 years ago

#5 @wonderboymusic
11 years ago

  • Keywords needs-design removed

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.

#6 @azaozz
11 years ago

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.

Last edited 11 years ago by azaozz (previous) (diff)

11 years ago

#7 @azaozz
11 years ago

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


  • 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.

11 years ago

#8 @azaozz
11 years ago

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.

#9 @wonderboymusic
11 years ago

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

#10 @wonderboymusic
11 years ago

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.

#11 @azaozz
11 years ago

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>.

This ticket was mentioned in IRC in #wordpress-dev by azaozz. View the logs.

10 years ago

10 years ago

The audiovideo mce plugin, for ref. only

#13 @azaozz
10 years ago

@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.

Last edited 10 years ago by azaozz (previous) (diff)

#14 @wonderboymusic
10 years ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from new to closed

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.

#15 @wonderboymusic
10 years ago

In 27100:

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

See #26628.

Note: See TracTickets for help on using tickets.