Archive for Streamable

Streamable Introduces Brand New Extension

We here at TechGraphs are pretty big fans of Streamable — one of the latest, and in my opinion best ways of sharing media clips, and they’ve just given us a reason to like them even more. Yesterday the company unrolled a new feature for Google Chrome users, an extension that allows users to clip video (and audio if so desired) directly from YouTube as well as Twitch.tv, and a number of smaller sites.

Being able to grab media files directly from Twitch.tv via a Chrome extension isn’t a particularly new option as Oddshot.tv has specialized in that area for months now, however support for web sites other than the esports-streaming site is a welcome sight. Unfortunately traditional sports sites haven’t caught on just yet — which should not surprise — however I’m looking forward to being able to grab a plate appearance or pitch sequence, or perhaps an incredible soccer cross and goal in near real-time.

The maximum length of the clip is 60 seconds, which is mostly enough time to capture whatever in-game moment you’re attempting to save. For the walk-through, I’ve grabbed a clip of my beloved A’s winning their 20th consecutive game, courtesy of MLB’s YouTube Channel. Before getting too far of ourselves, make sure to install the extension. It’s available for free at the Chrome Web Store and can be found by clicking here.

Once you’ve got it installed, make sure to see the Streamable icon/the infinity symbol. It will pop up on any page that is compatible with the extension, in this case the MLB channel.

streamable2

Now, after finding the clip you want — say, the glory days of seasons past — simply click on the Streamable icon and you’ll open a new page, specifically the editing page for Streamable.

streamable3

The extension allows users to re-name the clip (YouTube vids retain their name, but you can change it), crop, adjust the speed (as slow as x.50 or s fast as x2 with .25 increments) and to nail down a specific clip to one-tenth of a second of accuracy.

Note the picture below, at first glance it seems like I’m just ripping the clip, but I’ve cropped the black bars out of the original YouTube video and I’ve typed in exactly where in the video I want the clip to begin and end.

streamable4

Once the clip is finished, you’re given the direct URL or you can use an HTML embed code to share. Within the embed code options you can mute the clip, something I prefer doing because loud (not to mention auto-playing) clips are pretty terrible if you’re not expecting it. Don’t worry, muting the clip within the embed code doesn’t lose the audio. It’s just like a Vine or Instagram video where you can tap the speaker icon for the sound and full experience.

Armed with the perfect clip of the video, observe the final product:

Grab the extension and play around with it. You’ll be sharing priceless moments in non-terrible formats in no time.


How to Create a Great GIF (By Not Actually Doing So)

Facebook recently made headlines by announcing that they would start supporting the embedding of animated version of the Graphics Interchange Format, more widely known as the GIF. This was a big deal, apparently, because people still care about GIFs. But they shouldn’t — at least not in a way specific to the actual file format.

To me, the GIF has become something bigger than itself. Its name has become ubiquitous with the idea of a short video clip that people find entertaining. Just like how we refer to all facial tissues as Kleenex or all large trash bins as Dumpsters (yes, it’s a registered trademark), a GIF doesn’t really need to be a .gif file per se, it just needs to be a short and shareable video. The problem is, the actual GIF format is pretty outdated and inefficient when it comes to embedding video clips. It’s a dinosaur. It’s Windows 95. We don’t need it anymore. We can make GIFs better. We have the technology.

Back in the day, the main pull of the GIF format was that it was supported on all browsers (e.g. Internet Explorer and Netscape Navigator). You didn’t need any special plugins or software to see a GIF on a web page because it was an image file, like a .PNG or .JPG. GIFs were special in that one could layer multiple images on top of one another to create an animation effect. As expected, this still lead to large files and long load times for web pages. But it’s all we had.

(Not so) long ago, creating GIFs was a pretty big pain. You had to finagle some software to record the video from your screen, then split up the video into frames with a program like Photoshop or GIMP. The results were rarely the same, and there was usually some sort of stuttering or ghosting or another weird issue that made the thing look off a bit. They were usable, but not always pretty.

Today, Flash is pretty much dead and every major browser supports the most common video codecs. HTML5 ushered in a new way to display video — a way that was baked in to the HTML standard. Long story short — if your computer (or mobile device) has any kind of modern browser installed, it can support HTML5 video. It’s leaner and loads quicker, and we all should be adopting it.

We here at TechGraphs have gotten requests to give a how-to on creating GIFs. But I’m not going to do that. Because, as Managing Editor, I’m making a statement on behalf of the site. We’ve pussyfooted around the issue before, but we’re making a stand. The GIF is dead. It’s time to put in on an ice flow floe and let it float on into the Great Beyond. It’s been supplanted by younger and stronger technology. No, I will not be showing you how to create a GIF. I will be showing you how to create short video clips that are easily shareable on Facebook, Twitter, your Tumblr page or your blog. We’ll be utilizing two different sites for this tutorial — Gfycat and something we’ve featured here before, Streamable.

To create these videos, we’ll first need, well, some video. There are a couple ways to go about this. Both Streamable and Gfycat allow you to simply input the URL of your video and let them do the converting. However, Gfycat only allows 15 seconds worth of upload. Streamable does allow larger uploads and the ability to trim time off, but long videos still lead to long upload and conversion times. It’s probably best to get the video on your computer and work with it from there. To do so, I’ve had good success with a Chrome Extension called Video Downloader Professional. This extension will search the code of the page you are on and will find the source file for any video used in that page. You just click the little green arrow next to your address bar and it will give you the option to download the video. A couple notes: you may have to start playing the video for the extension to pick it up. Also, if the video has an ad, it might show up in the list of available downloads. Just make sure you are grabbing the right video. The file sizes are displayed on this list. You almost always want the longer one.

So, let’s say I want to make a clip of Joey Gallo’s first career home run from last night. (I’m using an MLB clip here, but this will work in many sites, including YouTube). I use the extension to download the video into my Downloads folder. Now, it’s fairly long, so I probably should edit it down a little. How you do this depends on your OS. If you have a Mac, you can use the built-in Quicktime Player to quickly trim down a video. Windows users can download the free Windows Movie Maker and use that to edit the clip. Read the tutorials and get comfortable with the software. You’re not re-making Jaws here. You’re just cutting a single video clip. Remember, Gfycat only allows 15-second clips, so edit accordingly if you’re planning to use that service. Once the clip is edited, save it somewhere. It is now time to upload.

Uploading to Gfycat

Go to Gfycat and click the Upload button in the upper right. Click Browse and find the video on your computer. It will begin uploading and converting.

gfycat1

Click the newly-created link to go the clip page. Here, when you move your mouse to the right, you’ll see a couple buttons. One is to create an actual .gif file (IF YOU MUST), and the other is to grab links.

gfycat2

You can get a straight link, and some code to embed the clip in a webpage. Like this! You can tweak that embed link a little to change the height and width of the clip if your blog has certain size constraints. This creates your standard GIF-looking clip. This is good enough for most applications, but what if you want more an actual video experience? What if you want a little longer clip? What if you want sound? Sure you could use your phone to take a Vine of your computer screen, but we’re better than that. Let’s use Streamable to create a quality clip that’s still shareable.

Uploading to Streamable

Go to Streamable and click the Upload button right in the middle. Again, find your video and Streamable will start uploading and converting. streamable1 Much like Gfycat, you get options to add a title and share the link.

streamable2

If you click Share, you again get options to copy a regular link or an embed code. Streamable offers some options to change the height and width of the video as well as enabling autoplay and muting. Clicking both will give you a GIF-like experience, but leaving them off will make it feel more like a video. The choice is yours, but it’s certainly nice to have the choice.

These clips will load faster and won’t bog down the browser. They won’t take up space on your servers. They aren’t quite GIFs, but that’s OK. They’re better. You can have the best of both worlds. Short, shareable clips will be around for a long time, but not in the aging format we’ve been using. You now have the knowlege. The tools are free and easy to use. Be a part of the future.

(Header image via Eric Norris)

Streamable Has a Simple and Quality Clip Maker

My love of GIFs stemmed from the early reaction shot days, but has since morphed into a variety of topics ranging from bat flips to goals, to, okay, still some reaction shots. The GIF is being phased out across the board as HTML5 and GIFV services are better equipped to handle a longer clip in higher quality, and recently the site Streamable has been popping up on my radar. As an inquisitive nerd, I dove right in.

Right off the bat you’re given the option upload from your computer or via URL. According to Streamable, the clips utilize HTML5, or in the rare case where that is unavailable, Flash. You’re not forced to create an account to view a clip or even to upload one, though in order to browse your own uploads it is encouraged to make a free account.

Unfortunately at this time there is no search or index option for other clips, so if you come across something you really like, you’ll need to favorite it. Say, maybe a clip of Leo Messi stealing Jerome Boateng’s soul, then chipping Manuel Neuer in the opening leg of the UEFA semi-finals.

(Editor’s note: Some Ad-Blocking extensions seem to block these embeds. If you see nothing, disable ad blocking.)

Where Gfycat doesn’t have a size limit, Imgur limits animated uploads to 200 MB. Streamable also has a limit, but it’s a 2 GB and 10 minute clip, which at 10 minutes, is longer than an average trailer and some short movies.

The interface is concise and uncluttered. If you choose to parse down a YouTube clip of a go-ahead shot from Game 7 of an NBA playoff series, it’s very easy. Once you have the URL, simply click “Paste from URL” and allow the clip to upload. As soon as it is in the Streamable editing system, feel free to trim it down from either side as the picture below shows.

streamable

After settling on the desired starting and ending points, click create clip and voila, you’re all set.

Streamable offers a fast and simple service and if you’re looking for a GIF-type clip but with sound — it’s the best option short of a full YouTube upload. While I’d certainly love to see a searchable index of clips like Imgur and Gfycat offer, I’ve already began to use Streamable as my go-to option for highlights, even if the highlight is against my favorite baseball team: