Adam Podolnick, Author at SproutVideo

SproutVideo now available through Embed.ly

Adam Podolnick — Mon, 12 Aug 2013 04:00:00 +0000

SproutVideo has always tried to make video hosting as simple and intuitive as possible for our customers. In that spirit, we’re pleased to announce that SproutVideo videos are now available through Embed.ly.

Embed.ly is a service that makes it easy to embed content, such as video, images, audio and more, from nearly any site on the web. Embed.ly is used by companies like Yammer, bit.ly, 37Signals, Storify, Reddit, Kickstarter, SoundCloud, and others to make it incredibly simple for users to embed content by just using a link without a need for a messy or complex embed code. Check out the Embed.ly to learn more about the service.

Thanks for including us, Embed.ly!

The post SproutVideo now available through Embed.ly appeared first on SproutVideo.

Quick and Dirty Custom Video Player Using jQuery UI

Adam Podolnick — Thu, 25 Apr 2013 04:00:00 +0000

Ever wish our player had really customized controls, or a specialized design? Using our Javascript Player API, it’s very easy to create your own unique user interface for your videos.

Here is a quick example using JQuery UI to help demonstrate the possibilities. Before we get started, here is what we’re going to build.

Step 1: Set up the embed code

The first thing you’ll need to do is set up your embed code so that it hides all of the SproutVideo UI around the player. To do that, open the video in question, navigate to Customizations, and use the “In-Line” option. Under “Pre-Play Settings,” check the box “Show Controls,” and under “Visible Player Controls,” check “Hide All Controls.”

Grab your new embed code by clicking in the “Customized Embed Code” box, or using the “Copy Embed Code” button underneath it.

Step 2: Setup our dependencies.

To easily interact with the SproutVideo API and create our UI, we’ll use JQuery and JQuery UI. This will make building things like our progress bar far easier.

Add the two libraries to the head of your HTML document, along with the default JQuery UI theme stylesheet. We’re also going to add the excellent Font Awesome web font. This web font has tons of great icons and will make adding things like play, pause, fullscreen and volume buttons a breeze without having to create any images.

Lastly, we need to add the SproutVideo Javascript API. Here is what our section looks like now:


  
  
   rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
   rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">

Step 3: Set up UI containers

We’re going to create a very basic player in this example and include the following controls:

A play / pause button
A progress bar that allows the viewer to seek within the video
A volume on / off button
A full screen button

Let’s set up our HTML:


	 class="player">
		 class="video">
			 class='sproutvideo-player' type='text/html' src='https://videos.sproutvideo.com/embed/709adcb31f19e5c6f8/cd8cf2e796aa69d3?noBigPlay=true&showcontrols=false' width='100%' height='100%' frameborder='0'>


		 class="toolbar">
			 class="control play-pause"> href="#"> class="icon-play">
			 class="progress-container">
				 class="progress">
			
			 class="control fullscreen"> href="#"> class="icon-fullscreen">
			 class="control volume"> href="#"> class="icon-volume-up">

OK, so now we’ve set up all of our necessary UI elements for our player and gave them reasonable class names so we can easily access them in javascript and style them. Here is what it looks like now.

Next, lets set up our progress bar:

$('.progress').slider({
	value: 0,
	orientation: "horizontal",
	range: "min",
	animate: true
});

Great. Now we have a progress bar but everything looks like a mess. Let’s make things a little more attractive.

.player {
	width: 640px;
	height: 403px;
	position: relative;
	margin: 50px auto;
}

.video {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 43px;
}

.control {
	float: left;
	padding: 0 10px;
}

.toolbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 13px 0 13px;
}

.control a {
	text-decoration: none;
	color: #000000;
}

.progress-container {
	position: absolute;
	left: 43px;
	right: 79px;
	width: auto;
}

.volume, .fullscreen {
	float: right;
}

Now this is starting to look like an actual video player. Now we just have to start hooking up the UI to the actual player.

Step 4: Hooking up the UI to the Javascript API

The next thing we need to do is create an instance of the SproutVideo player in our javascript and set it up to listen for the appropriate events and set up some state variable:

var _duration = 0, _playing = false, _volume = 1, _fullscreen = false;

var videoPlayer = new SV.Player({videoId: '709adcb31f19e5c6f8'});

videoPlayer.bind('ready', function(event){
	_duration = event.data.duration;
	$(".progress").slider("option", "max", _duration);
});

videoPlayer.bind('progress', function(event){
	$('.progress').slider("option", "value", (event.data.time));
});

videoPlayer.bind('pause', function(event){
	_playing = false;
	$('.play-pause i').removeClass('icon-pause').addClass('icon-play');
});

videoPlayer.bind('play', function(event){
	_playing = true;
	$('.play-pause i').removeClass('icon-play').addClass('icon-pause');
});

videoPlayer.bind('volume', function(event){
	_volume = event.data;
	if (_volume == 1) {
		$('.volume i').removeClass('icon-volume-off').addClass('icon-volume-up');
	} else if (_volume == 0) {
		$('.volume i').removeClass('icon-volume-up').addClass('icon-volume-off');
	}
});

Now our UI will properly respond to the events from the Javascript player API. Try clicking on the poster frame in the example and you’ll see that the progress bar updates!

You’ll notice that we set the “max” value of our slider to the duration of the video that we get from the “ready” event. This helps us get nice, smooth, updates on our progress bar once every second, and it’ll make seeking that much easier as well.

Next, we set the “value” option for our slider to the current second value from the “progress” event from the API. This updates our progress bar position. We also toggle the class of our play / pause and volume on / off buttons based on the events from the API. Now it’s time to make our buttons and progress bar interact with the player:

$('.play-pause a').click(function(){
	if (!_playing) {
		videoPlayer.play();
	} else {
		videoPlayer.pause();
	}
});

$('.volume a').click(function(){
	if (_volume == 0) {
		_volume = 1;
	} else {
		_volume = 0;
	}
	videoPlayer.setVolume(_volume);

});

$('.fullscreen a').click(function(){
	var elem = $('.player')[0];
	if (!_fullscreen) {
		if (elem.requestFullscreen) {
			elem.requestFullscreen();
		} else if (elem.mozRequestFullScreen) {
			elem.mozRequestFullScreen();
		} else if (elem.webkitRequestFullscreen) {
			elem.webkitRequestFullscreen();
		}
		_fullscreen = true;
	} else {
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		}
		_fullscreen = false;
	}
});

As you can see above, we’ve bound the click event on play/pause button to tell our player object to play or pause the video based on the currently playback state stored in our _playing variable. Next up, we toggle the volume on and off based on the _volume state variable. Finally we handle entering and exiting fullscreen mode. Since there isn’t a universal method for doing this yet, we use feature detection to use the browser specific methods and keep track of the state in our _fullscreen state variable.

Lastly, we just need to allow dragging our progress bar to seek within the video:

$('.progress').slider({
	value: 0,
	orientation: "horizontal",
	range: "min",
	animate: true,
	slide: function(event, ui) {
		videoPlayer.seek(ui.value);
	}
});

To do that, we’ve just added a new slide parameter when initializing our slider. This function is called every time the user changes the value of the slider either by dragging or clicking on it. Since we set the maximum value of the slider to be the total duration of our video, each step of the slider represents one second. The ui.value parameter represents the newly selected value of the slider and that will be equivalent to the second in the video to which we’d like to seek. Therefore we can directly pass that video to the seek function of our player object to seek to that second in the video.

With that final step, we’re all done building our quick and dirty custom video player. After adding a few minor css touches, here is the final result.

While this is just a quick example, it should give you an idea of what’s possible. So, get out there and start building your own custom players! If you’ve built one you’re proud of, or if you have any questions about using the API, let us know in the comments below!

The post Quick and Dirty Custom Video Player Using jQuery UI appeared first on SproutVideo.

Easy Lead Capture: Introducing Email Gating

Adam Podolnick — Mon, 11 Feb 2013 05:00:00 +0000

Premium video content is a powerful and effective way to capture new leads for your business. We’re pleased to announce that we’ve added a new feature that makes it incredibly easy to collect email addresses with videos, no programming required.

Keeping reading for details on how to use this new feature, and tips to optimize it as well.

Using Lead Capture for Videos

With lead capture enabled for your videos, you can now require your viewers to enter their email address before they’re able to watch your video. This is a simple and straightforward way to grow your list with targeted prospects.

The message displayed on the email collection screen can be customized with just a few clicks:

The color used for the “Play” button is derived from your chosen player colors. Read this help article for more about creating customized video embed codes.

Leveraging Lead Capture

Any email addresses captured with your videos will be used to automatically tag leads in your video engagement metrics. You can easily see which of your leads are the most engaged, and get a sense of which ones will be most valuable.

You’ll also notice a “Download CSV” button at the top right of each video engagement metrics page. You can now export all email addresses captured by a given video. Exporting allows you to use this list of emails with any email or marketing platform of your choice, or for any other use you can imagine. The export will also include all of the engagement session details for each email address captured.

Emails can also be passed directly to a marketing platform integrated with SproutVideo. From there, you can launch an email marketing campaign based on the video they watched:

Viewer Tagging Options

In addition, we’ve added more ways automatically tag your viewers. If you already have their email address, you can alter the link to the page on which you’ve embedded your video. Or, add a custom parameter to the video embed code. Check out our help article about tagging viewers for more information on how to setup viewer tagging.

Ready to start testing lead capture with video? Open a free 14 day trial today and get started. If you have questions, our friendly support team is ready and waiting to help.

The post Easy Lead Capture: Introducing Email Gating appeared first on SproutVideo.

How To Make Your Videos Responsive

Adam Podolnick — Wed, 06 Feb 2013 05:00:00 +0000

Update: SproutVideo supports responsive video embed codes out-of-the-box. Now, you can ensure your videos will resize automatically without touching a line of code on the page.

If you’re in the process of building a responsive website or looking to add video to an already responsive website, here is a quick guide on how to make sure your videos resize as seamlessly as the rest of your site.

The Problem

Why do images resize fluidly and maintain their aspect ratio in responsive layouts, while videos using iframe or object embed codes do not? Since images have a defined width and height, browsers are able to calculate, and maintain, their aspect ratio when resizing them.

Iframe and object elements, on the other hand, have no native width and height that a browser can use to calculate an aspect ratio. This can lead to some frustrating behavior when embedding a video in a responsive layout.

The Solution: Intrinsic Aspect Ratios

The solution to this problem is to tell the browser what the proper aspect ratio should be for the video in the iframe or object element. This way, the browser will be able to maintain that aspect ratio when resizing the video in a responsive layout.

How it works

To set up this “intrinsic ratio” you simply need to create a box with the proper aspect ratio, place the embedded video in that box, and have it stretch to fit that box.

The padding-bottom css property is what allows us to define the aspect ratio for the box in which the video will be placed. By setting the padding-bottom property to a percentage of the width of the containing element, we are able to create an intrinsic aspect ratio for that box.

Once the aspect ratio is set up, we just need to set our video embed code to take up the full width and height of the box we just created.

An example


 class="videoWrapper">
	 class='sproutvideo-player' type='text/html' src='http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=sd' width='630' height='354' frameborder='0'>

See it in action (Try resizing the browser window!)

Explanation

In this example, the .videoWrapper sets the padding-bottom property to 56.25%. This sets up a 16:9 aspect ratio for that div (9/16 = 56.25%). Then, the SproutVideo iframe embed code is placed within this box and set up to take 100% of it’s width and 100% of it’s height.

Tips

You can use different padding-bottom percentages if your video has a different aspect ratio. Set it to 75% if the video is 4:3, for instance.
If you need some extra room for a player’s controls (like YouTube for instance), you can add a padding-top property to the .videoWrapper class. YouTube’s player chrome is 25px tall so the padding-top should be set to 25px.
If all of this is too much work, you can use a great jQuery plugin called FitVid.js to take care of automatically wrapping your videos in a responsive container with an intrinsic aspect ratio and adding the needed CSS. If you’re using FitVid.js with SproutVideo, make sure to add the following custom selector when initializing the plugin:

$("#thing-with-videos").fitVids({
    customSelector: "iframe[src*='videos.sproutvideo.com']"});

Are you using a SproutVideo video in a responsive layout? Leave us URL in the comments. We’d love to see it!

The post How To Make Your Videos Responsive appeared first on SproutVideo.

Video SEO and Video Sitemaps

Adam Podolnick — Thu, 24 Jan 2013 05:00:00 +0000

Video SEO is an important tool in any company’s arsenal when it comes to improving search rankings and click-through rates. So, how do you get your videos to show up in Google search results, and drive more organic traffic to your site?

Why Video SEO?

Video SEO is a key part of your larger SEO strategy. It’s not a silver bullet, and it’s not as simple as embedding a few videos and calling it a day.

However, when done correctly, video can encourage visitors to your site to spend more time on the page, and might make them more likely to take secondary actions like signing up for a trial or making a purchase.

How Video Sitemaps Can Help

A video sitemap helps search engines locate rich media content on your website. This helps them direct relevant traffic to the page.

Further, by formatting it correctly, you can ensure your video will appear as a rich snippet in search engine results pages.

Get Started With Video Sitemaps

With our new Video Sitemaps feature, we make the whole process pretty painless. Of course, you’ll need a SproutVideo account to do this.

We automatically create a video sitemap and submit it to Google and other search engines for you. All you need to do is make a one-time update to a single file on your website. Then, enter the URL of where your video is embedded on your site for each video you want in your sitemap. That’s it!

For more inspiration on getting video SEO right, read this article with seventeen video SEO tips and tricks.

We’re really excited to offer this new feature to help you with your video SEO efforts. We’d love to hear how it’s helped you! Let us know how you’re tackling Video SEO in the comments below.

The post Video SEO and Video Sitemaps appeared first on SproutVideo.

New Analytics API Calls and Updated Docs

Adam Podolnick — Wed, 09 Jan 2013 05:00:00 +0000

Image Credit: rawpixel.com (Freepik)

We’re pleased to announce that we’ve added the ability to retrieve all analytics and engagement data through the SproutVideo API. All you need is a SproutVideo account on a plan that has access to either analytics or engagement data and you’re all set.

Details on the New Analytics API Calls

With these new calls, you can retrieve data for your account or for a specific video. You can grab data for the entire time your account has been active, or drill down and get data for specific dates.

Just like the analytics tools we offer on our website, the following data is available through the API:

Play counts & Impressions.
Unique play counts & impressions.
The URL of the page where your videos were played.
Where, geographically, your videos were played.
Which playback method was used (Flash vs HTML5 Video).
What type of device was used (Desktop Computer, Mobile Device, TV, Game Console, etc…).
Overall engagement data for each video.
Engagement data for individual playback sessions.

We’ve also updated our API documentation to not only include these new API calls but to add more information about every single API call. Lastly, we’ve added these methods to our Ruby API client to support these new calls.

Let us know what you think! If you wind up using these new API calls, we’d love to hear about it. If you need help getting started with our API, please contact our support team.

The post New Analytics API Calls and Updated Docs appeared first on SproutVideo.

Add a MailChimp Signup Form to a Video

Adam Podolnick — Mon, 17 Dec 2012 05:00:00 +0000

Have you ever wanted to collect emails for a mailing list or newsletter after a video has finished playing? Well, with SproutVideo’s post-play options and MailChimp’s embeddable signup forms, it is very easy. Just follow these simple steps, and you will be collecting emails in no time.

SproutVideo and MailChimp

SproutVideo supports an integration with MailChimp (and other marketing platforms) for pre-play email capture on all our subscription plan levels. If you want to email-gate your video content, we make it simple and easy to do so.

This post is about using an email capture form as a post-play screen, meaning it will be displayed once your video concludes. Although this example is specific to MailChimp, you could use a similar approach to implement an HTML signup form from any marketing platform of your choice.

Generate a Signup Form From MailChimp

First, go to the mailing list for which you would like to collect emails. Then, select “Signup Forms” and the “Embedded Forms” option.

Next, copy the embed code for the signup form. We recommend using the “Super Slim” option since it fits nicely within most video players.

Implement Email Signup Form as a Post Play Screen

Now, go to SproutVideo and pick the video to which you would like to add the signup form. Click on the “Customizations” tab, and pick your desired type of video embed code.

Finally, follow these steps to add the Signup Form to the video:

Click the “Post-Play” button.
Enable the post-play screen by checking the “Use Post-Play Screen” check box.
Change the content type to HTML from Text by selecting the “HTML” radio button.
Paste the embed code you copied from MailChimp into the “Post-Play Message Content” box. Feel free to customize the HTML and CSS to get things looking just right.
Once you have everything looking exactly the way you like, click the “Save Settings” button.
Finally, copy your new customized video embed code and publish it wherever you’d like.

Now when you publish the new embed code, just like you would with any of our other embed codes, viewers will see the MailChimp signup form when the video has finished playing!

The post Add a MailChimp Signup Form to a Video appeared first on SproutVideo.

Announcing Video Engagement Analytics

Adam Podolnick — Mon, 26 Nov 2012 05:00:00 +0000

Image Credit: slidesgo (freepik.com)

With SproutVideo’s engagement metrics, you can now answer some fundamental questions about your videos. Are people watching the whole video or are they leaving before your call to action? Are there certain points in the video that people watch over and over? What other videos of mine has this viewer watched?

Starting today, you’ll be able to answer those questions and more using our video engagement analytics. With this new tool, you can not only see aggregate data for all views of a particular video but data for each individual play of your video as well.

All About Video Engagement Metrics

SproutVideo offers really robust high-level analytics that allow you to see where your viewers are located, how many impressions and plays your videos received, and where on the web your videos were watched. That data can be really useful. But, what if you want to understand your audience at the individual level?

That’s where video engagement metrics come in. For each of your videos, you can easily tell at a glance how engaging your content was. You can see if people skipped or rewatched specific parts of your video. You can also determine the browser, device, operating system, IP address, and physical location of each of your viewers.

Aggregate Video Engagement Metrics

The aggregate data makes it easy to determine how engaging your video is in general. You can also see where people drop off while watching the video, as well as how many people, after seeing your video, actually play it.

In the example above, you can see that the video was loaded on a page 855 times by 409 unique individuals. Of 855 times the video was loaded on the page, the video was played 196 times. This results in a play rate of 23%. Not too shabby!

The green graph indicates the average level of engagement for each second of the video. This is calculated by tracking data about each playback session for each second of the video. You can see that engagement declines somewhat throughout the course of the video, and drops off slightly towards the end.

Analyzing Individual Viewers

With the individual play engagement data, you can easily see which parts of the video were watched, skipped, or re-watched. You can also see where and when the play took place, as well as what device was used to watch the video. Lastly, you can see how many of your other videos the viewer has played.

The different colors in the heatmap indicate that parts of the video were watched more than once. In the above example, you can tell that the first viewer watched the first part of the video, colored in yellow, at least twice. They also rewatched another chunk, indicated by the color orange, three times. In comparison, the second viewer watched the whole video in its entirety. They did not rewatch any of it.

You can go even further and tag viewers with a name and email address so you can easily keep track of them. You can either manually tag viewers or have them be automatically tagged using our login protection feature or by passing in a parameter into the embed code. Please refer to this help article for more information about tagging and tracking individual viewers by email address.

We believe our new video engagement analytics will not only help you gain meaningful insight into how people are watching your videos. They also give you actionable data. You can use this new information to alter your videos to be more engaging.

If you’re interested in testing out the power of video engagement metrics for yourself, get started with a free trial of our platform today. Questions? Please ask us in the comments below, or contact our support team.

The post Announcing Video Engagement Analytics appeared first on SproutVideo.

New Feature: Subtitle Support

Adam Podolnick — Thu, 04 Oct 2012 04:00:00 +0000

New! SproutVideo now supports subtitles on all modern devices, browsers, and operating systems. This ensures that no matter how your audience is viewing your content, they’ll be able to understand it. Keep reading for details on how to add subtitles to your videos, and important reasons for doing so.

Why Use a Subtitle Track?

Subtitle tracks, also referred to as closed captions, are important to add to videos for several reasons.

The main reason is accessibility. Maybe a member of your audience is hearing impaired, or just wants to watch your video with the sound muted. Closed captions allow your audience to understand your content without sound.

This can have spillover effects. Because your audience doesn’t need to crank the volume or grab their headphones, they might stick around and watch more of your video. In this sense, subtitles can help drive engagement.

They can also help your viewers process what’s being said, and retain it. When you hear and read the same information simultaneously, it reinforces the memory of it by using multiple neural pathways in your brain. When it comes to making a lasting impression on viewers, closed captions can be a valuable tool.

How Subtitles Work on the SproutVideo Platform

Subtitles on the SproutVideo platform use the standard WebVTT format. Nearly all web browsers have adopted the WebVTT format for timed text support going forward.

Both our primary HTML5 video player and our fallback Flash player support closed captions. That means that even if a viewer is on an older browser or a mobile device, they will still work.

You can get pretty fancy with subtitles. For instance, you can add multiple language tracks if you have multilingual viewers, or a widespread audience in different countries. If you’re embedding your video, you can launch it with subtitles running automatically by using an embed code parameter. This is particularly handy for autoplaying videos, or videos that play without sound by default.

To read more about how to use subtitles for videos hosted on SproutVideo, read our help article about adding closed captions to your videos.

Questions? Please let us know in the comments below, or contact our friendly support team.

The post New Feature: Subtitle Support appeared first on SproutVideo.

Add Text, Links, Images, and HTML to the End of a Video

Adam Podolnick — Wed, 19 Sep 2012 04:00:00 +0000

Right when a video ends, a viewer is likely to be highly interested in the topic or product being showcased. So, what action do you want them to take?

The ability to sustain viewer interest after a video concludes is critical to driving traffic and conversions. Now, you can easily setup a post-play screen to display a custom message, link, or form after your video ends. Keep reading for tips on how to set one up for your videos today.

What is a Post Play Screen?

We’ve added yet another heavily requested feature which we’re releasing today. You can now add text, links, images or any HTML you’d like which will be displayed after your video finishes playing. Check it out:

This is incredibly useful for guiding your viewers’ actions after they finish watching one of your videos.

Ways to Use Post Play Screens

You can add a call to action with a link so that the viewer isn’t lost after the video finishes playing. Easily direct them to the landing page of your choice by using the text and URL fields provided.

You can also use this to collect information about your viewers. For example, you could embed a MailChimp mailing list subscription form by simply copy and pasting the form embed code for your list.

Since custom HTML is supported, the sky is really the limit!

How to Create a Post Play Screen

To get started with these new options, go to one of your videos and navigate to the Customizations tab.

From there, select the way you’d like to share your video. Are you using an inline embed code? A lightbox embed code? Our video websites? Either way, you can use post play screens since we support them for all our current sharing options.

Click the “Post Play” button to launch the post play screen settings. As you edit the options, the preview will update in real time. Be sure to check the box, “Use Post-Play Screen.”

Once you’ve got the screen looking the way you like, click “Save Settings,” copy the new embed code, and you’re good to go.

There are tons of great and creative ways to use our new post play screens. We’re excited to see how you use this awesome feature!

Any questions about getting started with customizable post play screens? Ask us in the comments below, or reach out to our support team.

The post Add Text, Links, Images, and HTML to the End of a Video appeared first on SproutVideo.