Blog Archives: May 2012
Using the Browsers' New HTML5 Fullscreen Capabilities
by Pablo Schklowsky on 2012-05-24 10:25
One of the killer features for HTML5 video is native browser fullscreen support. Without it, a viewer watching video through HTML5 is limited to seeing the video within the browser window, which is clearly not an immersive experience. In our latest State of HTML5 Video report, we reported that 50% of the browsers people are using now support fullscreen features natively. Some sites you probably currently use (Facebook, for one, in their image galleries) are already using the native browser fullscreen APIs. Here at LongTail, we are bringing this functionality into the next version of the JW Player, but in the meantime, I'll walk you through the new feature, and show you how easy it is to implement.
Note: This article is aimed at website developers who are comfortable editing HTML and CSS, and a little bit of JavaScript
What is Native Fullscreen Anyway?
Native fullscreen means that the browser uses your entire monitor to display content. This means that no other windows are visible, and the browser's menu, tabs, and other elements go away. Compare these two screenshots:
Step 0: Use a Fullscreen Enabled Browser
None of this new functionality will work if your browser doesn't support it. Currently only Google Chrome version 15+, Firefox 10+ and Safari 5.1+ support fullscreen mode. Make sure you have the latest versions of those browsers for these examples to work!
Upcoming versions of the major browsers will all include fullsceen support in some form. Internet Explorer 10 (currently in beta) will provide support, and Opera (who were involved in writing the fullscreen draft spec) are likely not far behind.
Step 1: Decide What to Fullscreen
First, you'll need to create a bit of HTML, and decide what element to blow up to fullscreen when the time comes. Here's a little bit of code containing an image which we'll eventually take to full-screen.
<div class="example"> <img class="video_player" src="image.jpg"></img> <button>Click Me To Go Fullscreen! (not yet)</button> </div>
Step 2: Tell the Browser To Go Fullscreen
You'll notice that in the above code, our fullscreen button doesn't do anything yet. We'll need to write some JavaScript which will take the image into fullscreen mode. I'll explain what everything does in the code itself.
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
Step 3: Resize Your Elements
You may have noticed on some browsers (Opera and Chrome) that when you clicked on the fullscreen button that the video player was centered in the middle of a big black screen. That's because by default, fullscreen mode doesn't resize your elements for you. Luckily, there's a simple bit of CSS which will allow you to specify how you want your elements to appear in fullscreen mode. It's called something different in each browser, but in Chrome, it's a CSS pseudo-class called :-webkit-full-screen. In Firefox, it's called :-moz-full-screen. We want our player example to strech all the way across the screen, so that's what we'll do.
<style type="text/css">
.player:-webkit-full-screen {
width: 100%;
height: 100%;
}
.player:-moz-full-screen {
width: 100%;
height: 100%;
}
</style>
<img class="video_player" src="image.jpg" id="player3"></img>
<button onclick="goFullscreen('player');">Click Me To Go Fullscreen! (All the way)</button>
Fullsceen and <iframe> - a technical note
While you can take pretty much any element and take it to fullscreen mode, <iframe> elements are a bit trickier. You'll need to set the "allowFullScreen" property on the tag itself, which allows the contents to be taken into fullscreen mode.
<iframe src="iframe_src.html" width="400" height="300" allowFullScreen></iframe>
Where Do We Go From Here?
You can make all sorts of changes to your fullscreen elements once you're in fullscreen mode, either using CSS or using some more in-depth JavaScript code. For example, if you had a text overlay that you wanted to make visile in fullscreen mode, you could show it using the -full-screen CSS pseudo class (remember, you need to replicate this property for each browser). The rest is up to your imagination!
How to Stream Live Video From Your iPhone to the JW Player
by Pablo Schklowsky on 2012-05-03 18:26
A few people have asked us if they can stream live video from their iPhones directly to the JW Player. If you're willing to install and configure a few applications, the answer is yes! This guide will provide step-by-step instructions on how to do it.
This tutorial is broken up into three steps:
Step 1: Set up Your Streaming Server
First, you'll need to download and install Wowza Media Server. They have a free 30-day trial available. Once you've installed Wowza, you'll need to configure your Wowza server, by editing files in the install directory. This is different for each platform, but you should be able to easily find where Wowza has installed its files.
- Find the applications folder in the Wowza installation folder. By default, there will be nothing there except for a folder called vod. Create a new folder for your live streaming application. We'll call it livu.
- Next, open up the conf folder and create another folder called livu. Then copy the Application.xml file from the conf folder to the livu folder.
- Now open up the Application.xml file. Find the <StreamType> property and change it from default to live.
- Still in Application.xml, find the <PublishMethod> property and change it from digest to none. This will turn off authentication for live stream publishing, so you should only do this for testing purposes.
- Back in the conf folder, open up the file called VHost.xml. You'll need to copy and paste the entire <HostPort> section, so that we can set up the port for our live stream ingestion (RTSP). In the new <HostPort>, edit the <Port> property to read 554.
Note: On Mac OS X, you'll need to set this value to a number higher than 1024. This is because ports below 1024 must be opened by processes with admin privileges. For example, to avoid trouble, set the <Port> value to 5544. - Now, simply start up your Wowza Media Server. If this is your first time running Wowza, you'll be prompted to enter in your trial license number. When it's started up, make sure your RTSP port (554 or 5544) was successfully enabled.
Step 2: Set up Your iPhone to Stream to Wowza
Now that you've got your streaming server set up, it's time to set up your iPhone to stream live video. We're going to use a $2.99 app called Livu, which is specifically designed to work with Wowza Media Server. Grab it by searching for "Livu" in iTunes, or by clicking here. Once you've downloaded the app, here's how to configure it:
- Open up the configuration menu, and in the Host field, enter the IP address for the computer hosting your Wowza Media Server instance.
- Under App, enter /livu/iphone. If you named your live streaming application something different in your Wowza setup, use that name here instead of livu.
- Under Port, enter the port your configured for RTSP ingestion in step 6 of the Wowza setup.
- If you disabled authentication in step 4, you can leave the User Name and Password fields blank.
- Once everything's configured, press the Save button.
- The Livu app should now activate your iPhone's camera. Click the icon in the top left to start streaming.
- If you've configured everything properly, a message will display saying "Stream Started." You're now broadcasting!
Step 3: Set up the JW Player to Play the Stream
If you've made it this far, the hard part is over. Now all that's left is to configure the JW Player to play your live stream. Here's the embed code you'll need to set up your player:
<div id="player"></div>
<script type="text/javascript">
jwplayer('player').setup({
streamer: "rtmp://192.168.0.160/livu", // Replace this with your own IP address
file: "iphone"
});
</script>
That's all there is to it. If you've set everything up correctly, the player will display the live video stream from your iPhone!
Follow us on Twitter: 