Adding a video to your page is easy enough by embedding directly or by using something like flashembed to embed Flash. What we needed to do was have multiple links on a page that would each open specific videos, whilst still keep the same generic
JavaScript somewhere in a separate page template file. The accompanying
CSS also had to stay in a separate CSS file and also needed to be
generic. Our videos were all in .FLV format and needed to pop over the
content in a nice overlay so as not to disturb the flow of the page.
Blacktrash have a nice demo
of the kind of functionality we needed but it wasn’t quite generic
enough to manage our very different sized videos. The code below, based
on this example using Flowplayer and jQuery Tools Overlay, is simple enough that you can easily add multiple videos to a page. The size of the video player
is determined by the html5 style attributes “data-width” and
“data-height” on each “a” link which are picked up by jQuery and used to
resize the player. If you do not specify these then the default is
used, as given by the CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <html><head><!--
include the flowplayer, jQuery and jQuery <span id="lp47q8i4_6"
class="lp47q8i4">Tools</span> libraries --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript" charset="utf-8"></script><script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js" type="text/javascript" charset="utf-8"></script><!--
set up the flowplayer to <span id="lp47q8i4_1"
class="lp47q8i4">play videos</span> in an overlay using jQuery
Tools Overlay --><script type="text/javascript"> $(function () { var player; $("a[rel]").overlay({ mask: { color: '#000', opacity: 0.2 }, onLoad: function () { // create player object and load in the href of the link clicked as the source of the video player = $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf",this.getTrigger().attr("href")); player.load(); // set the height and width based on data-height and data-width $("#player").height(this.getTrigger().attr("data-height")); $("#player").width(this.getTrigger().attr("data-width")); }, onClose: function () { player.unload(); } }); });</script><!-- set up the CSS to hide the overlay by default and set up default height and width for the player --><style>#overlay { display: none; padding: 40px; } .close { background:url(http://flowplayer.org/media/img/overlay/close.png) no-repeat; position:absolute; top:2px; right:5px; display:block; width:35px; height:35px; cursor:pointer; } #player { display: block; width: 600px; height: 300px; margin: 0; } #player *:focus { outline-style: none; }</style></head><body><!--
each link contains a reference to the video to be played in flowplayer,
the JavaScript above ensures they are played in an overlay --><a rel="#overlay" href="http://www.sitename.com/video/video800x600.flv" data-height="600" data-width="800">800x600 Video</a><!--
the overlay <div> itself is empty apart from a &nbsp; and
hidden using CSS to make sure it isn't shown on screen --><div id="overlay"><a class="close"></a><div id="player">&nbsp;</div></div></body></html> |
About 
0 comments: