Skip to content
This repository has been archived by the owner on Oct 4, 2022. It is now read-only.
Chris Rhoden edited this page Mar 3, 2016 · 8 revisions

Structure

There are two parts to the embed player

  1. A frontend consisting of an Angular 2 app for generating embed player code and for rendering the generated code, and
  2. A backend (which also runs on the client) library for actually performing the playback of the audio written in vanilla JS

Requirements for V1

Summary

Create an embeddable player for podcast episodes. The podcast needs to already be in dovetail, and episodes in feeder.

Playback Controls

  • Control playback to play or pause
  • Display playback progress (bar?)
  • Display duration and current time in audio
  • Move to specific time in the player (drag play head?)

Consider:

  • ff & rewind, skip 15 fwd or back - perhaps during pause?

View Details

  • Embeddable as an iframe
  • Display controls at the bottom of the player
  • Display an image associated with the audio at top
  • Sharing control (fb, twitter, mail, embed)

Consider:

  • Waveform?
  • Indicate ads visually (i.e. indicator for when an ad is playing?)

Ad Playback

  • Retrieve ads to be played from dovetail/adzerk/?
  • Play multiple files as if one, including ads
  • Report impressions for ads after played

Consider:

  • Indicate ads visually
  • Skip ads or not?

Analytics

  • Send player events to Google Analytics and/or count
  • Be able to tell how much of episode played (% or value)

The embed.prx.org site

  • View list of embeddable episodes for a podcast (embed.prx.org/{podcast path})
  • For each episode, (pre)view player
  • For each episode player, show embed html code

Implementation Decisions

  • Be able to playback the episode starting only with a dovetail mp3 url
  • Create underlying lib that does not rely on js for dovetail interaction and non-visual behavior
  • Create embed player display as a standalone angular 2 app, not part of www/beta
  • For the love of god, do not use soundmanager 2, but do use a shim or flash polyfill
Clone this wiki locally