Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial media spawner plugin work

  • Loading branch information...
commit c39c452d107919464aff8c7391e058b007a74f5a 1 parent 2a1fb97
@mjschranz authored
View
58 plugins/mediaspawner/popcorn.mediaspawner.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Popcorn Media Spawner Plug-in Demo</title>
+ <!--
+ ATTENTION
+
+ This demo uses an API key obtained for testing the Tumblr Popcorn.js
+ plugin. Please do not use it for other purposes.
+
+ -->
+ <script src="../../popcorn.js"></script>
+ <script src="popcorn.mediaspawner.js"></script>
+ <script>
+ document.addEventListener( "DOMContentLoaded", function () {
+ var p = Popcorn( "#video" )
+ .volume(0)
+ .play()
+ .mediaspawner( {
+ mediaType: "youtube",
+ mediaSource: "http://www.youtube.com/watch?v=bUB1L3zGVvc",
+ target: "tumblrdiv",
+ start: 10,
+ end: 40,
+ caption: "This is a test. We are assuming conrol. We are assuming control."
+ });
+ }, false);
+
+ </script>
+</head>
+<body>
+<h1 id="qunit-header">Popcorn Media Spawner Plug-in Demo</h1>
+ <p>All types of tumblr plugins are shown below the video. This includes a Blog Info example, an Avatar example and an example of each type of Blog Post ( chat, link, quote, video, audio, text, photo and answer ).</p>
+
+ <div>
+ <video id="video"
+ controls
+ width= "350px"
+ poster="../../test/poster.png">
+
+ <source id="mp4"
+ src="../../test/trailer.mp4"
+ type='video/mp4; codecs="avc1, mp4a"'>
+
+ <source id="ogv"
+ src="../../test/trailer.ogv"
+ type="video/ogg;" codecs="theora, vorbis">
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ </div>
+ <div>
+ <div id="tumblrdiv"></div>
+ </div>
+</body>
+</html>
+
View
83 plugins/mediaspawner/popcorn.mediaspawner.js
@@ -0,0 +1,83 @@
+( function( Popcorn, global ) {
+
+ Popcorn.plugin( "mediaspawner" , {
+ manifest: {
+ about: {
+ name: "Popcorn Media Spawner Plugin",
+ version: "0.1",
+ author: "Matthew Schranz, @mjschranz",
+ website: "mschranz.wordpress.com"
+ },
+ options: {
+ mediaType: {
+ elem: "select",
+ options: [ "YOUTUBE", "VIMEO", "SOUNDCLOUD"],
+ label: "Media Type:"
+ },
+ caption: {
+ elem: "input",
+ type: "text",
+ label: "Media Caption:"
+ },
+ mediaSource: {
+ elem: "input",
+ type: "text",
+ label: "Media Source:"
+ },
+ target: "tumblr-container",
+ start: {
+ elem: "input",
+ type: "number",
+ label: "Start_Time"
+ },
+ end: {
+ elem: "input",
+ type: "number",
+ label: "End_Time"
+ }
+ }
+ },
+ _setup: function( options ) {
+ var target = document.getElementById( options.target ),
+ validType,
+ videoId,
+ pop;
+
+ // Valid types of retrieval requests
+ validType = function( type ) {
+ return ( [ "youtube", "vimeo", "soundcloud" ].indexOf( type ) > -1 );
+ };
+
+ // Lowercase the types incase user enters it in another way
+ options.mediaType = options.mediaType.toLowerCase();
+
+ !validType( options.mediaType ) && Popcorn.error( "Invalid Media Type.");
+
+ ( !options.mediaSource || !options.target) && Popcorn.error( "Must include a Media Source and target container.");
+
+ // Create seperate container for plugin
+ options._container = document.createElement( "div" );
+ videoId = "mediaSpawnerdiv-" + Popcorn.guid();
+ options._container.id = videoId;
+ options._container.innerHTML = options.caption + "<br/>";
+
+ pop = Popcorn.youtube( "#" + videoId, options.mediaSource );
+
+ options._container.style.display = "none";
+ target && target.appendChild( options._container );
+ },
+ start: function( event, options ){
+ if ( options._container ) {
+ options._container.style.display = "";
+ }
+ },
+ end: function( event, options ){
+ if( options._container ) {
+ options._container.style.display = "none";
+ }
+ },
+ _teardown: function( options ){
+ document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options._container );
+ }
+ });
+})( Popcorn, this );
Please sign in to comment.
Something went wrong with that request. Please try again.