Changeset 1300
- Timestamp:
- 09/21/10 09:42:41 (3 years ago)
- Location:
- trunk/html5/test/examples
- Files:
-
- 6 edited
-
custom_skin.html (modified) (2 diffs)
-
mp4_ogg.html (modified) (2 diffs)
-
multiple_customs.html (modified) (3 diffs)
-
multiple_players.html (modified) (2 diffs)
-
single_mp4.html (modified) (3 diffs)
-
single_ogg.html (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/html5/test/examples/custom_skin.html
r1000 r1300 1 1 <html> 2 <body> 3 <h1>Custom Player Skin</h1> 4 5 6 7 8 <p>A setup with MP4 video and custom player skin. Any JW Player PNG skin is supported!</p> 9 <p><video height="270" id="player" poster="/jw/upload/bunny.jpg" src="/jw/upload/bunny.mp4" width="480"></video></p> 10 11 <script type="text/javascript" src="/jw/js/jquery.jwplayer.js"></script> 12 <script type="text/javascript"> 13 $('#player').jwplayer({ 14 flashplayer:'/files/player.swf', 15 skin:'/files/skins/stormtrooper/stormtrooper.xml' 16 }); 17 </script></p> 18 19 <h3>HTML code</h3> 20 <p>Here is the code for this setup. Make sure to change all links to the scripts, player, skin, image and video. They must refer to the correct files on your server.</p> 21 22 <p>First, place this code in the <ems><head></ems> of your page:</p> 23 <pre><script type="text/javascript" src="/scripts/jquery.js"></script> 2 <head> 3 <title>Custom skin</title> 4 </head> 5 <body> 6 <h1>Custom Player Skin</h1> 7 <p> 8 A setup with MP4 video and custom player skin. Any JW Player PNG skin is supported! 9 </p> 10 <div height="270" id="player" width="480"> 11 </div> 12 <script type="text/javascript" src="../../../js/bin-debug/jwplayer.js"> 13 </script> 14 <script type="text/javascript" src="../../bin-debug/jwplayer.html5.js"> 15 </script> 16 <script type="text/javascript"> 17 var player = new jwplayer.html5(document.getElementById("player")); 18 player.setup({ 19 file: "../../../js/test/files/bunny.mp4", 20 image: "../../../js/test/files/bunny.jpg", 21 skin: "../../../../skins/stormtrooper/stormtrooper.xml" 22 }); 23 </script> 24 <h3>HTML code</h3> 25 <p> 26 Here is the code for this setup. Make sure to change all links to the scripts, player, skin, image and video. They must refer to the correct files on your server. 27 </p> 28 <p> 29 First, place this code in the <em><head></em> 30 of your page: 31 </p> 32 <pre><script type="text/javascript" src="/scripts/jquery.js"></script> 24 33 <script type="text/javascript" src="/scripts/jquery.jwplayer.js"></script></pre> 25 26 <p>Second, place this code where you want the video to appear:</p> 27 <pre><video height="270" id="player" poster="/files/bunny.mp4" 34 <p> 35 Second, place this code where you want the video to appear: 36 </p> 37 <pre><video height="270" id="player" poster="/files/bunny.mp4" 28 38 src="/files/bunny.mp4" width="480"> 29 39 … … 34 44 }); 35 45 </script></pre> 36 37 38 39 40 </body> 46 </body> 41 47 </html> -
trunk/html5/test/examples/mp4_ogg.html
r1064 r1300 1 1 <html> 2 <body> 3 <h1>MP4 plus OGG video</h1> 4 5 6 7 8 9 <p>This is the basic setup for a video that plays natively on most browsers. Only IE will fallback to Flash.</p> 10 11 <p><video height="270" id="player" poster="/jw/upload/bunny.jpg" width="480"><source src="/jw/upload/bunny.mp4" type="video/mp4" /><source src="/jw/upload/bunny.ogv" type="video/ogg" /></video></p> 12 13 <script type="text/javascript" src="/jw/js/jquery.jwplayer.js"></script> 14 <script type="text/javascript"> 15 $('#player').jwplayer({flashplayer:'/files/player.swf',skin:'/files/skins/five/five.xml'}); 16 </script></p> 17 18 <h3>HTML code</h3> 19 <p> Here is the code for this setup. Make sure to change all links to the scripts, player, image and video. They must refer to the correct files on your server.</p> 20 21 <p>First, place this code in the <ems><head></ems> of your page:</p> 22 <pre><script type="text/javascript" src="/scripts/jquery.js"></script> 2 <head> 3 <title>Multiple sources</title> 4 </head> 5 <body> 6 <h1>MP4 plus OGG video</h1> 7 <p> 8 This is the basic setup for a video that plays natively on most browsers. Only IE will fallback to Flash. 9 </p> 10 <div height="270" id="player" width="480"> 11 </div> 12 <!-- 13 <video height="270" id="player" poster="/jw/upload/bunny.jpg" width="480"> 14 <source src="/jw/upload/bunny.mp4" type="video/mp4" /><source src="/jw/upload/bunny.ogv" type="video/ogg" /> 15 </video> 16 --> 17 <script type="text/javascript" src="../../../js/bin-debug/jwplayer.js"> 18 </script> 19 <script type="text/javascript" src="../../bin-debug/jwplayer.html5.js"> 20 </script> 21 <script type="text/javascript"> 22 var player = new jwplayer.html5(document.getElementById("player")); 23 player.setup({ 24 levels: [{ 25 file: "../../../js/test/files/bunny.mp4" 26 }, { 27 file: "../../../js/test/files/bunny.ogv" 28 }], 29 image: "../../../js/test/files/bunny.jpg" 30 }); 31 </script> 32 <h3>HTML code</h3> 33 <p> 34 Here is the code for this setup. Make sure to change all links to the scripts, player, image and video. They must refer to the correct files on your server. 35 </p> 36 <p> 37 First, place this code in the <em><head></em> 38 of your page: 39 </p> 40 <pre><script type="text/javascript" src="/scripts/jquery.js"></script> 23 41 <script type="text/javascript" src="/scripts/jquery.jwplayer.js"></script></pre> 24 25 26 <p>Second, place this code where you want the video to appear:</p>27 <pre><video height="270" id="player" poster="/files/bunny.jpg" width="480">42 <p> 43 Second, place this code where you want the video to appear: 44 </p> 45 <pre><video height="270" id="player" poster="/files/bunny.jpg" width="480"> 28 46 <source src="/files/bunny.mp4" type="video/mp4"> 29 47 <source src="/files/bunny.ogv" type="video/ogg"> … … 36 54 }); 37 55 </script></pre> 38 39 40 41 42 </body> 56 </body> 43 57 </html> -
trunk/html5/test/examples/multiple_customs.html
r1000 r1300 1 1 <html> 2 <body> 3 4 <h1>Multiple custom players.</h1> 5 6 7 8 9 10 11 <p>Multiple players on one page. Different videos and different options.</p> 12 13 <h3>Player 1:</h3> 14 <script type="text/javascript" src="/jw/js/jquery.jwplayer.js"></script> 15 <p><video height="270" id="player1" poster="/jw/upload/bunny.jpg" src="/jw/upload/bunny.mp4" width="480"></video></p> 16 <script type="text/javascript"> 17 $('#player1').jwplayer({ 18 autostart:true, 19 flashplayer:'/files/player.swf', 20 mute:true, 21 skin:'/files/skins/five/five.xml' 22 }); 23 </script> 24 25 26 <h3>Player 2:</h3> 27 <p><video height="270" id="player2" poster="/jw/upload/corrie.jpg" src="/jw/upload/corrie.mp4" width="480"></video></p> 28 <script type="text/javascript"> 29 $('#player2').jwplayer({ 30 duration:45, 31 screencolor:'00bee0', 32 skin:'/files/skins/stormtrooper/stormtrooper.xml' 33 }); 34 </script> 35 36 37 38 <h3>HTML code</h3> 39 <p>Multiple players on one page. Different videos and <a href="/support/jw-player/html5-player/11289/configuration-options-of-the-jw-player-for-html5">different options</a>. The first player is set to autostart muted. The second player has pre-set duration, but no flashplayer fallback. Both have a custom skin.</p> 40 41 42 <p>First, place this code in the <ems><head></ems> of your page:</p> 43 <pre><script type="text/javascript" src="/scripts/jquery.js"></script> 2 <head> 3 <title>Multiple custom players</title> 4 </head> 5 <body> 6 <h1>Multiple custom players.</h1> 7 <p> 8 Multiple players on one page. Different videos and different options. 9 </p> 10 <h3>Player 1:</h3> 11 <script type="text/javascript" src="../../../js/bin-debug/jwplayer.js"> 12 </script> 13 <script type="text/javascript" src="../../bin-debug/jwplayer.html5.js"> 14 </script> 15 <div height="270" id="player1" width="480"> 16 </div> 17 <script type="text/javascript"> 18 var player1 = new jwplayer.html5(document.getElementById("player1")); 19 player1.setup({ 20 autostart: true, 21 mute: true, 22 file: "../../../js/test/files/bunny.mp4", 23 image: "../../../js/test/files/bunny.jpg" 24 25 }); 26 </script> 27 <h3>Player 2:</h3> 28 <div height="270" id="player2" width="480"> 29 </div> 30 <script type="text/javascript"> 31 var player2 = new jwplayer.html5(document.getElementById("player2")); 32 player2.setup({ 33 screencolor: "00bee0", 34 duration: 45, 35 volume: 50, 36 file: "../../../js/test/files/oorlogswinter.mp4", 37 image: "../../../js/test/files/oorlogswinter.png", 38 skin: "../../../../skins/stormtrooper/stormtrooper.xml" 39 }); 40 </script> 41 <h3>HTML code</h3> 42 <p> 43 Multiple players on one page. Different videos and <a href="/support/jw-player/html5-player/11289/configuration-options-of-the-jw-player-for-html5">different options</a>. The first player is set to autostart muted. The second player has pre-set duration, but no flashplayer fallback. Both have a custom skin. 44 </p> 45 <p> 46 First, place this code in the <em><head></em> 47 of your page: 48 </p> 49 <pre><script type="text/javascript" src="/scripts/jquery.js"></script> 44 50 <script type="text/javascript" src="/scripts/jquery.jwplayer.js"></script></pre> 45 46 <p>Second, place this code where you want the first video to appear:</p> 47 <pre><video height="270" id="player1" src="/files/bunny.mp4" width="480"> 51 <p> 52 Second, place this code where you want the first video to appear: 53 </p> 54 <pre><video height="270" id="player1" src="/files/bunny.mp4" width="480"> 48 55 <script type="text/javascript"> 49 56 $('#player1').jwplayer({ … … 54 61 }); 55 62 </script></pre> 56 57 <p>Third, place this code where you want the second video to appear:</p> 58 <pre><video height="270" id="player2" src="/files/corrie.mp4" width="480"> 63 <p> 64 Third, place this code where you want the second video to appear: 65 </p> 66 <pre><video height="270" id="player2" src="/files/corrie.mp4" width="480"> 59 67 60 68 <script type="text/javascript"> … … 65 73 }); 66 74 </script></pre> 67 68 <p>Note that the <i>jwplayer()</i> function is called twice. This allows us to set different options for the two players.</p> 69 70 71 72 73 </body> 75 <p> 76 Note that the <i>jwplayer()</i> 77 function is called twice. This allows us to set different options for the two players. 78 </p> 79 </body> 74 80 </html> -
trunk/html5/test/examples/multiple_players.html
r1000 r1300 1 1 <html> 2 <body> 3 <h1>Multiple players</h1> 4 5 6 7 <p>Multiple players on one page. Different videos, but the same player options.</p> 8 9 <h3>Player 1:</h3> 10 <p><video height="270" id="player1" poster="/jw/upload/bunny.jpg" src="/jw/upload/bunny.mp4" width="480"></video></p> 11 12 <h3>Player 2:</h3> 13 <p><video height="270" id="player2" poster="/jw/upload/corrie.jpg" src="/jw/upload/corrie.mp4" width="480"></video></p> 14 15 <script type="text/javascript" src="/jw/js/jquery.jwplayer.js"></script> 16 <script type="text/javascript"> 17 $('video').jwplayer({ 18 flashplayer:'/files/player.swf', 19 skin:'/files/skins/five/five.xml' 20 }); 21 </script> 22 23 <h3>HTML code</h3> 24 <p>Here is the code for this setup. Make sure to change all links to the scripts, player, image and video. They must refer to the correct files on your server.</p> 25 26 <p>First, place this code in the <ems><head></ems> of your page:</p> 27 <pre><script type="text/javascript" src="/scripts/jquery.js"></script> 2 <head> 3 <title>Multiple Video Example</title> 4 </head> 5 <body> 6 <h1>Multiple players</h1> 7 <p> 8 Multiple players on one page. Different videos, but the same player options. 9 </p> 10 <h3>Player 1:</h3> 11 <div height="270" id="player1" width="480"> 12 </div> 13 <h3>Player 2:</h3> 14 <div height="270" id="player2" width="480"> 15 </div> 16 <script type="text/javascript" src="../../../js/bin-debug/jwplayer.js"> 17 </script> 18 <script type="text/javascript" src="../../bin-debug/jwplayer.html5.js"> 19 </script> 20 <script type="text/javascript"> 21 var player1 = new jwplayer.html5(document.getElementById("player1")); 22 player1.setup({ 23 file: "../../../js/test/files/bunny.mp4", 24 image: "../../../js/test/files/bunny.jpg" 25 26 }); 27 var player2 = new jwplayer.html5(document.getElementById("player2")); 28 player2.setup({ 29 file: "../../../js/test/files/oorlogswinter.mp4", 30 image: "../../../js/test/files/oorlogswinter.png" 31 32 }); 33 </script> 34 <h3>HTML code</h3> 35 <p> 36 Here is the code for this setup. Make sure to change all links to the scripts, player, image and video. They must refer to the correct files on your server. 37 </p> 38 <p> 39 First, place this code in the <em><head></em> 40 of your page: 41 </p> 42 <pre><script type="text/javascript" src="/scripts/jquery.js"></script> 28 43 <script type="text/javascript" src="/scripts/jquery.jwplayer.js"></script></pre> 29 30 <p>Second, place this code where you want the videos to appear:</p> 31 <pre><video height="270" id="player1" src="/files/bunny.mp4" width="480" > 44 <p> 45 Second, place this code where you want the videos to appear: 46 </p> 47 <pre><video height="270" id="player1" src="/files/bunny.mp4" width="480" > 32 48 33 49 <video height="270" id="player2" src="/files/corrie.mp4" width="480" > … … 39 55 }); 40 56 </script></pre> 41 42 <p>Note that the <i>$('video')</i> part of the script ensures all video tags will be <i>upgraded</i> to a JW Player. It doesn't matter how many players you have on your page.</p> 43 44 45 46 47 </body> 57 <p> 58 Note that the <i>$('video')</i> 59 part of the script ensures all video tags will be <i>upgraded</i> 60 to a JW Player. It doesn't matter how many players you have on your page. 61 </p> 62 </body> 48 63 </html> -
trunk/html5/test/examples/single_mp4.html
r1298 r1300 1 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 2 <html> 3 4 5 3 <head> 4 <title>Single MP4 Example</title> 5 </head> 6 6 <body> 7 7 <h1>Single MP4 video</h1> … … 9 9 This is the basic setup for a video that plays on Safari,iPhone/iPad and Chrome. Firefox, IE and Opera will fallback to Flash. A poster image is included. 10 10 </p> 11 <p> 12 <video height="270" id="player" poster="http://content.bitsontherun.com/thumbs/nPripu9l-320.jpg" src="http://content.bitsontherun.com/videos/nPripu9l-327.mp4" width="480"> 13 </video> 14 </p> 11 <div height="270" id="player" width="480"> 12 </div> 15 13 <script type="text/javascript" src="../../../js/bin-debug/jwplayer.js"> 16 14 </script> … … 21 19 player.setup({ 22 20 file: "../../../js/test/files/bunny.mp4", 23 21 image: "../../../js/test/files/bunny.jpg" 24 22 25 23 }); -
trunk/html5/test/examples/single_ogg.html
r1000 r1300 1 1 <html> 2 <body> 3 <h1>Single OGG video</h1> 4 5 6 7 8 <p>This is the basic setup for a video that only plays on Firefox / Opera. On other browsers, it'll fallback to a download link. A poster image is included.</p> 9 10 <p><video height="270" id="player" poster="/jw/upload/bunny.jpg" width="480" src="/jw/upload/bunny.ogv"></video></p> 11 12 <script type="text/javascript" src="/jw/js/jquery.jwplayer.js"></script> 13 <script type="text/javascript"> 14 $('#player').jwplayer({flashplayer:'/files/player.swf',skin:'/files/skins/five/five.xml'}); 15 </script> 16 17 <h3>HTML code</h3> 18 <p> Here is the code for this setup. Make sure to change all links to the scripts, player, image and video. They must refer to the correct files on your server.</p> 19 20 <p>First, place this code in the <ems><head></ems> of your page:</p> 21 <pre><script type="text/javascript" src="/scripts/jwplayer.js"></script> 2 <head> 3 <title>Single OGV Example</title> 4 </head> 5 <body> 6 <h1>Single OGG video</h1> 7 <p> 8 This is the basic setup for a video that only plays on Firefox / Opera. On other browsers, it'll fallback to a download link. A poster image is included. 9 </p> 10 <div height="270" id="player" width="480"> 11 </div> 12 <script type="text/javascript" src="../../../js/bin-debug/jwplayer.js"> 13 </script> 14 <script type="text/javascript" src="../../bin-debug/jwplayer.html5.js"> 15 </script> 16 <script type="text/javascript"> 17 var player = new jwplayer.html5(document.getElementById("player")); 18 player.setup({ 19 file: "../../../js/test/files/bunny.ogv", 20 image: "../../../js/test/files/bunny.jpg" 21 22 }); 23 </script> 24 <h3>HTML code</h3> 25 <p> 26 Here is the code for this setup. Make sure to change all links to the scripts, player, image and video. They must refer to the correct files on your server. 27 </p> 28 <p> 29 First, place this code in the <em><head></em> 30 of your page: 31 </p> 32 <pre><script type="text/javascript" src="/scripts/jwplayer.js"></script> 22 33 <script type="text/javascript" src="/scripts/jquery.jwplayer.js"></script></pre> 23 24 25 <p>Second, place this code where you want the video to appear:</p>26 <pre><video height="270" id="player" poster="/files/bunny.jpg"34 <p> 35 Second, place this code where you want the video to appear: 36 </p> 37 <pre><video height="270" id="player" poster="/files/bunny.jpg" 27 38 src="/files/bunny.ogv" width="480"> 28 39 … … 32 43 }); 33 44 </script></pre> 34 35 <p>Note this example does not define a <i>flashplayer</i> fallback, since OGG cannot be played in Flash.</p> 36 37 38 39 40 </body> 45 <p> 46 Note this example does not define a <i>flashplayer</i> 47 fallback, since OGG cannot be played in Flash. 48 </p> 49 </body> 41 50 </html>
Note: See TracChangeset
for help on using the changeset viewer.
