diff options
Diffstat (limited to 'extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests')
9 files changed, 375 insertions, 0 deletions
diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Audio.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Audio.html new file mode 100644 index 00000000..e0d0c19e --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Audio.html @@ -0,0 +1,16 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <!-- <script type="text/javascript" src="../../../ResourceLoader.php?class=window.jQuery,mwEmbed&&debug=true"></script> --> + <script type="text/javascript" src="../../../mwEmbedStartup.php"></script> +<title>Audio Player sample</title> +</head> +<body> +<h3> Audio Player </h3> +<audio class="kskin" src="http://upload.wikimedia.org/wikipedia/commons/4/4c/Faurepiece.ogg" durationHint="164"></audio> +<h3> Audio Player mp3 </h3> +<audio src="http://ia600300.us.archive.org/35/items/tube122/tube122-02-entia_non_-_perfunctory_jousting.mp3" durationHint="133"></audio> + +</body> +</html>
\ No newline at end of file diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_DynamicEmbed.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_DynamicEmbed.html new file mode 100644 index 00000000..135e1713 --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_DynamicEmbed.html @@ -0,0 +1,24 @@ +<html> + <head> + <script type="text/javascript" src="../../../mwEmbedStartup.php"></script> + </head> +<body> + + <div style="width:640px; height:480px;" id="mwplayer"></div> + + <script> + mw.ready(function(){ + + mw.load('EmbedPlayer', function(){ + // seems to trip a bug in IE8/win7 + $('#mwplayer').embedPlayer({ + 'poster' : "http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg", + 'sources':[{ + 'src':'http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v', + 'type':'video/h264'}] + }); + }); + }); + </script> + +</body> diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_IncludeJQuery.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_IncludeJQuery.html new file mode 100644 index 00000000..ebe3bac9 --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_IncludeJQuery.html @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Player sources</title> + +<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script> +<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js" type="text/javascript"></script> +<script type="text/javascript" src="../../../mwEmbedStartup.php"></script> +<script type="text/javascript"> + $(document).ready(function(){ + $('#test').text('jQuery $ supported' ); + }); +</script> +</head> +<body> +<div id="test"></div> + +<video poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/elephants-dream.jpg" + duration="10:53" preload="auto"> + <source type="video/webm" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/elephants-dream_400p.webm" /> + <source type="video/h264" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/elephants-dream_iphone.m4v" /> + <source type="video/ogg" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/elephants-dream_400p.ogv" /> +</video> + + +</body> +</html>
\ No newline at end of file diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Native_Bindings.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Native_Bindings.html new file mode 100644 index 00000000..433ffa21 --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Native_Bindings.html @@ -0,0 +1,129 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Native Player html5 bindings </title> + + +</head> +<body> +<div style="position:absolute;display:block; left: 500px; width:300px; background: #eee; border:solid thin black"> + <table style="font-size:.8em"> + <tr> + <td colspan="2"> + <b>Media Events:</b> + </td> + </tr> + <tr> + <td colspan="2"><textarea style="width:288px" rows="10" id="mediaeventlog"></textarea></td> + </tr> + + + <tr> + <td colspan="2"> + <b>Events logging: (not quite there yet)</b> + </td> + </tr> + <tr> + <td colspan="2"><div id="eventSelectors"> </div></td> + </tr> + + </table> +</div> + +<div style="width:500px;height:300px;display:block;position:relative"> + <video id="myVid" poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/elephants-dream.jpg" + duration="10:53" preload="auto" controls> + <source type="video/h264" src="http://www.archive.org/download/ElephantsDream/ed_1024_512kb.mp4" > + <source type="video/ogg" src="http://www.archive.org/download/ElephantsDream/ed_hd.ogv" > + </video> +</div> + + +<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> +<script type="text/javascript" src="../../../mwEmbedStartup.php"></script> +<script type="text/javascript"> + /* + Media Event Bindings + from http://www.w3.org/TR/html5/video.html + 4.8.9.12 Event summary + The following events fire on media elements as part of the processing model described above: + */ + var vid, + mediaEvents = [ + { event: 'loadstart', logMessage: 'The user agent has begun looking for media data, as part of the resource selection algorithm.' }, + { event: 'progress', logMessage: 'The user agent is fetching media data.' }, + { event: 'suspend', logMessage: 'The user agent is intentionally not currently fetching media data, but does not have the entire media resource downloaded.' }, + { event: 'abort', logMessage: 'The user agent stops fetching the media data before it is completely downloaded, but not due to an error.' }, + { event: 'error', logMessage: 'An error occurs while fetching the media data.' }, + { event: 'emptied', logMessage: "A media element whose networkState was previously not in the NETWORK_EMPTY state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the load() method was invoked while the resource selection algorithm was already running)." }, + { event: 'stalled', logMessage: 'The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.' }, + { event: 'play', logMessage: 'Playback has begun. Fired after the play() method has returned, or when the autoplay attribute has caused playback to begin.' }, + { event: 'pause', logMessage: 'Playback has been paused. Fired after the pause() method has returned.' }, + { event: 'loadedmetadata', logMessage: 'The user agent has just determined the duration and dimensions of the media resource' }, + { event: 'loadeddata', logMessage: 'The user agent can render the media data at the current playback position for the first time.' }, + { event: 'waiting', logMessage: 'Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course.' }, + { event: 'playing', logMessage: 'Playback has started.' }, + { event: 'canplay', logMessage: 'The user agent can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content.' }, + { event: 'canplaythrough', logMessage: 'The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.' }, + { event: 'seeking', logMessage: 'The seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.' }, + { event: 'seeked', logMessage: 'The seeking IDL attribute changed to false.' }, + { event: 'timeupdate', logMessage: 'The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously.' }, + { event: 'ended', logMessage: 'Playback has stopped because the end of the media resource was reached.' }, + { event: 'ratechange', logMessage: 'Either the defaultPlaybackRate or the playbackRate attribute has just been updated.' }, + { event: 'durationchange', logMessage: 'The duration attribute has just been updated.' }, + { event: 'volumechange', logMessage: 'Either the volume attribute or the muted attribute has changed.' } + ]; + +// log to textarea +function logME(event) { + $('#mediaeventlog').append(event+'\n'); +} + + +// setup logging for an event or tear it down +function setLogging(event, isActive, message) { + if ( isActive === true ) { + $(mediaEvents).each(function (i, e) { + if ( e.event === event ) { + message = e.logMessage; + } + }); + $j('#myVid').bind( event, function() { logME('* ' + event + ' fired: ' + message); }); + } else { + $j('#myVid').unbind( event ); + } + +} + +mw.ready(function() { + + var vid = $j('#myVid'); + + // setup checkboxes to control logging + $(mediaEvents).each(function (i, e) { + var event = e.event; + var message = e.logMessage; + $('#eventSelectors').append('<input class="eventSelector" type=checkbox checked name="' + event +'">' + event + '</input><br />'); + setLogging(event, true, message); + }); + + //$('.eventSelector').each(function(i, s) { //change(console.log('changed')); + +// +//console.log(s); +// $(s).change('click'); +//}); + + //disable logging for timeupdate + setLogging('timeupdate', false); + $('input[name=timeupdate]').prop( 'checked', false ); + + logME('* the media player is ready'); + +}); + + +</script> + +</body> +</html> diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Seek.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Seek.html new file mode 100644 index 00000000..8c0f8e9d --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Seek.html @@ -0,0 +1,35 @@ +<html> + <head> + <script type="text/javascript" src="../../../mwEmbedStartup.php"></script> + </head> + <body> + <h2>mwEmbed / archive.org server side seek</h2> + Start Playing at <input id="startTime" size="5" value ="50"></input> seconds. <input value="go" type="button" id="doPageSeek"></input></br> + <video id="vid1" poster="http://www.archive.org/download/night_of_the_living_dead/format=Thumbnail&x.jpg" + style="width:400px;height:300px" durationHint="5717.21"> + <source src="http://www.archive.org/download/night_of_the_living_dead/night_of_the_living_dead_512kb.mp4"/> + <source src="http://www.archive.org/download/night_of_the_living_dead/night_of_the_living_dead.ogv"/> + </video> + <script type="text/javascript"> + mw.ready( function(){ + // check for hash: + var urlParts = new mw.Uri ( document.URL); + if( urlParts.anchor ){ + // run the start offset: + var startTime = urlParts.anchor.split('=')[1]; + + //update the input box: + $j('#startTime').val( startTime ); + + // update current time then play: + $j('#vid1')[0].currentTime = startTime; + $j('#vid1')[0].play(); + } + // bind button: + $j('#doPageSeek').click(function(){ + document.location = 'Player_Seek.html?' + Math.random(1) + '#start=' + $j("#startTime").val(); + }); + }); + </script> + </body> +</html> diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_ServerSeek.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_ServerSeek.html new file mode 100644 index 00000000..6a9d7d04 --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_ServerSeek.html @@ -0,0 +1,35 @@ +<html> + <head> + <script type="text/javascript" src="../../../mwEmbedStartup.php"></script> + </head> + <body> + <h2>mwEmbed / archive.org server side seek</h2> + Start Playing at <input id="startTime" size="5" value="50"></input> seconds. <input value="go" type="button" id="doPageSeek"></input></br> + <video id="vid1" poster="http://www.archive.org/download/night_of_the_living_dead/format=Thumbnail&x.jpg" + style="width:400px;height:300px" durationHint="5717.21"> + <source URLTimeEncoding='true' src="http://www.archive.org/download/night_of_the_living_dead/night_of_the_living_dead_512kb.mp4"/> + <source URLTimeEncoding='true' src="http://www.archive.org/download/night_of_the_living_dead/night_of_the_living_dead.ogv"/> + </video> + <script type="text/javascript"> + mw.ready( function(){ + // check for hash: + var urlParts = new mw.Uri( document.URL); + if( urlParts.anchor ){ + // run the start offset: + var startTime = urlParts.anchor.split('=')[1]; + + //update the input box: + $j('#startTime').val( startTime ); + + // update current time then play: + $j('#vid1')[0].currentTime = startTime; + $j('#vid1')[0].play(); + } + // bind button: + $j('#doPageSeek').click(function(){ + document.location = 'Player_ServerSeek.html?' + Math.random(1) + '#start=' + $j("#startTime").val(); + }); + }); + </script> + </body> +</html> diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_ServerSideSeek.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_ServerSideSeek.html new file mode 100644 index 00000000..26c87a6a --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_ServerSideSeek.html @@ -0,0 +1,14 @@ +<html> + <head> + <script type="text/javascript" src="../../../mwEmbedStartup.php"></script> + </head> + <body> + <h2>mwEmbed / archive.org server side seek</h2> + + <video poster="http://www.archive.org/download/night_of_the_living_dead/format=Thumbnail&x.jpg" + style="width:400px;height:300px" durationHint="5717.21"> + <source URLTimeEncoding="true" src="http://www.archive.org/download/night_of_the_living_dead/night_of_the_living_dead_512kb.mp4"/> + <source URLTimeEncoding="true" src="http://www.archive.org/download/night_of_the_living_dead/night_of_the_living_dead.ogv"/> + </video> + </body> +</html> diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Sources.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Sources.html new file mode 100644 index 00000000..244ae1fa --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Sources.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Player sources</title> + + <script type="text/javascript" src="../../../mwEmbedStartup.php"></script> +<!-- <script type="text/javascript" src="http://html5.kaltura.org/js"></script>--> + +<meta http-equiv="X-UA-Compatible" content="IE=9"/> +<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> + +</head> +<body> + +<video id="vid1" width="480" height="267" + poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg" + durationHint="33" + controls > + <source type="video/h264" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v"></source> + <source type="video/ogg" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_400p.ogv"></source> +</video> + +</body> +</html> diff --git a/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Themable.html b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Themable.html new file mode 100644 index 00000000..d70b4084 --- /dev/null +++ b/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/tests/Player_Themable.html @@ -0,0 +1,71 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" +"http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> + <title> Sample Themed Player </title> + Pre-loading demo ( stuff ) likely needed for video display + <!-- <script type="text/javascript" src="../../../ResourceLoader.php?debug=true&class=mwEmbed"></script> --> + <script type="text/javascript" src="../../../mwEmbedStartup.php"></script> + +</head> +<script type="text/javascript"> + // Show the controls ( this is a theme demo ) + mw.setConfig( 'EmbedPlayer.OverlayControls', false ); +</script> +<body> + +<h3> Sample Themable Player:</h3> +To play with dynamic Themes install <a href="http://jqueryui.com/themeroller/developertool/">Themeroller</a><p><p> + +<div style="width:450px;float:left"> +<video + style="width:400px;height:300px" + src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg" + poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg" + apiTitleKey="Charles_Lindbergh_flight_to_Brussels.ogg" + apiProvider="commons" + durationHint="60" > +</video> + +<video + style="width:208px;height:160px;float:left" + src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg" + apiTitleKey="Charles_Lindbergh_flight_to_Brussels.ogg" + apiProvider="commons" + poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg" + durationHint="60"> + </video> + +<b>Source Code used:</b><br> +<textarea cols="50" rows="7"><video style="width:400px;height:288px" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg" +src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg"></video></textarea> +</div> + +<div style="width:450px;float:left"> +<video + class="kskin" + style="width:400px;height:300px" + src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg" + apiTitleKey="Charles_Lindbergh_flight_to_Brussels.ogg" + apiProvider="commons" + poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg" + durationHint="60"> +</video> +<video + class="kskin" + apiTitleKey="Charles_Lindbergh_flight_to_Brussels.ogg" + apiProvider="commons" + style="width:208px;height:160px;float:left;" src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg" + poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg" + durationHint="60"> +</video> + +<b>(kskin) Source Code used:</b><br> +<textarea cols="50" rows="7"><video class="kskin" style="width:400px;height:288px" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Charles_Lindbergh_flight_to_Brussels.ogg/mid-Charles_Lindbergh_flight_to_Brussels.ogg.jpg" +src="http://upload.wikimedia.org/wikipedia/commons/2/29/Charles_Lindbergh_flight_to_Brussels.ogg"></video></textarea> +</div> + + +</body> +</html> + |