jw player 5.7最新版

JW Player Quick Start Guide

Getting Started

Embedding the JW Player on your website is a simple, 3-step process:

1. Upload the jwplayer.js and player.swf files from the download ZIP to your server. All other files in the

download (documentation, source code, etc) are optional.

2. Include the jwplayer.js somewhere in the head of your webpage:

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

3. Call the player setup somewhere in the body of your website. Here's a basic example:

height: 270,

width: 480

});

</script>

When the page is loading, the JW Player is automatically instantiated on top of the <div>. By default, the player is

rendered in Flash. If Flash is not supported (e.g. on an iPad), the player is rendered in HTML5.

The flashplayer option (to tell the JavaScript where the SWF resides) is just one of many configuration

options available for configuring the JW Player.

width="480">

</video>

<script type="text/javascript">

jwplayer("container").setup({

flashplayer: "/jwplayer/player.swf"

});

</script>

In this case, the JW Player is actually inspecting <video> tag and loading its attributes as configuration options. It's a

useful shortcut for setting up a basic player.

That's it! As long as you have everything in the right place, all <video> tags on your page whose class is jwplayer will

be replaced on your page by the JW Player.

Setup Syntax

Let's take a closer look at the syntax of the setup() call. It has the following structure:

jwplayer(container).setup({options});

In this block, the container is the DOM element(<video> or <div>, <p>, etc.) you want to load the JW Player into. If

the element is a<video> tag, the attributes of that tag (e.g. the width and src) are loaded into the player.

The options are the list of configuration options for the player. The configuration options guide contains the full

overview. Here's an example with several of options:

file: "/videos/video.mp4",

duration: 57,

flashplayer: "/jwplayer/player.swf",

volume: 80,

width: 720

});

</script>

Though generally a flat list, there are a couple of options that can be inserted as structured blocks inside the setup

method. Each of these blocks allow for quick but powerful setups:

 playlist: allows inline setup of a full playlist, including metadata.

Skins

The JW Player has a wide variety of skins that can be used to modify the look and feel of the player. They can be

downloaded from our AddOns Library.

To embed a JW Player 5 skin, simply place the ZIP file on your web server and add the skin property to your embed

code:

<script type="text/javascript">

jwplayer("container").setup({

flashplayer: "/jwplayer/player.swf",

file: "/uploads/video.mp4",

the additional step of unzipping the skin ZIP and uploading its contents to your web server in the same location as the

ZIP file itself. Your skin's folder structure would look something like this:

/skins/modieus/modieus.zip

/skins/modieus/modieus.xml

/skins/modieus/controlbar/

/skins/modieus/playlist/

etc.

Playlists

In previous Flash-only versions of the JW Player, loading a playlist in the JW Player was only available by using

an XML playlist format like RSS or ATOM. With the JW Embedder, it is possible to load a full playlist into the player

<script type="text/javascript">

jwplayer("container").setup({

flashplayer: "/jwplayer/player.swf",

playlist: [

{ duration: 32, file: "/uploads/video.mp4", image:

"/uploads/video.jpg" },

{ duration: 124, file: "/uploads/bbb.mp4", image:

"/uploads/bbb.jpg" },

{ duration: 542, file: "/uploads/ed.mp4", image:

"/uploads/ed.jpg" }

</script>

Note: The playlist.position and playlist.size options control the visible playlist inside the Flash player. To date, the

HTML5 player doesn't support a visible playlist yet (though it can manage a playlist of videos).

A playlist can contain 1 to many videos. For each entry, the following properties are supported:

 file: (required, unless you have levels, see below). The location of the media. If this property is not set,

the playlist item will be skipped.

 image: location of the poster image, displayed before the video starts, after it finishes, and as part of the

graphical playlist.