Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#27437 closed defect (bug) (fixed)

UX for Audio/Video/Playlists

Reported by: wonderboymusic's profile wonderboymusic Owned by:
Milestone: 3.9 Priority: high
Severity: blocker Version: 3.9
Component: Media Keywords:
Focuses: Cc:


Issues that were brought to my attention:

Issue No. 1
Hide "Create Audio|Video Playlist" until you have actually uploaded Audio/Video files. (I am on it code-wise).

Issue No. 2
"Add Audio|Video Source" is super-confusing if you don't understand why it is there. It is NOT there to create a playlist. It is there to add extra <source> tags to a lone <audio|video> tag. More sources = more native HTML5 playback across browsers. The browser wars are not over, my friends. Every browser implements their support for audio and video differently. MediaElement levels the playing field considerably, but HTML5 playback is always preferable over playback via a Flash or Silverlight bridge. The UI I have created allows you to accomplish this and edit every aspect of your shortcode in the media modal.

Is this too much power? Is it too confusing? How can we simplify this? gcorne already suggested making "Add Audio|Video Source" a button instead of a prominent nav item.

Playlists are a completely separate thing. "Insert Media" is the launching point for "Create Audio|Video Playlist". Clicking an audio|video shortcode placeholder launches "Audio|Video Details." Clicking a playlist shortcode launches the Playlist editor.

To review: "Image Details" = One Image. Gallery = many images. "Audio|Video Details" = One Audio|Video, potentially with fallback sources. Playlists = many audio or video files (no fallbacks).

Issue 3
Placeholders/previews for Audio/Video/Playlist shortcodes in TinyMCE. Working its way over on #27389 and #27320, but related to UX. What is the best experience here?

The reason I ask: some audio and video formats are better suited than others to be preview-able in the editor. Namely, all of those sources which are supported by the browser natively for playback. The Flash/Silverlight plugins used by MediaElement get weird with TinyMCE.

Attachments (3)

27437.diff (52.0 KB) - added by wonderboymusic 10 years ago.
27437.2.diff (58.2 KB) - added by wonderboymusic 10 years ago.
new-buttons.png (55.5 KB) - added by wonderboymusic 10 years ago.

Download all attachments as: .zip

Change History (8)

#1 @wonderboymusic
10 years ago

27437.diff hides the "Create Audio|Video Playlist" links until the user has uploaded audio and/or video files. Separates by type, so if you only have audio files, you don't see video playlist button.

I have a created a new js file, media-audiovideo.js, that houses all of the JS for audio and video. Customizer has multiple JS files by feature. I think we need the same for media. This will allow us to examine a feature wholly and find areas for abstraction, or just demonstrate the necessary bootstrapping required by any feature and alert us to areas where the Media API as a whole can use improvement/simplification.

#2 @wonderboymusic
10 years ago

In 27608:

Create a new file, media-audiovideo.js, to house all of the audio and video JS code in core.

UX Changes:

  • Don't add a menu item for "Add Audio|Video Source"
  • In the Audio|Video Details modal, add buttons and some suggestive text for adding alternate playback sources
  • Don't show "Create Audio|Video Playlist" menu items until the user has uploaded audio or video files

See #27437.

#3 @wonderboymusic
10 years ago

In 27615:

Add MCE views for audio and video shortcodes. When the shortcode does not contain a source that supports native playback, just show the filename.

  • Remove the audio/video shortcode parsing from the wpgallery plugin.
  • Make mce-view a dependency of media-audiovideo
  • Introduce,,, and
  • Rename|video.shortcode() to|video.update() since it is called on Update and returns a wp.shortcode object now.
  • In wp.mce.View.render(), fire a ready event when the placeholder is being parsed and pass the current node to the event handler.

See #27389, #27437.

#4 @wonderboymusic
10 years ago

  • Keywords needs-patch removed
  • Resolution set to fixed
  • Status changed from new to closed

Everything in here has been committed. New tickets for anything else.

#5 @ericlewis
10 years ago

What was the reasoning for Issue No. 1(Hide "Create Audio|Video Playlist" until you have actually uploaded Audio/Video files?

I vaguely understand the implicit logic here - offer the user actions that make sense contextually to the media they have in their library. So if they don't have videos, don't allow them to add video playlists.

However, we contradict that rule with images - "Create Gallery" is always a menu option, whether or not you have images in your library.

This also leads to poor discoverability by users of these new features.

In a practical light, if you don't have videos in you library, pop open the media modal, and upload two videos into the modal, the option "Add Video Playlist" doesn't immediately surface.

Note: See TracTickets for help on using tickets.