Skip to content

Latest commit

 

History

History
87 lines (65 loc) · 5.01 KB

README.md

File metadata and controls

87 lines (65 loc) · 5.01 KB
Raw

FORKED FROM https://github.com/emaxsaun Thanks!!

Updated to support jwplayer 8, removed references to jwplayer 7 and IE.

You will need to reference your own jw8 library and provide the appropriate key.

We are using this code in a production environment now and appears to be stable.

With time, I will update this README more later.

JW Box - A JW Player LightBox

JW Box is a small JavaScript LightBox for the JW Player. It is responsive, and works in Flash and HTML5 environments.

Demo

Implementation:

First, the file jwbox.js needs to be loaded in the page's <head>, like so:

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

Then, the LightBox needs to be loaded when the page loads, like so:

<body onload="setupPlayer();">

It can also be loaded like this, if you prefer:

<script>
	window.onload = setupPlayer();
</script>

Then, for each link, or graphic, that you want a lightbox to appear when clicked on, you need to add the a call to a function called playVideo(), onclick:

onclick="playVideo('sample_video.mp4','sample_image.jpg'); return false;"

You just need to put in the video you want to play, and the poster image you want to use. If you do not have a poster image, you don't need to list one.

Update - There is a 3rd, optional, argument now. You can specify Flash, as the 3rd argument, if you wish for the player to render in Flash mode instead of HTML5 mode. By default, HTML5 mode is used. The example below has been updated so the first item renders in Flash mode.

2015 Update - There are options to be able to drag and resize the lightbox now. Supported in all desktop browsers other than IE. If the 4th optional argument is set to drag, then the player will drag. If the 5th optional argument is set to resize, the player can be resized. The example below has been updated so the last item can be dragged and resized.

That's it!

Sample Implementation:

<!DOCTYPE html>
<html>
    <head>
        <title>JW Box - A JW Player LightBox</title>
		<link rel="icon" type="image/x-icon" href="http://www.jwplayer.com/wp-content/themes/jwplayer-104/favicon.ico" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jwbox.js"></script>
		<style type="text/css">
		body {
			font-family: sans-serif;
		}
		</style>
    </head>
    <body onload="setupPlayer();">
		<h3>JW Box - A JW Player LightBox</h3>
		<a href="#"><img width="500" height="300" border="0" src="http://content.bitsontherun.com/thumbs/i8oQD9zd-480.jpg" onclick="playVideo('http://content.bitsontherun.com/videos/i8oQD9zd-kNspJqnJ.mp4','http://content.bitsontherun.com/thumbs/i8oQD9zd-480.jpg','flash'); return false;" /></a><br /><br />
		<a href="#"><img width="500" height="300" border="0" src="http://www.longtailvideo.com/jw/upload/bunny.jpg" onclick="playVideo('http://www.longtailvideo.com/jw/upload/bunny.mp4','http://www.longtailvideo.com/jw/upload/bunny.jpg'); return false;" /></a><br /><br />
		<a href="#"><img width="500" height="300" border="0" src="http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg" onclick="playVideo('http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4','http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg'); return false;" /></a><br /><br />
		<a href="#"><img width="500" height="300" border="0" src="http://content.bitsontherun.com/thumbs/6O7cYVpH-480.jpg" onclick="playVideo('http://content.bitsontherun.com/videos/6O7cYVpH-1ahmry41.mp4','http://content.bitsontherun.com/thumbs/6O7cYVpH-480.jpg'); return false;" /></a><br /><br />
		<a href="#"><img width="500" height="300" border="0" src="http://content.bitsontherun.com/thumbs/zhiesZIW-480.jpg" onclick="playVideo('http://content.bitsontherun.com/videos/zhiesZIW-52qL9xLP.mp4','http://content.bitsontherun.com/thumbs/zhiesZIW-480.jpg','drag','resize'); return false;" /></a><br /><br />
		This is some content.<br />
		This is some content.<br />
		This is some content.
    </body>
</html>

The source code is available for this script. There is just a .js file for JavaScript. Publishing the JavaScipt can be simply done with any text editor. Enjoy~! :)