1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-14 11:23:30 +02:00
video.js/dev/flowplayer/test.html
Steve Heffernan 81aef822db Adding docs.
Changed Video.player to Video.fn (like jQuery), so player can be used to get the player for a video.
2010-12-16 12:55:52 -08:00

111 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Video Player: flowplayer</title>
<!-- Include the VideoJS Library -->
<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>
<script src="../src/lib.js" type="text/javascript" charset="utf-8"></script>
<!-- <script type="text/javascript" src="flowplayer-3.2.4.min.js"></script> -->
<script type="text/javascript" src="video-js.flowplayer.js"></script>
<script type="text/javascript">
VideoJS.DOMReady(function(){
myPlayer = VideoJS.setup("example_video_1", {
controlsHiding: true,
controlsBelow: false,
showControlsAtStart: true,
playerFallbackOrder: ["flash", "html5", "links"]
});
myPlayer.activateElement(document.getElementById("scrub"), "loadProgressBar");
// 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++) {
// vid.addEventListener(events[i], function(){
// eventsList.innerHTML = this + "\n" + eventsList.innerHTML
// }.context(events[i]), false);
// }
});
</script>
<style type="text/css" media="screen">
#attributes { width: 300px; float: left; }
#events { width: 300px; height: 500px; float: left; }
</style>
<!-- Include the VideoJS Stylesheet -->
<link rel="stylesheet" href="../../video-js.css" type="text/css" media="screen" title="Video JS">
<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">
</head>
<body>
<!-- Begin VideoJS -->
<div id="scrub" style="background: #000; height: 10px;"></div>
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" 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"' />
<!-- <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. -->
<div class="vjs-flash-fallback" width="640" height="264" href="http://video-js.zencoder.com/oceans-clip.mp4"></div>
</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 -->
<a href="#" onclick="document.getElementById('example_video_1').currentTime = 10; return false;">Click</a>
<table id="attributes">
</table>
<textarea id="events"></textarea>
</body>
</html>