Embed a 360 VR video

Embedding a 360 VR video works with a web distribution. It can be set up as progressive download or with HLS adaptive streaming.

If you haven't done so already, first set up the CORS Headers for your bucket and web distribution.
Then come back here and proceed.

To embed a 360 VR video, you have to select the media type 360 VR video which is introduced since version 7.9.3:

Media type 360 VR video

Shortcode: mediatype="vr360"

Below we discuss all the relevant fields for this type of embedding.
First we fill in the Title.  Although this is optional, it is recommended for SEO.  It also shows the title at the top on the video area:

Insert title

The title disappears as soon as the visitor clicks the video to play.

Shortcode: title="Whatever you want"

Next, we fill in the Media file. Just fill in the name of the video. If placed in a sub folder within a bucket, add that too, like this: myfolder/my360VRvideo.mp4. 

miedia file

Note that 360 VR video's can be setup as HLS adaptive streaming as well, but normally, this is set up as mp4 format..

Shortcode: file="my360VRvideo.mp4"

Web distribution
This is generally constructed like this: http://yourcloudfrontdistribution.cloudfront.net
BUT we make it easy for you. Just fill in the red part, it consists of lowercase alpha characters and number and is unique for every streaming distribution.
You can find out the CloudFront distribution name in the AWS console under the CloudFront service. Open it in a new tab/window to switch easily between your admin section and the AWS console:

aws-console-download-2

Interface may vary as AWS changes it very frequently.

When you click on the CloudFront link, you get a list of the distributions you made. If you haven't done already, check the Install & preparations tutorial.
In the list, select the Web distribution and copy only the distribution name and copy it:

Download distributions always start with a 'd'. A common mistake is to fill in the streaming distribution which always stats with a 's'. This is how it should look:

Note that in the screenshot above, you see (Default: xxxxxxxx) next to the Web distribution field. This is because I have set a default value in the Default options. I could leave this field therefore empty, but it can be overridden as I did here.

Shortcode: html5="dxxxxxxxxx"

Source 2
360 VR videos do not play on all devices, therefore it is a good idea to offer an alternative version of the video. This requires a full path to the fallback video, like https://dxxxxx.cloudfront.net/myfolder/myvideo.mp4

Shortcode: source2="https://dxxxxx.cloudfront.net/myfolder/myvideo.mp4"

Source 3
Although not really necessary, here you can set yet another format, like webm, for instance.

Shortcode: source3="https://dxxxxx.cloudfront.net/myfolder/myvideo.webm"

Url expires(seconds)
For private media, this field is required, otherwise the video with private permission will fail to play. For public progressive downloads, you can leave this field empty, although it will still play with an expiring URL.
URL expires(seconds) is expressed in seconds.
Thus: 10minutes = 600, 1 hour = 3600, a day = 86400, ...
In practice, you will want to make the time long enough because the seconds start to count as soon is the page is loaded. The visitor might not immediately click on your video and if they wait too long, they get an Access denied error.
iPad actually requires the full length of the video in seconds. Reason is that when the video stalls for some reason, iPad tries to reconnect to the same URL which could be expired by that time. That said, iPad 2 currently does not support 360 VR video's, nor do various other mobiles;  This will improve in time, though. We get now something like this:

In the screenshot above, I have set this to 600 because the video is 9 minutes, thus giving a reserve of 60 seconds.

Shortcode:  expires="600"

Encrypt paths
In general, it is a good idea to turn encrypting on, especially for progressive download videos (like 360 VR videos). It serves two purposes:

  1. The URL is unreadable to human eyes (although easy to revert with a tool like Firebug)
  2. Some themes and plugins translate special characters in all URLs automatically to be in order with html validation tools.  If that happens, the expiring URL is invalid because JWplayer tries to load the media via the translated URL . Encryption prevents this from happening.

It is recommended to set this as a default option.  If you have problems with your video, turn it off on the particular video item when you ask support, so that we can read the source code to check where the problem is. You can override the default setting per item even after the shortcode is generated. Simply add secure="no" to the shortcode.

Shortcode: secure="yes/no"

Poster image
Images can be .PNG, .GIF or .JPG. Use .GIF or .PNG or flat colored graphics and desktop screenshots. Use JPG for photos or artwork with many gradients.The extension presumes you uploaded the poster image to your domain. Only add the name of the image in this field, unless you placed it in a sub folder. If so, add the sub folder as well. You can override the domain setting by using an absolute path starting with http://... or https://... if the poster image is located somewhere else. In that case, you need to place a crossdomain.xml file in the folder where the poster image is located on the external domain or a bucket in AWS.
Example: myposterimage.jpg is the image and images is the sub folder, this becomes: images/myposterimage.jpg.

streaming-video6

It is also possible to link via an AWS web distribution, like this:

Poster image

In this case, a crossdomain.xml must be placed in the bucket.

Be creative, a poster image can be anything you want it to be. With regular embedding from YouTube for instance, you only get frozen image from the video. It can be much more then that.

Shortcode: image="myposter.jpg or http://..."

Autostart
Automatically play the video when the page loads. Default set to No. Be careful, setting video or audio to Autoplay is generally regarded as user unfriendly. Only use this feature if you are sure your visitors expect this sort of behavior.

Shortcode: autostart="yes/no"

Width
Since JWplayer version 6, the video player is responsive, meaning that it shrinks and enlarges depending on the screen of the user. This behavior works only with a responsive theme. The Width works in conjunction with the Aspect ratio field. As you can see from the screenshot above, the Height is grayed out, meaning not available for videos, only for audios.
In general, it is best to set the width to 100% unless your theme is not responsive. You may want to set this as a default option.

Shortcode: width="percentage/pixels"

Then select the Aspect ratio.

Aspectratio

If it is a widescreen video, select 16:9, for stadard video, select 4:3
If you have another format used sidewide, let us know and we will adapt the extension for you. This is free of charge. Otherwise, adapt the shortcode.

Shortcode: aspectratio="16:9/4:3/other"

Video stretching is set default to Uniform. This gives the best result.  But if you need it, you can set it to Fill if the video does not fill the video area completely. The video will then stretch to fit exactly into the video player. None is a rather useless option but we added it for completeness.

Shortcode: stretching="uniform/fill/none"

Controlbar
Standard set to Show. It behaves in the same way as on YouTube now. If set to Show, the controlbar shows when the user moves his mouse over the video area. It will disappear after a few seconds.
It is possible to hide the controlbar permanently.  This may be useful if Autostart is set to yes but generally, this is not a good idea because other features, like the CC button will remain hidden as well.

Shortcode: controlbar="yes/no"

Repeat media
Standard set to None. If working with a single video, you can set it to repeat indefinitely by selecting Repeat forever.  Please note: With an external playlist, it will play all videos in the list in the order you placed the video, just once if set to Repeat forever. Standard this is set to None (recommended in most cases).

Shortcode: repeat="yes/no"

Select skin
Standard set to default skin. S3Media Stream Enterprise comes with 12 JW Player 7 skins.  These are not fully compatible with JW Player 8, but you might to adapt one or you can create your own skins and place them into wp-content/plugins/s3mediastream-video/assets/skins
The plugin will automatically list your skin.

Shortcode: skin="stormtrooper" (whereas stormtrooper is one of the possible skins).

Captions/subtitles
The player accepts .vtt and .srt files. Since multilingual subtitles are possible with JWplayer 6 or higher, this has advantages and disadvantages:

  • The advantage is that you can serve various languages in one go and when you place them in the same folder, the plugin will pîck them all up and display them via the CC button:
    Example multi-lingual subtitles
  • The disadvantage is that you need to create a folder for each video on your domain whereas in the past, you could simply link to a single subtitle file from anywhere.

In short, the subtitles need to be organized within a main folder like for example "subtitles" and then for each video, you create a subfolder so that only the relevant subtitle files are listed for a particular item.
Therefore, if you have a folder subtitles in the root of your domain and the subfolder which contains the subtitles for this particular video is called video1, then you fill in the Captions/subtitles field like this: subtitles/video1

The plugin adds the domain name automatically for you.

streaming-video9

Enforce background is standard set no No. Sets a dark background behind the subtitles in case the text is difficult to read. Captions behavior determines whether the subtitles show up automatically or should be triggered by the user via the CC button in the controlbar.
Subtitles shows the subtitles automatically whereas Closed captions needs action from the user. Note that Closed caption files are meant for the hearing impaired. They require that you also add an equivalent in text format for background noises.

If Captions/subtitles is not filled in, the two other settings are ignored.

Note: Upload these files with an FTP application because WordPress regards this type of files as suspicious.
View the tutorial How to create captions/subtitles for video and audio in WebVTT, SRT, DFXP format

Shortcode captions="folder" capback="yes/no" capstate="yes/no"

Sharing (Premium license only)
Standard set to No. Sharing places an icon in the video area to share the page to the video via social media.

Sharing video

When the visitor clicks on the share icon, he/she gets the option to share the page, it does not link to the video directly, so there is no problem with expiring links:

Works in conjunction with the optional field Heading. This field is useful if you want to translate the standard heading "Share video" into another language or customize that text. In the example above, we filled in "Share audio" since the screenshot comes from an audio.
Leave empty if you want to use the default.

Shortcode: sharing="yes/no " shareheading="Whatever you like"

Logo/watermark (Pro/Premium license only)
watermark-example2Usually a logo in .GIF .PNG or SVG format. You are not restricted to logos. This can be any sort of image, but keep in mind that if you want it to show up semi-transparant, you need to use css, either in your custom skin or in the theme's style sheet.

 

The extension presumes you uploaded the watermark on this domain. Only add the name of the watermark in this field, unless you placed it in a sub folder. If so, add the sub folder as well.
Example: myWatermark.png is the image and tutorials is the sub folder, this becomes: tutorials/myWatermark.png. .PNG tends to give the best results. You can override the domain setting by using an absolute path starting with http://... if the watermark is located somewhere else. In this case, you need to place a crossdomain.xml file where the watermark is located.
You can also use the watermark to discourage screen capturing, if your server supports it:
Prevent screen capturing.

Watermark position
streaming-video10This is either Top-left, Top-right, Bottom-left(default) and Bottom-right. Bottom-right is often the place to expect a watermark, but it is often taken already by YouTube, for instance. In my experience, it is best set at Top-left or Top-right.

Logo link
An absolute path to any page you like, being it local, external or even een anker. Examples: https://www.wp21century.com, #top (an anker which would go to the top of the page where the module is placed), a page: http://yourdomain.com/my-sales-page. The last example could be used in video tutorials to send the visitor to a sale page to buy a related product. We are sure you can find good use for this.
If the Logo link is not filled in, the watermark feature is ignored.

Shortcode: logo="watermark.png" logopos="top-left/top-right/bottom-left/bottom-right" logolink="http://...."

Inserting the code

If you are ready, click the Insert code button. Save the page or post as a draft and test the Preview.
Does it work as you expected? Congratulations! If you place a lot of videos in the same bucket, you can copy the shortcode from your page/post, change the name of the video and poster image, while leaving the rest as is and put it into another post/page.  That way you can work even quicker.

Troubleshooting

If you have problems, check that the shortcode does not contain formatting code or has an active link. Sometimes, an absolute URL turns into a link. Un-link it, otherwise it will nor work.
Still problems? Contact us here. Please let us know which software you use, the WordPress version and a description of the problem. Providing a published page with the video would be a good idea as well, so that we can check.
But keep in mind: 360 VR video is not yet widely adapted by all browsers. Only the latest versions support this.

Your feedback on this manual is always welcome!

Leave a Reply

Your email address will not be published. Required fields are marked *

Updated: December 16, 2017