If you didn't know this (and most people don't at first), Multipop doesn't actually host, stream or play your videos. Instead, it "wraps" the interactive content around other video players. There are three really good reasons why we did is this way:
- You can leave your video where it is. No need to upload copies to us and introduce more asset management to your workload.
- Other companies are experts at delivering video at scale to multiple platforms. We want to build on that investment rather than reinvent that wheel.
- It keeps our prices down. By far the most expensive aspect of delivering video is bandwidth cost. We only incur it for text, images and data, not the video itself.
As of this writing, we have wrapped the following video players: YouTube, Vimeo, Ooyala, Kaltura, Flowplayer, Limelight and Brightcove. Multipop presents its interactive content in sync with the video in these players. It does this by associating each content item with a time on the video. For example, show this merchandise at 0:32, that vote at 1:12, then display an ad at 2:02.
If your video is not being served by one of these, it's likely Multipop can still work for you. There are two ways to move forward: direct streaming from your CDN, or a custom wrapper for your player.
Direct Streaming of Your Files
This option can make sense if:
- You have not built a custom video player user interface (because we will render your video in a basic player within Multipop)
- Your video files are available on a publicly accessible CDN or web server
- The files can be served over SSL (i.e., the URLs to the files start with https://)
- There is no digital rights management (DRM) or password required to access the files
- Each video is available in at least 2 formats: MP4 and WEBM. Ideally you will also have M3U8 file for mobile streaming. If you are using an transcoding service to render your files for delivery, it should be able to produce all these formats.
If this fits your situation, you can simple pick the "Your Files" option when creating a Multipop video and follow the instructions to enter your video URLs.
This option can make sense if:
- You are using a video platform we don't yet support
- You have built a custom player user interface with features you want rendered within the Multipop player
If this fits your situation, contact us to discuss feasibility and business arrangements. We're always interested in broadening our support and welcome discussing options.
For the technically minded, continue reading to understand what we need in place to be able to build a custom wrapper.
Caution: Technical Jargon Ahead. The remainder of the article is geared toward a technical audience.
1. Your API must support the following functionality (the names can of course be different).
- canPlay - fires when enough of the video has loaded to begin playback
- canPlayThrough - fires when enough of the video has loaded to play all the way through
- ended - fires when the end of the video is reached
- pause - fires when playback pauses
- play - fires when playback starts (from beginning or from the paused state)
- timeUpdate - fires continuously during playback (at least once per second)
- volumeChange - fires when the volume setting is changed
- mute() - sets the volume to zero
- pause() - pauses playback
- play() - starts playback from the current seek position
- seek(seekToSeconds) - moves playhead to given position in seconds
- showControls(showOrHide) - shows or hides the playback controls in your player
- volume(value) - sets volume to given value
- currentTime - current position of the playhead in seconds
- duration - duration of the video in seconds
- paused - true if currently paused, false of currently playing
- volume - current value of the volume control
2. Your player must be embeddable into a web page.
Each of your videos must have a unique embed code that we can insert into a web page. Typically implementations are either an iframe with a src parameter unique to the video, or a script we call with initialization parameters to inject the appropriate code into the page. The implementation is really up to you, but take a look at any of the supported players above for examples.
There are a few additional requirements related to your embed code:
- your player must be responsively sized, i.e. if we set your iframe to a given height and width, we expect your player to expand to the available space dynamically
- your player must be served over SSL (including any and all assets, scripts, stylesheets or other files it included)
- your API must let us communicate with your player cross domain (because your player will be embedded in page on the getmultipop.com page)
If all of the above is in place, a wrapper should be possible. Some things to watch for include make sure your embeddable player and API work across all browser and mobile devices, and if you are using Flash in your implementation, making sure your API works consistently when video is rendered that way vs. native HTML5.