| 1 | <!doctype html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Getting Started</title> |
|---|
| 5 | <style> |
|---|
| 6 | body { padding: 50px 100px; width: 700px; font: 13px/20px Arial; background: #FFF; } |
|---|
| 7 | a, h1, h2 { color: #369; } |
|---|
| 8 | h1 { font-size: 32px; } |
|---|
| 9 | h2 { margin-top: 50px; } |
|---|
| 10 | h3 { margin-top: 25px; } |
|---|
| 11 | img { display: block; box-shadow: 0 0 5px #999; margin: 0 10px; } |
|---|
| 12 | pre { font-size: 12px; background: #E5F3C8; padding:5px 10px; border: 1px solid #D3EAA4; } |
|---|
| 13 | dd { color: #333; font-style: italic; } |
|---|
| 14 | table { width: 100%; border-collapse: collapse; margin: 20px 0; } |
|---|
| 15 | tr { border-bottom: 1px solid #CCC; } |
|---|
| 16 | tr:nth-child(even) { background: #EEE; } |
|---|
| 17 | td,th { padding: 5px; font-size: 12px; text-align: left; } |
|---|
| 18 | |
|---|
| 19 | </style> |
|---|
| 20 | </head><body> |
|---|
| 21 | |
|---|
| 22 | <h1>Getting Started</h1> |
|---|
| 23 | |
|---|
| 24 | <p>Getting JW Player up and running is now easier than ever. Only a few lines of HTML code is needed to embed a video that works on any desktop, tablet and phone. Since the player is now CDN hosted, you don't even have to upload the player to your server anymore.</p> |
|---|
| 25 | |
|---|
| 26 | |
|---|
| 27 | |
|---|
| 28 | <h2>Uploading the Video</h2> |
|---|
| 29 | |
|---|
| 30 | <p>In order to embed the player, you first need a video file uploaded to your server. Ensure it is in the MP4 format, since that can be played on any browser and device (including iPad, iPhone and Android).</p> |
|---|
| 31 | |
|---|
| 32 | <ul> |
|---|
| 33 | <li>If your video is not in the MP4 format, you can convert it using a free tool like Handbrake. See our <a href="">Video Encoding guide</a> for more info.</li> |
|---|
| 34 | <li>If you have no video at hand, feel free to use <a href="http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4">this short clip</a> for your testing.</li> |
|---|
| 35 | <li>If you have no web server for uploading videos, check out <a href="http://www.longtailvideo.com/bits-on-the-run/">our video platform</a>. It offers you a free GB of storage, plus it automatically converts your video to MP4.</li> |
|---|
| 36 | </ul> |
|---|
| 37 | |
|---|
| 38 | <p>Additionally, you should upload a poster image to your server. This image (in JPG format) is displayed before the video starts. An interesting frame from the video usually works well to draw attention and entices users to click <em>play</em>. <a href="http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg">Here is an image</a> for our short test clip.</p> |
|---|
| 39 | |
|---|
| 40 | |
|---|
| 41 | |
|---|
| 42 | <h2>Embedding the Player</h2> |
|---|
| 43 | |
|---|
| 44 | <p>Since JW Player is hosted on our content delivery network (CDN), there is no need to install and upload the player itself to your site. Therefore, embedding the JW Player is a simple, 3-step process. Open your web page in an HTML editor and:</p> |
|---|
| 45 | |
|---|
| 46 | <ol> |
|---|
| 47 | <li>Insert the JW Player script from our CDN into the head of your page: |
|---|
| 48 | <pre><script type="text/javascript" src="http://jwpcdn.com/player.js" ></script></pre> |
|---|
| 49 | </li> |
|---|
| 50 | <li>Insert a <div> element with a unique <em>id</em> at the location you want the player to appear: |
|---|
| 51 | <pre><div id="container">Loading the player ...</div></pre> |
|---|
| 52 | </li> |
|---|
| 53 | <li>Insert a script that invokes the JW Player <em>setup()</em> call on your <div>:</li> |
|---|
| 54 | <pre><script type="text/javascript"> |
|---|
| 55 | jwplayer("container").setup({ |
|---|
| 56 | file: "/uploads/example.mp4", |
|---|
| 57 | height: 270, |
|---|
| 58 | image: "/uploads/example.jpg", |
|---|
| 59 | width: 480 |
|---|
| 60 | }); |
|---|
| 61 | </script></pre></li> |
|---|
| 62 | </ol> |
|---|
| 63 | |
|---|
| 64 | <p>In the setup() block, <em>file</em> and <em>image</em> should be the URLs to your video file and poster images. Their paths should be relative to the HTML page (just like when embedding an image using <img>). The <em>height</em> and <em>width</em> are used to set the dimensions of the player. Feel free to change these to values that make the player nicely fit your page.</p> |
|---|
| 65 | |
|---|
| 66 | |
|---|
| 67 | |
|---|
| 68 | <h2>Next Steps</h2> |
|---|
| 69 | |
|---|
| 70 | <p>That's it! With a few lines of code, you embedded a video that can be watched on any desktop browser, tablet or mobile phone. <a href="">Here's a working example</a>. We also have basic examples for <a href="">embedding an MP3 file</a> and <a href="">embedding a YouTube stream</a>.</p> |
|---|
| 71 | |
|---|
| 72 | <p>JW Player supports many options for enhancing and tuning your audio or video embeds. Here are a few interesting guides to look into next:</p> |
|---|
| 73 | |
|---|
| 74 | <ul> |
|---|
| 75 | <li><a href="">Supported Browsers & Media</a> lists all supported desktop and mobile browsers, as well as supported media formats.</li> |
|---|
| 76 | <li><a href="">Embedding JW Player</a> lists all options for modifying the player's layout and behavior.</li> |
|---|
| 77 | <li><a href="">Skinning JW Player</a> explains how to change the player's design.</li> |
|---|
| 78 | <li><a href="">JavaScript API Overview</a> explains how to use the JavaScript API for rich player-page interaction.</li> |
|---|
| 79 | </ul> |
|---|
| 80 | |
|---|
| 81 | |
|---|
| 82 | </body> |
|---|
| 83 | </html> |
|---|
