2010-10-22 07:33:00 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>HTML5 Video Player</title>
|
|
|
|
|
|
|
|
|
|
<!-- Include the VideoJS Library -->
|
2010-11-14 21:41:04 +02:00
|
|
|
<script src="src/video.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="src/html5.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="src/behaviors.js" type="text/javascript" charset="utf-8"></script>
|
2010-11-22 06:14:12 +02:00
|
|
|
<script src="src/lib.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="src/video-js.jquery.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<!-- <script src="flowplayer/video-js.flowplayer.js" type="text/javascript" charset="utf-8"></script> -->
|
2010-11-14 21:41:04 +02:00
|
|
|
|
2010-10-22 07:33:00 +03:00
|
|
|
<script type="text/javascript">
|
2010-11-23 01:35:23 +02:00
|
|
|
VideoJS.setupAllWhenReady();
|
2010-10-22 07:33:00 +03:00
|
|
|
VideoJS.DOMReady(function(){
|
2010-11-23 01:35:23 +02:00
|
|
|
// myPlayer = VideoJS.setup("example_video_1", {
|
|
|
|
|
// // controlsHiding: true,
|
|
|
|
|
// // controlsBelow: false,
|
|
|
|
|
// // showControlsAtStart: true
|
|
|
|
|
// });
|
|
|
|
|
// myPlayer.activateElement(document.getElementById("scrub"), "playProgressBar");
|
|
|
|
|
// var vid = document.getElementById("example_video_1"),
|
|
|
|
|
// attrTable = document.getElementById("attributes"),
|
|
|
|
|
// attrNames = ["error", "networkState", "readyState", "preload", "buffered",
|
|
|
|
|
// "seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
|
|
|
|
|
// "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
|
|
|
|
|
// "ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
|
|
|
|
|
// ],
|
|
|
|
|
// attrs = {};
|
|
|
|
|
//
|
|
|
|
|
// for(var i=0,j=attrNames.length; i<j; i++) {
|
|
|
|
|
// var row = _V_.createElement("tr");
|
|
|
|
|
// var th = _V_.createElement("th");
|
|
|
|
|
// th.innerHTML = attrNames[i];
|
|
|
|
|
// attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
|
|
|
|
|
// row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
|
|
|
|
|
// attrTable.appendChild(row);
|
|
|
|
|
// }
|
|
|
|
|
//
|
|
|
|
|
// setInterval(function(){
|
|
|
|
|
// for(var i=0,j=attrNames.length; i<j; i++) {
|
|
|
|
|
// attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
|
|
|
|
|
// }
|
|
|
|
|
// }, 100);
|
|
|
|
|
//
|
|
|
|
|
// var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
|
|
|
|
|
// "loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
|
|
|
|
|
// // "timeupdate",
|
|
|
|
|
// "ended", "ratechange", "durationchange","volumechange"
|
|
|
|
|
// ],
|
|
|
|
|
// eventsList = document.getElementById("events");
|
|
|
|
|
//
|
|
|
|
|
// for(var i=0,j=events.length; i<j; i++) {
|
|
|
|
|
// _V_.addListener(vid, events[i], function(){
|
|
|
|
|
// eventsList.innerHTML = this + "\n" + eventsList.innerHTML
|
|
|
|
|
// }.context(events[i]));
|
|
|
|
|
// }
|
2010-10-22 07:33:00 +03:00
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
2010-11-06 00:53:35 +02:00
|
|
|
<style type="text/css" media="screen">
|
|
|
|
|
#attributes { width: 300px; float: left; }
|
|
|
|
|
#events { width: 300px; height: 500px; float: left; }
|
|
|
|
|
</style>
|
|
|
|
|
|
2010-10-22 07:33:00 +03:00
|
|
|
<!-- Include the VideoJS Stylesheet -->
|
2010-11-06 02:32:13 +02:00
|
|
|
<link rel="stylesheet" href="../video-js.css" type="text/css" media="screen" title="Video JS">
|
2010-11-10 08:41:09 +02:00
|
|
|
<link rel="stylesheet" href="../skins/tube.css" type="text/css" media="screen" title="Video JS">
|
|
|
|
|
<link rel="stylesheet" href="../skins/hu.css" type="text/css" media="screen" title="Video JS">
|
|
|
|
|
<link rel="stylesheet" href="../skins/vim.css" type="text/css" media="screen" title="Video JS">
|
2010-10-22 07:33:00 +03:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<!-- Begin VideoJS -->
|
2010-11-12 03:40:22 +02:00
|
|
|
<div id="scrub" style="background: #000; height: 10px;"></div>
|
2010-11-14 21:41:04 +02:00
|
|
|
|
2010-11-12 05:33:33 +02:00
|
|
|
<div class="video-js-box">
|
2010-10-22 07:33:00 +03:00
|
|
|
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
|
2010-11-13 02:23:35 +02:00
|
|
|
<video data-subtitles="../demo-subtitles.srt" id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="none" poster="http://video-js.zencoder.com/oceans-clip.png">
|
2010-10-22 07:33:00 +03:00
|
|
|
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
2010-11-08 03:31:33 +02:00
|
|
|
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
|
2010-11-23 01:35:23 +02:00
|
|
|
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
|
|
|
|
<!-- <track kind="subtitles" src="../demo-subtitles.srt" srclang="en-US" label="English"></track> -->
|
|
|
|
|
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
|
|
|
|
|
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
|
|
|
|
|
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
|
|
|
|
|
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
|
|
|
|
|
<param name="allowfullscreen" value="true" />
|
|
|
|
|
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
|
|
|
|
|
<!-- Image Fallback. Typically the same as the poster image. -->
|
|
|
|
|
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
|
|
|
|
|
title="No video playback capabilities." />
|
|
|
|
|
</object>
|
|
|
|
|
</video>
|
|
|
|
|
<!-- Download links provided for devices that can't play video in the browser. -->
|
|
|
|
|
<p class="vjs-no-video"><strong>Download Video:</strong>
|
|
|
|
|
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
|
|
|
|
|
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
|
|
|
|
|
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
|
|
|
|
|
<!-- Support VideoJS by keeping this link. -->
|
|
|
|
|
<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- End VideoJS -->
|
|
|
|
|
|
|
|
|
|
<div class="video-js-box">
|
|
|
|
|
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
|
|
|
|
|
<video data-subtitles="../demo-subtitles.srt" id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="none" poster="http://video-js.zencoder.com/oceans-clip.png">
|
|
|
|
|
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
|
|
|
|
|
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
|
|
|
|
|
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
2010-11-22 06:14:12 +02:00
|
|
|
<!-- <track kind="subtitles" src="../demo-subtitles.srt" srclang="en-US" label="English"></track> -->
|
2010-10-22 07:33:00 +03:00
|
|
|
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
|
|
|
|
|
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
|
|
|
|
|
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
|
|
|
|
|
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
|
|
|
|
|
<param name="allowfullscreen" value="true" />
|
|
|
|
|
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
|
|
|
|
|
<!-- Image Fallback. Typically the same as the poster image. -->
|
|
|
|
|
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
|
|
|
|
|
title="No video playback capabilities." />
|
|
|
|
|
</object>
|
|
|
|
|
</video>
|
|
|
|
|
<!-- Download links provided for devices that can't play video in the browser. -->
|
|
|
|
|
<p class="vjs-no-video"><strong>Download Video:</strong>
|
|
|
|
|
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
|
|
|
|
|
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
|
|
|
|
|
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
|
|
|
|
|
<!-- Support VideoJS by keeping this link. -->
|
|
|
|
|
<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- End VideoJS -->
|
|
|
|
|
|
2010-11-06 00:53:35 +02:00
|
|
|
<a href="#" onclick="document.getElementById('example_video_1').currentTime = 10; return false;">Click</a>
|
|
|
|
|
|
|
|
|
|
<table id="attributes">
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<textarea id="events"></textarea>
|
2010-10-22 07:33:00 +03:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
