boazsender/popcorn.wikipedia.html Secret

## popcorn.wikipedia.html
<!DOCTYPE html>
<html>
<head>
  <title>Popcorn API Draft DEMO</title>
  <script src="../popcorn.js"></script>
  <script src="../plugins/popcorn.wikipedia.js"></script>
  <script src="http://code.jquery.com/jquery.js"></script>

  <style>
  </style>

  <script>
  document.addEventListener('DOMContentLoaded', function(){
    Popcorn('#video')
      .wikipedia({
        start: 1,
        end: 13,
        target: 'wikipedia-container',
        lang : 'en',
        article: 'kant'
      })
  }, false);
  </script>

</head>
<body>
  <h1 id="qunit-header">Popcorn Wikipedia Demo</h1>

  <video id='video'
    controls preload='none'
    poster="http://media.w3.org/2010/05/sintel/poster.png">

    <source id='mp4'
      src="http://media.w3.org/2010/05/sintel/trailer.mp4"
      type='video/mp4; codecs="avc1, mp4a"'>

    <source id='ogv'
      src="http://media.w3.org/2010/05/sintel/trailer.ogv"
      type='video/ogg; codecs="theora, vorbis"'>

    <p>Your user agent does not support the HTML5 Video element.</p>

  </video>

  <div id="wikipedia-container">

  </div>
</body>
</html>

## popcorn.wikipedia.js
(function (Popcorn) {
  Popcorn.plugin( "wikipedia" , (function(){
    var div;

    return {
      _setup : function( options ) {
        div = document.getElementById(options.target);
        //  Check for existing frame
        if ( !div ) {
          // if no existing frame, create it.
          div = document.createElement("div");

          this.video.parentNode.appendChild(div);
        }
      },
      start : function( event, options ){
        var url = 'http://' +  options.lang + '.wikipedia.org/w/api.php?action=parse&props=text&page=' +  options.article + '&format=json&callback=?';

        $.getJSON( url , function( response ) {
          if( response ) {
            //make a link to the document
            var h3 = document.createElement('h3');
                a = document.createElement('a'),

            a.setAttribute('href', 'http://' +  options.lang + '.wikipedia.org/' +  options.article);
            a.setAttribute('target', '_blank');
            a.innerHTML = response.parse.displaytitle;
            h3.appendChild(a);

            // get the first 140 characters of the wiki content
            var desc = document.createElement('p'),
                text = response.parse.text["*"].substr(response.parse.text["*"].indexOf('<p>'));

            text = text.replace(/((<(.|\n)+?>)|(\((.*?)\) )|(\[(.*?)\]))/g, "");
            desc.innerHTML = text.substr(0, ( length || 140 )) + " ...";
            div.appendChild(h3);
            div.appendChild(desc);
          }
        });
      },
      end: function( event, options ){
        div.parentNode.removeChild(div);
      },
      timeupdate: function( event, options ){
        // fire every second
      },
      customevent: function( event, options ){
        console.log('customevt fired')
      }

    }
  })());
})(Popcorn);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Popcorn API Draft DEMO</title>
	<script src="../popcorn.js"></script>
	<script src="../plugins/popcorn.wikipedia.js"></script>
	<script src="http://code.jquery.com/jquery.js"></script>

	<style>
	</style>

	<script>
	document.addEventListener('DOMContentLoaded', function(){
	Popcorn('#video')
	.wikipedia({
	start: 1,
	end: 13,
	target: 'wikipedia-container',
	lang : 'en',
	article: 'kant'
	})
	}, false);
	</script>

	</head>
	<body>
	<h1 id="qunit-header">Popcorn Wikipedia Demo</h1>

	<video id='video'
	controls preload='none'
	poster="http://media.w3.org/2010/05/sintel/poster.png">

	<source id='mp4'
	src="http://media.w3.org/2010/05/sintel/trailer.mp4"
	type='video/mp4; codecs="avc1, mp4a"'>

	<source id='ogv'
	src="http://media.w3.org/2010/05/sintel/trailer.ogv"
	type='video/ogg; codecs="theora, vorbis"'>

	<p>Your user agent does not support the HTML5 Video element.</p>

	</video>

	<div id="wikipedia-container">

	</div>
	</body>
	</html>
	(function (Popcorn) {
	Popcorn.plugin( "wikipedia" , (function(){
	var div;

	return {
	_setup : function( options ) {
	div = document.getElementById(options.target);
	// Check for existing frame
	if ( !div ) {
	// if no existing frame, create it.
	div = document.createElement("div");

	this.video.parentNode.appendChild(div);
	}
	},
	start : function( event, options ){
	var url = 'http://' + options.lang + '.wikipedia.org/w/api.php?action=parse&props=text&page=' + options.article + '&format=json&callback=?';

	$.getJSON( url , function( response ) {
	if( response ) {
	//make a link to the document
	var h3 = document.createElement('h3');
	a = document.createElement('a'),

	a.setAttribute('href', 'http://' + options.lang + '.wikipedia.org/' + options.article);
	a.setAttribute('target', '_blank');
	a.innerHTML = response.parse.displaytitle;
	h3.appendChild(a);

	// get the first 140 characters of the wiki content
	var desc = document.createElement('p'),
	text = response.parse.text[""].substr(response.parse.text[""].indexOf('<p>'));

	text = text.replace(/((<(.\|\n)+?>)\|(\((.?)\) )\|(\[(.?)\]))/g, "");
	desc.innerHTML = text.substr(0, ( length \|\| 140 )) + " ...";
	div.appendChild(h3);
	div.appendChild(desc);
	}
	});
	},
	end: function( event, options ){
	div.parentNode.removeChild(div);
	},
	timeupdate: function( event, options ){
	// fire every second
	},
	customevent: function( event, options ){
	console.log('customevt fired')
	}

	}
	})());
	})(Popcorn);