Popcorn Fade In With Cues

by TheFiddler

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/wtfpopcorn.mp4" type="video/mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/wtfpopcorn.webm" type="video/webM">
<source src="http://videos.mozilla.org/serv/webmademovies/wtfpopcorn.ogv" type="video/ogg">
</video>
<div id="footnote" class="note-hide"></div>
    <div id="footnote2" class="note-hide"></div>
    <div id="footnote3" class="note-hide"></div>

CSS

.note-hide {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 
}
.note-fadein {
    opacity: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
}

JavaScript

var popcorn = Popcorn( "#video" ),
    flag = true;

//apply fade in class
popcorn.footnote({
    start: 1,

    text: "<ul><li>Bullet 1</li></ul>",
    target: "footnote",
    effect: "applyclass",
    applyclass: "note-fadein"
});


popcorn.footnote({
    start: 5,
  
    text: "<ul><li>Bullet 2</li></ul>",
    target: "footnote2",
    effect: "applyclass",
    applyclass: "note-fadein"
});

popcorn.footnote({
    start: 8,
    text: "<ul><li>Bullet 3</li></ul>",
    target: "footnote3",
    effect: "applyclass",
    applyclass: "note-fadein"
});


popcorn.volume( 0 );
popcorn.play();