« Back

Adding a video player to a page

We don't yet have a portlet to allow a simple drag-and-drop of a video player widget in the site, but a player can be embedded fairly simply with a small amount of HTML knowledge.

  1. Access the section source for editing
  2. Locate the point in the HTML where you want to add the player
  3. Paste in the player embed code
  4. Edit the embed code to point at the content you want to display

Access the section source for editing #

Sign in to the site and find the page where you want to embed the player.

Find the section within the page where you'd like the player to appear. Three little icons should appear when you hover over this:

Click on the one to the left to edit the section.

Once the edit widget loads up fully, click on the "Source" button at the bottom of the toolbar to edit the HTML directly:

If your HTML isn't that hot and you're not 100% sure where to add any new stuff, then it might be simpler to put a placeholder into the WYSIWYG editor (before clicking the "Source" button) that you can then find in the HTML:

Locate the point in the HTML where you want to add the player #

This is where some HTML knowledge is useful.

Find the point in the section HTML where you'd like the player to appear:

Paste in the player embed code #

The embed code is slightly different, depending on whether you want to show a player for a single movie or for a playlist. Simpler forms of these will be available shortly.

Paste this code into the desired location in the section:

Single movie, no playlist #

<div id="{unique name}">{description}</div>
<script type="text/javascript">
    jwplayer("{unique name}").setup({
        flashplayer: "/html/jwplayer/player.swf",
        file: "{movie URL}",
        height: {height},
        width: {width},
        volume: 80,
        skin: "/html/jwplayer/skins/bekle.zip"
    });
</script>

Playlist #

<div id="{unique name}">{description}</div>
<script type="text/javascript">
    jwplayer("{unique name}").setup({
        flashplayer: "/html/jwplayer/player.swf",
        height: {height},
        width: {width},
        volume: 80,
        playlistfile: "http://visionon.tv/wsrp-portlet/proxy/?url={playlist URL}",
	playlist: "right",
        playlistsize: 300,
        skin: "/html/jwplayer/skins/bekle.zip"
    });
</script>

Edit the embed code to point at the content you want to display #

There are a few placeholders in the embed code above:

  • {unique name} - the player should have a unique name within the page (i.e. 2 players on the same page should not have the same name) - no spaces or quotes
  • {description} - what will be displayed when the player is loaded or won't load. Can be blank
  • {movie URL} - where the video file can be found (for standalone movies with no playlist)
  • {playlist URL} - where to find the playlist (for playlisted video players)
  • {height} - height in pixels - normal default is XXX
  • {width} - width in pixels - normal default is XXX

Replace these placeholders with your own values, e.g.:

<div id="bongo_player">Bongo playlist player</div>
<script type="text/javascript">
    jwplayer("bongo_player").setup({
        flashplayer: "/html/jwplayer/player.swf",
        height: 320,
        width: 680,
        volume: 80,
        playlistfile: "http://visionon.tv/wsrp-portlet/proxy/?url=bongo.com/playlist.xml",
	playlist: "right",
        playlistsize: 300,
        skin: "/html/jwplayer/skins/bekle.zip"
    });
</script>

Finally, click either "Publish" or "Save as draft" as normal, and the player is embedded.

5 Attachments
15606 Views
Average (2 Votes)
The average rating is 5.0 stars out of 5.
Comments