latest stable versions: v140409 (changelog)

JW Player® w/ s2Stream Shortcodes


Streaming protected audio/video files can be an extremely daunting task for many. It is difficult enough to create audio/video files, and to implement audio/video players with all the configuration options just right. When you throw in user authentication, Amazon® S3, Amazon® CloudFront, Digitally Signed URLs, Origin Access Identities, Amazon® S3 ACLs, etc; it can simply be overwhelming!

I won’t say s2Member® makes this SUPER easy for just ANYONE to accomplish. If we look at everything that s2Member® and s2Member® Pro can do, taking all of its features into consideration, I think it would be fair to say audio/video streaming is THE most advanced aspect of s2Member®. However, if you tried to accomplish everything that s2Member® does (with respect to audio/video streaming) — all on your own, I believe you would find that s2Member® absolutely saves you time and lots of headaches. Even if you’re a developer (i.e. you could do all of this yourself), s2Member® can help you out here!

In this article I’m going to walk you through the steps necessary to get protected audio/video streams on your site, delivered over the RTMP protocol to your Users/Members who have been authenticated by s2Member®. There is also a video tutorial about this topic here, if you would prefer to watch. However, this article contains more up-to-date information.

Step #1 — Basic Download Restrictions

See: Dashboard -› s2Member® -› Download Options -› Basic Download Restrictions

As a security precaution, s2Member® will NOT deliver protected File Downloads (including audio/video files), until you’ve setup some Basic Download Restrictions. Even if you’re not planning to limit the number of the File Downloads (audio/video files) that are delivered to your Users/Members, you still need to specify at least one Download Restriction in this section of your Dashboard. This enables s2Member’s File Download functionality on your installation. You can set things up for UNLIMITED File Downloads if you like, but please complete this step first.

Step #2 — Amazon® S3/CDN Storage Option

Amazon® S3 is NOT absolutely required.
We HIGHLY recommend that you integrate s2Member® with Amazon S3 & Amazon CloudFront. This will dramatically improve your experience, and your customer’s experience. It is going to give you better performance, and increased compatibility across various devices. That being said, this step is NOT absolutely required. If Amazon S3 is not for you, please feel free to skip this step.

Amazon® Simple Storage Service (Amazon® S3) is storage for the Internet. It is designed to make web-scale computing easier for developers. Amazon S3 provides a simple web services interface that can be used to store and retrieve any amount of data, at any time, from anywhere on the web. It gives developers access to the same highly scalable, reliable, secure, fast, inexpensive infrastructure that Amazon® uses to run its own global network.

Signup for Amazon® S3 Service

See: Amazon® S3

Creating An Amazon® S3 Bucket for s2Member®

s2Member® assumes that you’re creating a new Amazon S3 Bucket, specifically for your s2Member® installation; and that your Bucket is NOT available publicly. In other words, if you type this URL into your browser (i.e. http://your-bucket-name.s3.amazonaws.com/), you should get an error that says: Access Denied. That’s good, that’s exactly what you want. Please create your Amazon S3 Bucket using the Amazon Management Console. Or, some people prefer to use this popular Firefox® extension (S3 Fox Organizer).

When you create an Amazon S3 Bucket, it is private by default. So creating the S3 Bucket is all that’s needed here. Don’t worry about permissions or anything like that, the defaults work just fine. It’s a private Bucket, and that’s what you need for s2Member®. You can name your Amazon S3 Bucket anything you like. See screenshot below.

Give s2Member® Your Amazon® S3 Bucket Name & Keys

See: Dashboard -› s2Member® -› Download Options -› Amazon® S3/CDN Storage Option

See: Amazon® Management Console -› My Security Credentials -› Access Credentials

Step #3 — Amazon® S3/CloudFront CDN Delivery Option

Amazon® S3/CloudFront are NOT absolutely required.
We HIGHLY recommend that you integrate s2Member® with Amazon S3 & Amazon CloudFront. This will dramatically improve your experience, and your customer’s experience. It is going to give you better performance, and increased compatibility across various devices. That being said, this step is NOT absolutely required. If Amazon S3/CloudFront are not for you, please feel free to skip this step.

s2Member® can be configured to ONLY use Amazon S3 (i.e. without Amazon CloudFront). Or, s2Member® can be configured to use BOTH Amazon S3 and Amazon CloudFront together (recommended). However, if you don’t want to use Amazon® CloudFront, please skip this step and leave the configuration options in this section of your Dashboard empty please. If you’re not integrating Amazon CloudFront, you don’t need to configure it for s2Member®. However, please note that without Amazon CloudFront, you will NOT be capable of serving true audio/video streams over the RTMP protocol. Audio/video files will play fine, but they won’t stream.

Amazon® Simple Storage Service (Amazon® S3) combined with Amazon® CloudFront. Amazon® CloudFront is a web service for content delivery. It integrates with other Amazon® Web Services (such as Amazon® S3) to give developers and businesses an easy way to distribute content to end users with low latency, and with high data transfer speeds. Amazon® CloudFront delivers your static and streaming content using a global network of edge locations. Requests for your Amazon® S3 Bucket Objects (i.e. your protected files) are automatically routed to the nearest edge location, so content is delivered with the best possible performance. s2Member® has been integrated with both Amazon® S3 and with Amazon® CloudFront. One of the great things about Amazon® CloudFront, is its ability to stream/seek media files in the truest sense of the word. For sites delivering protected FLV/MP4/OGG/WEBM and other streaming audio/video file types over the RTMP protocol, Amazon® CloudFront is our recommendation.

It’s IMPORTANT to realize what RTMP streams really mean, from a security standpoint. When you stream over the RTMP protocol, you are making audio/video files available for playback, but NOT for download or redistribution. For some business models, this is critical! For instance, instead of pushing an entire MP4 video to your clients (which is actually downloadable), an RTMP stream, is just that; it’s a stream. It can be viewed, but not easily downloaded in whole (or redistributed).
Signup for Amazon® CloudFront Service

See: Amazon® CloudFront

Give s2Member® Your Amazon® CloudFront Keys

See: Dashboard -› s2Member® -› Download Options -› Amazon® S3/CloudFront CDN Delivery Option

See: Amazon® Management Console -› My Security Credentials -› Access Credentials

Tell s2Member® To Auto-Configure S3/CloudFront For You

Dev Note w/Technical Details: s2Member’s auto-configuration routines for Amazon® CloudFront are designed to create & configure various components on your Amazon® Web Services account, which are all requirements for you to serve protected files through the Amazon® S3/CloudFront combination.

These components include: an Origin Access Identity, read permissions for the Origin Access Identity, and two private content Distributions. One private content Distribution for file downloads, and another private content Distribution for streaming media files; both connected to and sourced by your Amazon® S3 Bucket. In addition, s2Member will automatically configure an ACL & Policy (i.e. permissions) on your Amazon® S3 Bucket to make sure your protected object/files are NOT available to the public.

If you’ve integrated Amazon® CloudFront, please wait at least 30 minutes before attempting to test audio/video files. You will need to give Amazon® CloudFront some time to fully deploy your CloudFront Distributions. Thirty minutes is usually enough. However, if you’re having trouble, please be patient and wait another 30 minutes or so.

Step #4 — Uploading Sample Audio/Video Files

I’m attaching a ZIP file to this article, with both the audio.mp3 and video.mp4 sample files I use in this tutorial. Please download audio-video-samples.zip. Extract the samples and upload them to your S3 Bucket please.

If you have NOT integrated with Amazon® S3, please upload the examples to your website instead. They should be uploaded locally, to this security-enabled directory that comes with s2Member®. Upload to: /wp-content/plugins/s2member-files/
Upload Sample Audio/Videos Files Into Your Amazon® S3 Bucket

See: Amazon® Management Console -› S3 Console -› [Choose Bucket] -› Click Upload

Step #5 — Installing JW Player® v6

Visit LongTail Video and download JW Player®. Unzip and place the /jwplayer directory into the root of your website via FTP. We recommend FileZilla for this.

Step #6 — Using The [s2Stream /] Shortcode (By Example)

1. JW Player® v6 (HTTP MP4 via Rewrite URLs. S3/CloudFront NOT Required)

If you have NOT integrated with Amazon CloudFront, only with Amazon S3. Or, if you have NOT integrated with either of these services, and you’re simply serving protected audio/video files from the local /s2member-files/ directory; please follow this example. This works with any audio/video file. This does NOT require s2Member® to be integrated with Amazon® S3/CloudFront. If you’ve integrated with Amazon S3, that’s fine; but it’s NOT a requirement for this to function properly. Audio/video will play fine via HTTP, but please note — this is NOT an RTMP stream.

Copy/paste this Shortcode into any WordPress® Post or Page.

[s2Stream player="jwplayer-v6" player_path="/jwplayer/jwplayer.js" player_width="480" player_height="270" file_download="video.mp4" rewrite="yes" /]

There are MANY optional Shortcode Attributes available.
See tab above: Shortcode Attributes (Explained)

2. JW Player® v6 (RTMP streaming MP4 — Both S3/CloudFront Required)

This is a true RTMP stream. Plus, s2Member® will use a full download of the MP4 video file as a fallback on devices that do not support RTMP streams for any reason. When you set player="jwplayer-v6-rtmp" (as seen in the example below), you MUST have both Amazon S3/CloudFront integrated with s2Member®.

Copy/paste this Shortcode into any WordPress® Post or Page.

[s2Stream player="jwplayer-v6-rtmp" player_path="/jwplayer/jwplayer.js" player_width="480" player_height="270" file_download="video.mp4" /]

There are MANY optional Shortcode Attributes available.
See tab above: Shortcode Attributes (Explained)

3. JW Player® v6 (RTMP streaming MP4 Only — Both S3/CloudFront Required)

This is a true RTMP stream. And ONLY an RTMP stream. s2Member® will NOT use a full download of the MP4 video file as a fallback on devices that do not support RTMP streams. When you set player="jwplayer-v6-rtmp-only" (as seen in the example below), you MUST have both Amazon S3/CloudFront integrated with s2Member®.

Copy/paste this Shortcode into any WordPress® Post or Page.

[s2Stream player="jwplayer-v6-rtmp-only" player_path="/jwplayer/jwplayer.js" player_width="480" player_height="270" file_download="video.mp4" /]

There are MANY optional Shortcode Attributes available.
See tab above: Shortcode Attributes (Explained)

1. JW Player® v6 (HTTP MP3 via Rewrite URLs. S3/CloudFront NOT Required)

If you have NOT integrated with Amazon CloudFront, only with Amazon S3. Or, if you have NOT integrated with either of these services, and you’re simply serving protected audio/video files from the local /s2member-files/ directory; please follow this example. This works with any audio/video file. This does NOT require s2Member® to be integrated with Amazon® S3/CloudFront. If you’ve integrated with Amazon S3, that’s fine; but it’s NOT a requirement for this to function properly. Audio/video will play fine via HTTP, but please note — this is NOT an RTMP stream.

Copy/paste this Shortcode into any WordPress® Post or Page.

[s2Stream player="jwplayer-v6" player_path="/jwplayer/jwplayer.js" player_width="480" player_height="270" file_download="audio.mp3" rewrite="yes" /]

There are MANY optional Shortcode Attributes available.
See tab above: Shortcode Attributes (Explained)

2. JW Player® v6 (RTMP streaming MP3 — Both S3/CloudFront Required)

This is a true RTMP stream. Plus, s2Member® will use a full download of the MP3 audio file as a fallback on devices that do not support RTMP streams for any reason. When you set player="jwplayer-v6-rtmp" (as seen in the example below), you MUST have both Amazon S3/CloudFront integrated with s2Member®.

Copy/paste this Shortcode into any WordPress® Post or Page.

[s2Stream player="jwplayer-v6-rtmp" player_path="/jwplayer/jwplayer.js" player_width="480" player_height="270" file_download="audio.mp3" /]

There are MANY optional Shortcode Attributes available.
See tab above: Shortcode Attributes (Explained)

3. JW Player® v6 (RTMP streaming MP3 Only — Both S3/CloudFront Required)

This is a true RTMP stream. And ONLY an RTMP stream. s2Member® will NOT use a full download of the MP3 audio file as a fallback on devices that do not support RTMP streams. When you set player="jwplayer-v6-rtmp-only" (as seen in the example below), you MUST have both Amazon S3/CloudFront integrated with s2Member®.

Copy/paste this Shortcode into any WordPress® Post or Page.

[s2Stream player="jwplayer-v6-rtmp-only" player_path="/jwplayer/jwplayer.js" player_width="480" player_height="270" file_download="audio.mp3" /]

There are MANY optional Shortcode Attributes available.
See tab above: Shortcode Attributes (Explained)

  • Attributes Specific To The [s2Stream /] Shortcode
  • file_download="video.mp4" Location of the audio/video file, relative to the /s2member-files/ directory; or, relative to the root of your Amazon® S3 Bucket, when applicable.
  • player="jwplayer-v6-rtmp" Required. Current supported players in this Shortcode include: jwplayer-v6 (works with any audio/video file, and you do NOT need to have Amazon® S3 or CloudFront™ integrated for this to work), jwplayer-v6-rtmp (streams with the RTMP protocol, plus there is a full download fallback of the source file if streaming is not possible on a particular device; this requires both Amazon® S3 and CloudFront™ integration), jwplayer-v6-rtmp-only (streams with the RTMP protocol only, with no access to the source file, only to the RTMP stream; this requires both Amazon® S3 and CloudFront™ integration).
  • player_id="" Optional. HTML div ID for the audio/video player. Defaults to a unique ID generated by s2Member® for each instance of your Shortcode.
  • player_path="/jwplayer/jwplayer.js" Required. Path to the player’s JavaScript file (ex: /jwplayer/jwplayer.js — you should upload the /jwplayer folder to the root of your web directory).
  • player_{setting}="" Optional. Any additional attributes supported by your audio/video player, prefixed with player_. For JW Player™ v6, see this article please.

    Here are a few JW Player™ v6 examples:

    player_width="480"
    player_height="270"
    player_title="My Video"
    player_description="A video about something."
    player_image="http://www.example.com/video-preview.jpg"
    player_mediaid="video_ei0wsx23"
    player_autostart="true"
    player_skin="/jwplayer/my-skin.xml"
    player_key="my-license-key"

    player_captions="{file:'/assets/captions-en.vtt',label:'English'}"
    With Captions, you can exclude the square array brackets to avoid Shortcode parsing issues. s2Member® will automatically wrap your Caption objects with square array brackets.

    Please note that “Advanced Options Blocks” listed on this page are NOT supported here. For those, please use: player_option_blocks="" (see additional details below).

    Also, please note that some of these example settings actually get inserted into a playlist:[] object property for JW Player™. s2Member® handles all of that for you though. All you do is supply any of these settings you’d like to define. They are all optional.

    To clarify further, s2Member® implements the playlist:[] object property itself. Therefore, you cannot define your own playlist:[] (not even w/ Advanced Option Blocks). The playlist is generated by s2Member® based on your file_download="" Attribute; and other settings here.

    For instance, the following example settings from above; actually work together inside a playlist:[] object property generated by s2Member: player_title, player_image, player_mediaid, player_description and player_captions

    The resulting playlist:[] that is generated by s2Member®, will always contain a single item; but perhaps with multiple sources — depending on which player="" you’ve chosen (i.e. jwplayer-v6, jwplayer-v6-rtmp, jwplayer-v6-rtmp-only).

  • player_option_blocks="" Optional. Any “Advanced Option Blocks” supported by your audio/video player. For JW Player™ v6, see this article please.

    Here are a few JW Player™ v6 examples:

    player_option_blocks="sharing:{}"
    player_option_blocks="sharing:{},logo:{file:'/logo.png',link:'http://example.com'}"
    player_option_blocks="c2hhcmluZzoge30=" Base64 encoded version of sharing:{}

    Please note that “Advanced Options Blocks” can be defined in plain text or with a base64 encoded string. Advanced Option Blocks are JavaScript objects with properties.

    If you have any trouble defining JavaScript object properties inside a Shortcode Attribute, please use this tool to base64 encode your Advanced Option Blocks, so that you end up with a string that’s compatible with Shortcode Attributes.

    There are some exceptions. You CANNOT define a playlist:[] option block here. See notes above regarding the way s2Member® auto-generates the playlist:[] option block based on other settings you define with the s2Stream Shortcode. Also, Captions should NOT be defined here, because those go into a playlist:[]. Please use player_captions instead (see example above).

  • Some Additional Attributes Inherited From The [s2File /] Shortcode
  • download_key="no" Defaults to no. If download_key="1|on|yes|true|ip-forever|universal", s2Member® will authenticate access to the audio/video content through an auto-generated File Download Key. You don’t need to generate the File Download Key yourself, s2Member® does it for you. This means that a User/Member does NOT need to be logged into the site to view the audio/video, because you’re providing them with a Key which grants them access automatically. If you set download_key="ip-forever", the File Download Key that s2Member® generates will last forever, for a specific IP Address; otherwise, by default, all File Download Keys expire after 24 hours automatically. If you set download_key="universal", s2Member® will generate a File Download Key that is good for anyone/everyone forever, with NO restrictions on who/where/when a file is accessed (e.g. be careful with this one).
  • storage="" Defaults to an empty string. If storage="local|s3|cf", s2Member® will serve the file from a specific source location, based on the value of this Shortcode Attribute. For example, if you’ve configured Amazon® S3 and/or CloudFront; but, there are a few files that you want to upload locally to the /s2member-files/ directory; you can force s2Member® to serve a file from local storage by setting storage="local" explicitly.
  • ssl="" Defaults to an empty string. If ssl="1|on|yes|true", s2Member® will serve the audio/video file over the SSL protocol (i.e. the URL will start with https:// or rtmpe:// — if you’re serving an RTMP stream). If empty, s2Member® will only serve the file over the SSL protocol, when/if the Post/Page/URL firing the Shortcode itself, is also being viewed over SSL. Otherwise, s2Member® will use a non-SSL protocol by default.
  • rewrite="yes" Defaults to yes. If rewrite="1|on|yes|true", s2Member® will generate an audio/video URL (for HTTP content served from the /s2member-files/ directory), which takes full advantage of s2Member’s Advanced Mod Rewrite functionality. If you’re running an Apache web server, or another server that supports mod_rewrite, we highly recommend turning this on. s2Member’s mod_rewrite URLs do NOT contain query string parameters, making them more portable/compatible with other software applications and/or plugins for WordPress®. If you’re integrating with JW Player®, you MUST use rewrite="yes", otherwise you will have errors because JW Player® can’t deal with query string parameters. Note, this setting has no impact on Amazon S3/CloudFront integrations when used together with the [s2Stream /] Shortcode. It only affects instances of the [s2Stream /] Shortcode where you have player="jwplayer-v6" (when in most cases you’d be serving files from the local /s2member-files/ directory).
  • rewrite_base="" Defaults to an empty string. If rewrite_base="http://www.example.com/", s2Member® will generate an audio/video URL that takes full advantage of s2Member’s Advanced Mod Rewrite functionality, and it will use the rewrite base URL as a prefix. This could be useful on some WordPress® installations that use advanced directory structures. It could also be useful for site owners using virtual directories that point to /s2member-files/. Note, if rewrite_base is set, s2Member® will automatically force rewrite="yes" for you.
  • count_against_user="yes" Defaults to yes. If count_against_user="1|on|yes|true", it will automatically force check_user="true" as well. In other words, s2Member® will authenticate the current User, and if authenticated, count the audio/video file against the current User’s account record in real-time (i.e. as the audio/video is being served). There is really very little reason to change the value of this (you want it set to yes). If you’re serving audio/video files, you want those to count against whoever is accessing them. This way s2Member’s download counters will work effectively against your Basic Download Restrictions, as configured with s2Member®.
  • check_user="yes" Defaults to yes. If check_user="1|on|yes|true", s2Member® will authenticate the current User before allowing the audio/video file to be accessed. There is really very little reason to change the value of this (you want it set to yes). If you’re serving audio/video files, you want to authenticate the current User/Member, and you want the audio/video files being served to count against whoever is accessing them. This way s2Member’s download counters will work effectively against your Basic Download Restrictions, as configured with s2Member®.

Mobile Devices[s2Stream /] Shortcode & JW Player Considerations

Set player_width="100%" and player_aspectratio="ww:hh" (not required, but definitely a good idea). Also force the primary player object to html5 which uses a <video> tag if at all possible; as opposed to flash as the default primary that s2Stream uses in order to support RTMP (not required either, but helps prevent issues in JW Player auto-detection).

Mobile support w/ s2Stream (example):

[s2Stream player="jwplayer-v6" player_path="/jwplayer/jwplayer.js" player_primary="html5" player_width="100%" player_aspectratio="12:5" file_download="video.mp4" /]

See also: http://www.longtailvideo.com/support/jw-player/28837/browser-device-support/

Problems People Have w/ Mobile Devices

They try to serve RTMP files on mobile devides (won’t work; to my knowledge).

Or, they are using the s2Stream Shortcode w/o setting player_primary="html5".

Or, they are trying to serve audio/video files from local storage (e.g. from /s2member-files) instead of serving this media via S3 or CloudFront; which is always better. Depending on server configuration, there is always a chance that s2Member’s PHP-based file delivery from local storage may not be compatible with certain versions of Android/iOS. Always better to serve media from a CDN so it can be delivered statically (what most mobile devices expect to deal with).

Ideally, for mobile device consideration you would…

  • Host all of your media in an S3 bucket and NOT host it locally. Not required but this helps to avoid issues.
  • Set player_width="100%" and player_aspectratio="16:9" (or whatever aspect ratio is appropriate). Neither of these are required, but this helps to avoid issues.
  • Set player_primary="html5" (not required, but this helps to avoid issues).
  • NOT use RTMP at all; or if so, use it with an MP4 too; as a fallback (e.g. player="jwplayer-v6-rtmp"). You can use player="jwplayer-v6" or player="jwplayer-v6-rmtp"; but always avoid the use of player="jwplayer-v6-rtmp-only"; because you DO want to allow MP4 file access on mobile devices; they can’t play files over the RTMP protocol.

Advanced Techniques (WordPress® Theme Integration)

Shortcodes are great. Simple, easy-to-use, and they don’t cause problems with the WP Visual Editor. However, if you’re trying to integrate s2Member’s functionality into a theme file; you might find the following ideas useful.

Idea #1. Integrating A Shortcode via PHP code
<?php echo do_shortcode('[s2Stream player="jwplayer-v6-rtmp" ... /]'); ?>

See: http://codex.wordpress.org/Function_Reference/do_shortcode

Idea #2. Integrating Your Own JW Player® JavaScript (this is more difficult)

See the following example. Also see API Function: s2member_file_download_url().

You will also find some additional PHP code samples here, covering other scenarios.
See: Dashboard -› s2Member® -› Download Options -› JW Player® v6 & RTMP Protocol Examples

<?php
// Configuration.
$s2_jw_config["jwplayer"] = "/jwplayer/"; // Relative URL path to JW Player files directory.
$s2_jw_config["mp4_video_file_name"] = "video.mp4"; // Name of your MP4 test file.
// Don't edit anything else below unless you know what you're doing.
?>

<div id="jw-container">JW Player® appears here.</div>
<script type="text/javascript" src="<?php echo $s2_jw_config["jwplayer"]; ?>jwplayer.js"></script>

<?php // A direct URL to the RTMP source; counting the file against the current User in real-time.
$cfg = array ("file_download" => $s2_jw_config["mp4_video_file_name"], "url_to_storage_source" => true, "count_against_user" => true); ?>

<?php // API Function `s2member_file_download_url()` returns false if access is denied to the current User.
if (($mp4 = s2member_file_download_url ($cfg, "get-streamer-array"))) { ?>

    <script type="text/javascript">
        jwplayer('jw-container').setup({
                playlist:
                    [{
                        sources:
                            [
                                {type: 'rtmp', file: '<?php echo $mp4["streamer"]; ?>/mp4:<?php echo $mp4["file"]; ?>'},
                                {type: 'mp4', file: '<?php echo $mp4["url"]; ?>'}
                            ]
                    }],
                primary: 'flash', width: 480, height: 270
            });
    </script>

<?php } else /* Access is denied to the current User. */ { ?>
    Sorry, you do NOT have access to this file.
<?php } ?>

About the Author

Jason (Lead Developer)Yep, I'm one of those oddball coders! When I'm not coding, I'm thinking about code, or helping others with code. Heck, sometimes my dreams are in the PHP language :-) It's been a passion of mine for 12+ years now.View all posts by Jason (Lead Developer) →

Contacting s2Member: Please use our Support Center for bug reports, pre-sale questions & technical assistance.