Atlantis.js

View the Project on GitHub Axonn/Atlantis.js

Atlantis.js = video.js + plugins + content marketing centric video embed code

Atlantis.js is a video player designed specifically for content marketing gurus and growth hackers alike. With a whole host of features such as call to actions and analytics tracking it is our goal to provide a simple to use video player for marketers. We still have a way to go.

Another video player? Why not just use video.js + plugins?

Video.js is a fantastic piece of work and continues to grow and improve every day. While video.js is great for expansion and fiddling we found after developing a few websites that we needed something simple yet powerful. A single source file, a more declarative syntax, and a single platform brings us these things.

Features

Quick Start

Insert the necessary scripts:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://p.ninjacdn.co.uk/atlantisjs/v0.11.7/atlantis.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://p.ninjacdn.co.uk/atlantisjs/v0.11.7/atlantisjs.css" type="text/css" />

Add the relevant source code to your webpage:

<video id="video1" class="ajs-default-skin atlantis-js" controls preload="auto" width="640" height="360" poster="http://video-js.zencoder.com/oceans-clip.png">     
    <source src="http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360.mp4" type="video/mp4" data-resolution="360p">
    <source src="http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360p.ogg" type="video/ogg" data-resolution="360p">
</video>

Include the following javascript embed code at some point lower down the page:

var atlantisVideo = AtlantisJS.Init({
    videos: [{
        id: "video1"
    }]
});

Et voila! The video plays and we can all go home. Lemonade for everybody :)

But wait! What about all the extra features mentioned earlier? Yes I suppose we should cover those as well.

Change the video source and resolution switching

These two are kind of intertwined. Lets have a look at the extra mark-up we need for changing source:

var atlantisVideo = AtlantisJS.Init({
    videos: [{
        id: "video1",
        sources: [{
            resolution: "360", 
            type: "video/mp4", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360.mp4"
        },
        {
            resolution: "360", 
            type: "video/ogg", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360p.ogg"
        }]
    },{
        id: "video2",
        sources: [{
            resolution: "360", 
            type: "video/mp4", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360.mp4"
        },
        {
            resolution: "360", 
            type: "video/ogg", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360p.ogg"
        }]
    }]
});

We now have two videos with identical sources. We can even switch between them by calling:

atlantisVideo.changeVideoById("video2");

Just bind the method to a button and away we go.

As for the multiple resolutions we will need to make two revisions.

Firstly add the extra sources to the html:

<video id="video1" class="ajs-default-skin atlantis-js" controls preload="auto" width="640" height="360" poster="http://video-js.zencoder.com/oceans-clip.png">     
    <source src="http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360.mp4" type="video/mp4" data-resolution="360p">
    <source src="http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360p.ogg" type="video/ogg" data-resolution="360p">
    <source src="http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing.mp4" type="video/mp4" data-resolution="720p">
    <source src="http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing720p.ogg" type="video/ogg" data-resolution="720p">
</video>

And then add the sources to the embed code:

var atlantisVideo = AtlantisJS.Init({
    videos: [{
        id: "video1",
        sources: [{
            resolution: "360", 
            type: "video/mp4", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360.mp4"
        },
        {
            resolution: "360", 
            type: "video/ogg", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360p.ogg"
        },
        {
            resolution: "720", 
            type: "video/mp4", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing.mp4"
        },
        {
            resolution: "720", 
            type: "video/ogg", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing720p.ogg"
        }]
    },{
        id: "video2",
        sources: [{
            resolution: "360", 
            type: "video/mp4", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360.mp4"
        },
        {
            resolution: "360", 
            type: "video/ogg", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing360p.ogg"
        },
        {
            resolution: "720", 
            type: "video/mp4", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing.mp4"
        },
        {
            resolution: "720", 
            type: "video/ogg", 
            src:"http://media.reelcontent.co.uk/9e4c69c5ae2c215d/old-website/ReelContentVideoContentMarketing720p.ogg"
        }]
    }]
});

Mission Complete!

Social Media Sharing

This section is a little sparse given the lack of customization currently present. At the time of writing there are 5 different social networks automatically included in Atlantis.JS: Facebook, Twitter, LinkedIn, Google+ and Tumblr. In the future we aim to add configuration to be able to turn these defaults off and add the ability to be able to add your own social networks in the source code.

Related Videos

When we talk about related videos what we refer to is the splash screen that appears right after a video finishes. The problem with this splash is that people's opinions as to what constitutes a finishing splash varies widely. While our fantastic templating options allow for a wide range of customisation in this department, we identified that marketers were generally looking for one of three options:

As such for the default we have three different templates depending on what options are given to the player.

Lets take a look at an example embed:

<script type="text/javascript">
var atlantisVideo = AtlantisJS.Init({
    videos: [{
        id: "vid1",
        endOfVideoOptions: {
            relatedVideos: {
                linkTarget:"player",
                title: "Related Videos",
                items: [
                    {   
                        img: "www.reelcontent.co.uk/assets/video_poster/StudioSmall.jpg", 
                        title: "Studio Videos",
                        linkId: "related-studio"
                    },
                    {   
                        img: "www.reelcontent.co.uk/assets/video_poster/StudioSmall.jpg", 
                        title: "On Location Videos",
                        linkId: "related-on-location"

                    },
                    {   
                        img: "www.reelcontent.co.uk/assets/video_poster/StudioSmall.jpg", 
                        title: "Animation Videos",
                        linkId: "related-animation"
                    }
                ]
            }
        }
    }]
});

endOfVideoOptions.template

Type: String Default: various Required: No

Name of the dust template to use to show the end of video screen. By default this varies on whether related videos and/or endOfVideoCallToActions are set.

endOfVideoOptions.relatedVideos.title

Type: String Default: Related Videos Required: No

Sets the title for the related videos section.

endOfVideoOptions.relatedVideos.items.img

Type: String Default: undefined Required: No

Sets the image url for the related video.

endOfVideoOptions.relatedVideos.items.title

Type: String Default: undefined Required: No

Sets the title for the related video.

endOfVideoOptions.relatedVideos.items.linkId

Type: String Default: undefined Required: No

Sets the title of the video that the related video will point to. Only applicable if linkTarget is set to player

endOfVideoOptions.relatedVideos.items.url

Type: String Default: undefined Required: No

Sets the URL of the video that the related video will point to. Only applicable if linkTarget is set to external

Call to Actions

It wouldn't be marketing if we weren't talking about call to actions. At this point in time there are two points for the introduction of call to actions:

Both are very easy to implement.

End of Video Call to Actions

Here's an example embed

<script type="text/javascript">
var atlantisVideo = AtlantisJS.Init({
    videos: [{
        id: "vid1",
        endOfVideoOptions: {
            callToAction: {
                title: "78% of people watch online video every week",
                subtitle: "Shouldn't you be engaging the growing audience?",
                button: {
                    link: "https://github.com/Axonn/Atlantis.js",
                    text: "Get Started"
                }
            }
        }
    }]
});

endOfVideoOptions.callToAction.title

Type: String Default: undefined Required: Yes

Sets the text used in the main title

endOfVideoOptions.relatedVideos.subtitle

Type: String Default: undefined Required: No

Sets the text used in the line just below the title. This line may disappear on lower resolutions so ensure the title works alone and with the subtitle.

endOfVideoOptions.relatedVideos.button.link

Type: String Default: undefined Required: Yes

Sets the URL that the call to action links to

endOfVideoOptions.relatedVideos.button.text

Type: String Default: undefined Required: Yes

Sets the text on the button

endOfVideoOptions.relatedVideos.button.text

Type: String Default: undefined Required: Yes

Sets the text on the button

These settings are just those used for the default template. If the html layout doesn't suit you you can render an dust template and embed using the template value. The model passed into this template will be the whole of endOfVideoOptions.

endOfVideoOptions.template

Type: String Default: various Required: No

Name of the dust template to use to show the end of video screen. By default this varies on whether related videos and/or endOfVideoCallToActions are set.

Pause Call to Actions

Here's an example embed. This one's pretty simple.

<script type="text/javascript">
var atlantisVideo = AtlantisJS.Init({
    videos: [{
        id: "vid1",
        pauseCallToAction: {
            text: "Super sexy call to actions <a href='https://github.com/Axonn/Atlantis.js/'>Drive traffic even when paused</a>"
        }
    }]
});

pauseCallToAction.text

Type: String Default: undefined Required: Yes

Text to be injected into the call to action. Any valid html is allowed.

Google Analytics

Google analytics track as many of our features as is possible as events. Here is a quick rundown of the different possible values:

Play

Triggers when the video is played for the first time. Will only trigger once per page load. (Analytics Event name: "Play")

Pause

Triggers anytime the video is paused. Can trigger multiple times during a video watch. (Analytics Event name: "Pause")

Error

Triggers anytime an error is thrown by the javascript. Can trigger multiple times during a video watch. (Analytics Event name: "Error")

Share

This is for use with the share plugin. This will trigger anytime one of the share sources is clicked. It should be noted that clicking one of the share sources and actually sharing the video might be slightly different metrics this is because of visitor who visit the share page but fail to follow through with sharing. (Analytics Event name: "Share")

QualityChange

This is for use with the resolution switching plugin. This will trigger anytime the resolution is switched and will return a different event based upon the new resolution. (Analytics Event name: QualityChange_* where * is the resolution, e.g. QualityChange_1080p).

VideoWatched

This will trigger whenever the user reaches a specific point in the video. The specific times where the event is triggered are (in seconds) 0.5, 5, 10, 15, 30, 45, 60, 90, 120, 150, 180 and so on in multiples of 30 seconds. This gives greater accuracy over the first minute of video with less later on. (Analytics Event name: VideoWatched_* where * is the time, e.g. VideoWatched_45)

Hotspots

With hotspots we can make content more engaging and interactive. They are probably the most complex to integrate so handle with care!

Again here's an example embed:

<script type="text/javascript">
var atlantisVideo = AtlantisJS.Init({
    videos: [{
        id: "vid1",
        hotspots: [{
            start: 67.4,
            position: [{
                    duration: 5.3,
                    path: AtlantisJS.Static(0.265,0.318)
                },
                {
                    duration: 0.4,
                    path: AtlantisJS.Linear(0.265,0.325, 0.16,0.46)
                },
                {
                    duration: 16,
                    path: AtlantisJS.Static(0.16,0.46)
                },
                {
                    duration: 16,
                    path: AtlantisJS.CubicBezier(0.16, 0.46, 0.4, 0.8, 0.2, 0.5, 0.9, 0.95)
                }],
            height: 0.32,
            width: 0.18,
            linkTarget: "splash",
            linkSplashData: {
                imageUrl: "whiteLogo.png",
                button1Text: "GitHub",
                button2Text: "Back to Video"
            },
            text: "Example Hotspot"
        }],
    }]
});

hotspots.start

Type: Number Default: undefined Required: Yes

Sets the time (in seconds) when a hotspot will appear.

hotspots.position.duration

Type: Number Default: undefined Required: Yes

Sets the time (in seconds) that the hotspot will either stay in its position or follow a specified path.

hotspots.position.path

Type: Function Default: undefined Required: Yes

The function of the path for the hotspot to follow. There are three paths currently supported:

All these values are given as fractions of the video (not the container, so ignoring black bars). So x = 0.5 would represent a position 50% in from the left.

hotspots.height

Type: Number Default: undefined Required: Yes

Height of the hotspot.

This value is given as a fraction of the video (not the container, so ignoring black bars). So a value of 0.1 would represent a height of 10% of the video.

hotspots.width

Type: Number Default: undefined Required: Yes

Width of the hotspot.

This value is given as a fraction of the video (not the container, so ignoring black bars). So a value of 0.1 would represent a width of 10% of the video.

hotspots.text

Type: String Default: undefined Required: No

The text added to the hotspot.

hotspots.linkTarget

Type: String Default: undefined Required: Yes

Specified the behaviour of the hotspot. The two available behaviours are showing a splash screen (value: "splash") or linking to another website (value: "external").

hotspots.linkSplashData.imageUrl

Type: String Default: undefined Required: Yes

The url for the image to be shown.

hotspots.linkSplashData.button1Text

Type: String Default: undefined Required: Yes

This is the text for the button that in the default template will link away to another site.

hotspots.linkSplashData.button2Text

Type: String Default: undefined Required: Yes

This is the text for the button that in the default template will link back to the video.

hotspots.linkSplashData.linkUrl

Type: String Default: undefined Required: No

If the hotspot links to another websitre this is where you set the url for that website.

hotspots.template

Type: String Default: ajsHotspotDefault Required: No

Name of the dust template to use for the hotspot. The model passed through will have the following values: "top" (px), "left"(px), "height"(px), "width"(px), "linkTarget", "linkUrl" and "text".

hotspots.linkTemplate

Type: String Default: ajsHotspotSplashPageDefault Required: No

Name of the dust template to use to show the end of video screen. The model passed through will be the hotspots.linkSplashData object.

Phew! I hope that all makes sense.

Custom Templating

While this is not a tangible feature per se, it's penetration of functionality into all the other features made it feel like it warranted it's own section. In a lot of the configuration details there is a parameter called "template". This refers to the name of a dust template registered in dust's global collection. Each of these features uses a dust template underneath set by default, however these can be overridden if you wish to write your own.