1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8" /> 5<!-- Website Design By: www.happyworm.com --> 6<title>Demo : Multi instanced jPlayer video players</title> 7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 8<link href="../../dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" /> 9<script type="text/javascript" src="../../lib/jquery.min.js"></script> 10<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script> 11<script type="text/javascript"> 12//<![CDATA[ 13$(document).ready(function(){ 14 15 $("#jquery_jplayer_1").jPlayer({ 16 ready: function () { 17 $(this).jPlayer("setMedia", { 18 title: "Big Buck Bunny Trailer", 19 m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v", 20 ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv", 21 webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm", 22 poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" 23 }); 24 }, 25 play: function() { // To avoid multiple jPlayers playing together. 26 $(this).jPlayer("pauseOthers"); 27 }, 28 swfPath: "../../dist/jplayer", 29 supplied: "webmv, ogv, m4v", 30 globalVolume: true, 31 useStateClassSkin: true, 32 autoBlur: false, 33 smoothPlayBar: true, 34 keyEnabled: true 35 }); 36 37 $("#jquery_jplayer_2").jPlayer({ 38 ready: function () { 39 $(this).jPlayer("setMedia", { 40 title: "Incredibles Teaser", 41 m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v", 42 ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv", 43 webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm", 44 poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png" 45 }); 46 }, 47 play: function() { // To avoid multiple jPlayers playing together. 48 $(this).jPlayer("pauseOthers"); 49 }, 50 swfPath: "../../dist/jplayer", 51 supplied: "webmv, ogv, m4v", 52 cssSelectorAncestor: "#jp_container_2", 53 globalVolume: true, 54 useStateClassSkin: true, 55 autoBlur: false, 56 smoothPlayBar: true, 57 keyEnabled: true 58 }); 59 60 $("#jquery_jplayer_3").jPlayer({ 61 ready: function () { 62 $(this).jPlayer("setMedia", { 63 title: "Finding Nemo Teaser", 64 m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v", 65 ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv", 66 webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm", 67 poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png" 68 }); 69 }, 70 play: function() { // To avoid multiple jPlayers playing together. 71 $(this).jPlayer("pauseOthers"); 72 }, 73 swfPath: "../../dist/jplayer", 74 supplied: "webmv, ogv, m4v", 75 cssSelectorAncestor: "#jp_container_3", 76 globalVolume: true, 77 useStateClassSkin: true, 78 autoBlur: false, 79 smoothPlayBar: true, 80 keyEnabled: true 81 }); 82}); 83//]]> 84</script> 85</head> 86<body> 87<div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player"> 88 <div class="jp-type-single"> 89 <div id="jquery_jplayer_1" class="jp-jplayer"></div> 90 <div class="jp-gui"> 91 <div class="jp-video-play"> 92 <button class="jp-video-play-icon" role="button" tabindex="0">play</button> 93 </div> 94 <div class="jp-interface"> 95 <div class="jp-progress"> 96 <div class="jp-seek-bar"> 97 <div class="jp-play-bar"></div> 98 </div> 99 </div> 100 <div class="jp-current-time" role="timer" aria-label="time"> </div> 101 <div class="jp-duration" role="timer" aria-label="duration"> </div> 102 <div class="jp-details"> 103 <div class="jp-title" aria-label="title"> </div> 104 </div> 105 <div class="jp-controls-holder"> 106 <div class="jp-volume-controls"> 107 <button class="jp-mute" role="button" tabindex="0">mute</button> 108 <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 109 <div class="jp-volume-bar"> 110 <div class="jp-volume-bar-value"></div> 111 </div> 112 </div> 113 <div class="jp-controls"> 114 <button class="jp-play" role="button" tabindex="0">play</button> 115 <button class="jp-stop" role="button" tabindex="0">stop</button> 116 </div> 117 <div class="jp-toggles"> 118 <button class="jp-repeat" role="button" tabindex="0">repeat</button> 119 <button class="jp-full-screen" role="button" tabindex="0">full screen</button> 120 </div> 121 </div> 122 </div> 123 </div> 124 <div class="jp-no-solution"> 125 <span>Update Required</span> 126 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 127 </div> 128 </div> 129</div> 130<div id="jp_container_2" class="jp-video jp-video-270p" role="application" aria-label="media player"> 131 <div class="jp-type-single"> 132 <div id="jquery_jplayer_2" class="jp-jplayer"></div> 133 <div class="jp-gui"> 134 <div class="jp-video-play"> 135 <button class="jp-video-play-icon" role="button" tabindex="0">play</button> 136 </div> 137 <div class="jp-interface"> 138 <div class="jp-progress"> 139 <div class="jp-seek-bar"> 140 <div class="jp-play-bar"></div> 141 </div> 142 </div> 143 <div class="jp-current-time" role="timer" aria-label="time"> </div> 144 <div class="jp-duration" role="timer" aria-label="duration"> </div> 145 <div class="jp-details"> 146 <div class="jp-title" aria-label="title"> </div> 147 </div> 148 <div class="jp-controls-holder"> 149 <div class="jp-volume-controls"> 150 <button class="jp-mute" role="button" tabindex="0">mute</button> 151 <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 152 <div class="jp-volume-bar"> 153 <div class="jp-volume-bar-value"></div> 154 </div> 155 </div> 156 <div class="jp-controls"> 157 <button class="jp-play" role="button" tabindex="0">play</button> 158 <button class="jp-stop" role="button" tabindex="0">stop</button> 159 </div> 160 <div class="jp-toggles"> 161 <button class="jp-repeat" role="button" tabindex="0">repeat</button> 162 <button class="jp-full-screen" role="button" tabindex="0">full screen</button> 163 </div> 164 </div> 165 </div> 166 </div> 167 <div class="jp-no-solution"> 168 <span>Update Required</span> 169 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 170 </div> 171 </div> 172</div> 173<div id="jp_container_3" class="jp-video jp-video-270p" role="application" aria-label="media player"> 174 <div class="jp-type-single"> 175 <div id="jquery_jplayer_3" class="jp-jplayer"></div> 176 <div class="jp-gui"> 177 <div class="jp-video-play"> 178 <button class="jp-video-play-icon" role="button" tabindex="0">play</button> 179 </div> 180 <div class="jp-interface"> 181 <div class="jp-progress"> 182 <div class="jp-seek-bar"> 183 <div class="jp-play-bar"></div> 184 </div> 185 </div> 186 <div class="jp-current-time" role="timer" aria-label="time"> </div> 187 <div class="jp-duration" role="timer" aria-label="duration"> </div> 188 <div class="jp-details"> 189 <div class="jp-title" aria-label="title"> </div> 190 </div> 191 <div class="jp-controls-holder"> 192 <div class="jp-volume-controls"> 193 <button class="jp-mute" role="button" tabindex="0">mute</button> 194 <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 195 <div class="jp-volume-bar"> 196 <div class="jp-volume-bar-value"></div> 197 </div> 198 </div> 199 <div class="jp-controls"> 200 <button class="jp-play" role="button" tabindex="0">play</button> 201 <button class="jp-stop" role="button" tabindex="0">stop</button> 202 </div> 203 <div class="jp-toggles"> 204 <button class="jp-repeat" role="button" tabindex="0">repeat</button> 205 <button class="jp-full-screen" role="button" tabindex="0">full screen</button> 206 </div> 207 </div> 208 </div> 209 </div> 210 <div class="jp-no-solution"> 211 <span>Update Required</span> 212 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 213 </div> 214 </div> 215</div> 216</body> 217 218</html> 219
