Scribd
Upload
625 views

Jwplayer API Examples

This document contains examples of using JavaScript to control a JW Player embedded on a webpage. It demonstrates how to: 1. Redirect the page when a video finishes playing 2. Add event listeners when using an external embedding script 3. Add playback controls like play, pause, mute, and unmute 4. Load different videos from a playlist by clicking links 5. Switch between video qualities and autoplay on change 6. Add chapter markers and highlight the current one 7. Simulate linear TV playback from a playlist 8. Resize the player size with a toggle 9. Open the player in a lightbox overlay

Uploaded by

George Deac
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
625 views

Jwplayer API Examples

This document contains examples of using JavaScript to control a JW Player embedded on a webpage. It demonstrates how to: 1. Redirect the page when a video finishes playing 2. Add event listeners when using an external embedding script 3. Add playback controls like play, pause, mute, and unmute 4. Load different videos from a playlist by clicking links 5. Switch between video qualities and autoplay on change 6. Add chapter markers and highlight the current one 7. Simulate linear TV playback from a playlist 8. Resize the player size with a toggle 9. Open the player in a lightbox overlay

Uploaded by

George Deac
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

API examples

This page contains a few cases of player - javascript interaction using the player embedder.

Redirecting on complete
When the video has completed, we redirect to a new page.
<div id="container">This'll be the player</div> <script type="text/javascript"> jwplayer("container").setup({ file:"video.mp4", height:400, width:600, events:{ onComplete: function() { window.location = "http://www.cnn.com"; } }, }); </script>

Using SWFObject
When using SWFObject (or another embed script), listeners cannot be set inline. Therefore, a user has to subscribe to the listeners:
<p id="container">Please install the Flash Plugin</p> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = { file:'/data/bbb.mp4',autostart:'true' }; var params = { allowfullscreen:'true', allowscriptaccess:'always' }; var attributes = { id:'container', name:'container' }; swfobject.embedSWF('player.swf','container','480','270','9.0.115','false',flashvars, params, attributes); jwplayer('container').onComplete(function() { window.location='http://www.cnn.com'; }); </script>

Controlling the player


We add javascript controls to play/pause and mute/unmute the player.
<p id="container">Please install the Flash Plugin</p> <script type="text/javascript"> jwplayer("container").setup({ file:"video.mp4", height:400, width:600 }); </script> <ul> <li><a <li><a <li><a <li><a </ul> href="#" href="#" href="#" href="#" onclick="jwplayer().play()">play</a></li> onclick="jwplayer().pause()">pause</a></li> onclick="jwplayer().setMute(true)">mute</a></li> onclick="jwplayer().setMute(false)">unmute</a></li>

printing a playlist
We print the playlist in HTML. When an item is clicked, it is loaded in the player and autostarted.
<script type="text/javascript"> jwplayer("container").setup({ file:"video.mp4", height:400, width:600 }); </script> <ul> <li><a href="#" onclick="jwplayer().load('video.mp4')">play video.mp4</a></li> <li><a href="#" onclick="jwplayer().load('bbb.mp4')">play bbb.mp4</a></li> <li><a href="#" onclick="jwplayer().load('ed.mp4')">play ed.mp4</a></li> </ul>

See the code currently needed.

HD switch
Technically, this is similar to the playlist printing. Having a separate example will be useful though. Note that we play the video automatically upon switching:
<script type="text/javascript"> jwplayer("container").setup({ file:"video.mp4", height:400, width:600, events: { onPlaylist: function() { this.play(); } } }); </script>

<ul> <li><a href="#" onclick="jwplayer().load('video_320p.mp4')">Play in 320p quality</a></li> <li><a href="#" onclick="jwplayer().load('video_480p.mp4')">Play in SD quality</a></li> <li><a href="#" onclick="jwplayer().load('video_720p.mp4')">Play in HD quality</a></li> </ul>

See the code currently needed.

Adding chapter markers


We print a list of chapter markers on the page, to allow for easy navigation in a larger file.
<script type="text/javascript"> jwplayer("container").setup({ file:"ed.mp4", height:400, width:600 }); </script> <ul> <li><a href="#" onclick="jwplayer().seek(54)">Chapter 1</a></li> <li><a href="#" onclick="jwplayer().load(224)">Chapter 2</a></li> <li><a href="#" onclick="jwplayer().load(549)">Chapter 3</a></li> </ul>

Note that this code implies a seek() should start playing a video at the offset if the player is idle. This is ticketed for the 5.2 player.

Chapter markers with event callback


With a little more info and the onPosition() callback, it's possible to also highlight the current chapter:
<script type="text/javascript"> var positions = [54,224,549]; var current; jwplayer("container").setup({ events: { onPosition: function(data) { for (var i=0; i<positions.length; i++) { if(data.position < positions[i]) { if (i-1 != current) { document.getElementById("sec"+current).removeClass('selected'); current = i-1; document.getElementById("sec"+current).addClass('selected'); } break; } } } }, file:"ed.mp4", height:400, width:600 }); </script> <ul> <li id="sec54"><a href="#" onclick="jwplayer().seek(54)">Chapter 1</a></li> <li id="sec224"><a href="#" onclick="jwplayer().load(224)">Chapter 2</a></li> <liid="sec549"><a href="#" onclick="jwplayer().load(549)">Chapter 3</a></li> </ul>

Mimicking lineair tv
Instead of on-demand, we start the playlist in the player based upon the local time (like oldteevee).
<script type="text/javascript"> jwplayer("container").setup({ playlistfile:"playlist.rss", height:400, width:600 }); var seconds = new Date().getMinutes()*60 + new Date().getSeconds()*60; var offset = 0; var list = jwplayer().getPlaylist(); for(var i=0; i<list.length; i++) { if(offset + list[i].duration > seconds) { jwplayer().setItem(i); jwplayer().seek(offset); break; } else { offset += list[i].duration; } } </script>

Resizing the player


Youtube has a player resize toggle on its site, which allows visitors to extend the player across the entire width of the site:
<script type="text/javascript"> jwplayer("container").setup({ playlistfile:"playlist.rss", height:400, width:600 }); function resizePlayer() { if(jwplayer().getWidth() == 720) { jwplayer().resize(480,270); } else { jwplayer().resize(720,400);

} }; </script> <a href="#" onclick="resizePlayer()">Toggle player size</a>

Using the addDockButton feature (1.1?), the button for doing this can even be added to the player itself.

Player in a lightbox
Here's a simple example of the player in a lightbox, using the jQuery Tools library:
<a href="#" id="button">Show overlay</a> <div class="overlay" id="container"></div> <script type="text/javascript"> $(function() { $('#button").overlay( { effect: 'apple', onLoad: function() { jwplayer("container").setup({ playlistfile:"playlist.rss", height:400, width:600 }); }, onClose: function() { jwplayer("container").remove(); }); }); </script>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy