Skip to content

Instantly share code, notes, and snippets.

@humphd
Created January 29, 2013 21:50
Show Gist options
  • Select an option

  • Save humphd/4668251 to your computer and use it in GitHub Desktop.

Select an option

Save humphd/4668251 to your computer and use it in GitHub Desktop.
Imagining a Markup API version of http://popcorn.webmadecontent.org/imv_
<!DOCTYPE html>
<head>
<base href="https://popcorn.webmaker.org/templates/basic/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Popcorn Maker</title>
<!-- Other stuff in head... -->
<script src="../../../external/popcorn-js/popcorn.js"></script>
<!-- Mozilla x-tags -->
<script type="text/javascript" src="x-tag.js"></script>
<!-- Webmaker x-tags (e.g., map, wikipedia, ...) -->
<script type="text/javascript" src="webmaker-x-tags.js"></script>
</head>
<body>
<div id="container" class="container">
<div id="video-container" class="video">
<!-- data-popcorn attribute tells Popcorn.js to find/process this media -->
<video id="video" data-popcorn>
<source src="https://videos-cdn.mozilla.net/serv/webmademovies/getstarted.mp4">
<source src="https://videos-cdn.mozilla.net/serv/webmademovies/getstarted.webm">
</video>
</div>
<!-- Exported Markup API -->
<section id="timeline-items">
<div data-when="0-7.68228"
class="fade centre layer0"
left=26.96%
top=37.78%>
Use the Media tab to import your audio or video files
</div>
<!-- TODO: how to do shadowColor, backgroundColor? -->
<div data-when="7.7081-9.92415"
class="fade centre bold layer0"
left=29.11%
top=36.50%
width=50%>
Open the events tab to begin adding\nevents to your media
</div>
<!-- TODO: how to do shadowColor, backgroundColor, font stuff? -->
<div data-when="9.94228-10.8806"
class="fade centre bold layer1"
left=29.11%
top=36.50%
width=50%>
Delete these events after importing\nyour media!
</div>
<!-- Pause Plugin x-tag -->
<x-pause data-when="10.54121"></x-pause>
<img data-when="0-11.22"
class="fade layer3"
src="http://something.com/image.png"
width=50.71%
height=27.61%
top=0
left=0>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment