зеркало из https://github.com/mozilla/popcorn-js.git
97 строки
2.5 KiB
HTML
Executable File
97 строки
2.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Popcorn Code Plugin Demo</title>
|
|
|
|
<script src="../../popcorn.js"></script>
|
|
<script src="popcorn.code.js"></script>
|
|
<script>
|
|
var output;
|
|
|
|
document.addEventListener( "DOMContentLoaded", function () {
|
|
output = document.getElementById( "output" );
|
|
var $ = function( id ) {
|
|
return document.getElementById( id.substring( 1 ) );
|
|
};
|
|
|
|
var p = Popcorn( "#video" )
|
|
|
|
.code({
|
|
start: 1,
|
|
end: 3,
|
|
onStart: function( options ) {
|
|
$( "#test1" ).innerHTML = "Yes";
|
|
}
|
|
})
|
|
|
|
.code({
|
|
start: 5,
|
|
end: 8,
|
|
onStart: function( options ) {
|
|
$( "#test2a" ).innerHTML = "Yes";
|
|
},
|
|
onEnd: function ( options ) {
|
|
$( "#test2b" ).innerHTML = "Yes";
|
|
}
|
|
})
|
|
|
|
.code({
|
|
start: 10,
|
|
end: 14,
|
|
onStart: function( options ) {
|
|
$( "#test3a" ).innerHTML = "Yes";
|
|
},
|
|
onFrame: (function() {
|
|
var count = 0;
|
|
return function ( options ) {
|
|
$( "#test3b" ).innerHTML = "Yes (count = " + ++count + ")";
|
|
}
|
|
})(),
|
|
onEnd: function ( options ) {
|
|
$( "#test3c" ).innerHTML = "Yes";
|
|
}
|
|
})
|
|
|
|
.volume( 0 )
|
|
.play();
|
|
}, false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1 id="qunit-header">Popcorn Code Plugin Demo</h1>
|
|
<p>Arbitrary JavaScript functions are run.</p>
|
|
<div>
|
|
<video id="video"
|
|
autobuffer
|
|
preload="auto"
|
|
controls
|
|
width="250px"
|
|
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 style="width:700px">
|
|
<div>Code Plugin Output</div>
|
|
<table cellpadding="5px">
|
|
<tr><th>Test</th><th>Completed</th></tr>
|
|
<tr><td>Test 1 - onStart (1s)</td><td><span id="test1">No</span></td></tr>
|
|
<tr><td>Test 2a - onStart (5s)</td><td><span id="test2a">No</span></td></tr>
|
|
<tr><td>Test 2b - onEnd (8s)</td><td><span id="test2b">No</span></td></tr>
|
|
<tr><td>Test 3a - onStart (10s)</td><td><span id="test3a">No</span></td></tr>
|
|
<tr><td>Test 3b - onFrame (10s-14s)</td><td><span id="test3b">No</span></td></tr>
|
|
<tr><td>Test 3c - onEnd (14s)</td><td><span id="test3c">No</span></td></tr>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|