web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-02 06:32:07 +02:00
Code Releases Activity

Updated compare page.

Browse Source
This commit is contained in:
Steve Heffernan 2011-12-07 16:44:21 -08:00
parent e4f6bbb0b2
commit 39f7bead50
7 changed files with 34 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.sh
View File

@ -38,4 +38,4 @@ cp flash/video-js.swf dist/video-js.swf
cp build/files/README.md dist/README.md
cp build/files/demo.html dist/demo.html
cp LICENSE.txt dist/LICENSE.txt
cp LGPLv3-LICENSE.txt dist/LGPLv3-LICENSE.txt

5
compare/compare.css
View File

@ -1,6 +1,7 @@
body { font-size: 11px; font-family: 'Helvetica Neue', helvetica, arial; }
body { background-color: #ccc; font-size: 11px; font-family: 'Helvetica Neue', helvetica, arial; }
#main { width: 1000px; margin: 10px auto 0; }
td, th { text-align: left; vertical-align: top; }
td.info-col { width: 240px; }
td.data { text-align: right; }
td.data { text-align: right; }
span.na { color: red; }
span.undefined { color: #999; }

61
compare/compare.html
View File

@ -15,50 +15,30 @@
<script src="https://getfirebug.com/firebug-lite.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
<script src="../src/core.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/lib.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/ecma.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/json.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/api.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/events.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/core.js"></script>
<script src="../src/lib.js"></script>
<script src="../src/ecma.js"></script>
<script src="../src/json.js"></script>
<script src="../src/tracks.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/components.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/behaviors.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/seekBar.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/volume.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/behaviors/texttrackdisplays.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="../src/controls/bigPlay.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/controls/bar.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/controls/subtitlesBox.js" type="text/javascript" charset="utf-8"></script> -->
<script src="../src/tech/html5.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/tech/flowplayer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/autoload.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/log.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/tech/h5swf.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/tech/youtube.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/component.js"></script>
<script src="../src/player.js"></script>
<script src="../src/tech.js"></script>
<script src="../src/controls.js"></script>
<script src="../src/events.js"></script>
<script src="../src/tracks.js"></script>
<script src="../flash/swfobject.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="../flash/swfobject.js"></script>
<link rel="stylesheet" href="compare.css" type="text/css">
<script type="text/javascript" src="compare.js"></script>
</head>
<body>
<div id="main">
<table border="0" cellspacing="5" cellpadding="5">
<tr><th colspan="2">HTML5</th><th colspan="2">H5Swf</th><th colspan="2">YouTube</th></tr>
<tr><th colspan="2">HTML5</th><th colspan="2">H5Swf</th></tr>
<tr>
<td colspan="2">
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="480" height="198"
@ -74,13 +54,6 @@
<!-- <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'> -->
</video>
</td>
<td colspan="2">
<video id="vid3" class="video-js vjs-default-skin" controls preload="none" width="480" height="198">
<source src="http://www.youtube.com/watch?v=YjaZNYSt7o0" type='video/youtube'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
</video>
</td>
</tr>
<tr>
<td class="info-col">
@ -95,14 +68,8 @@
<td class="info-col">
<div id="h5swf_events"></div>
</td>
<td class="info-col">
<table id="youtube_props" border="0" cellspacing="0" cellpadding="0"></table>
</td>
<td class="info-col">
<div id="youtube_events"></div>
</td>
</tr>
</table>
</div>
</body>
</html>

20
compare/compare.js
View File

@ -1,6 +1,8 @@
$(function(){
var tech, i,
techList = ["html5","h5swf","youtube"],
_V_.H5swf.prototype.swf = "../flash/video-js.swf";
$(function(){
var tech, i, tname, player,
techList = ["HTML5","H5swf"],
props = "error,currentSrc,networkState,buffered,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoWidth,videoHeight,textTracks,preload,currentTime,defaultPlaybackRate,playbackRate,autoplay,loop,controls,volume,muted,defaultMuted,poster".split(","),
methods = "play,pause,src,load,canPlayType,addTextTrack",
notUsed = "mediaGroup,controller,videoTracks,audioTracks,defaultPlaybackRate";
@ -8,11 +10,13 @@ $(function(){
for (i=0; i < techList.length; i++) {
tech = techList[i];
tname = tech.toLowerCase();
var player = _V_("vid"+(i+1), { "techOrder":[tech] });
player = _V_("vid"+(i+1), { "techOrder":[tech] });
_V_.each(_V_.HTML5.events, function(evt){
player.addEvent(evt, _V_.proxy(tech, function(evt){
player.addEvent(evt, _V_.proxy(tname, function(evt){
var eventsId = "#"+this+"_events",
type = evt.type,
prev = $(eventsId+" div").first();
@ -26,9 +30,9 @@ $(function(){
}));
});
var propTable = $("#"+tech+"_props");
var propTable = $("#"+tname+"_props");
_V_.each(props, function(prop){
propTable.append("<tr><th>"+prop+"</th><td id='"+tech+prop+"' class='data'></td></tr>")
propTable.append("<tr><th>"+prop+"</th><td id='"+tname+prop+"' class='data'></td></tr>")
});
setInterval(_V_.proxy(player, function(){
@ -47,7 +51,7 @@ $(function(){
} catch(e) {
result = "<span class='na'>N/A</span>";
}
$("#"+this.currentTechName+prop).html(result);
$("#"+this.techName+prop).html(result);
}));
}), 500);

2
design/video-js.css
View File

@ -18,7 +18,7 @@ REQUIRED STYLES (be careful overriding)
}
/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-js .vjs-tech { top: 0; left: 0; width: 100%; height: 100%; }
/* Fullscreen Styles */
body.vjs-full-window {

1
src/lib.js
View File

@ -297,6 +297,7 @@ _V_.log = function(){
{console.log();return window.console;}catch(err){return window.console={};}})());
// Offset Left
// getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
if ("getBoundingClientRect" in document.documentElement) {
_V_.findPosX = function(el) {
var box;

2
src/player.js
View File

@ -450,6 +450,8 @@ _V_.Player.prototype.extend({
this.videoIsFullScreen = true;
if (typeof this.el.webkitRequestFullScreen == 'function') {
this.el.webkitRequestFullScreen();
} else if (this.el.mozRequestFullScreen == 'function') {
this.el.mozRequestFullScreen();
} else if (this.supportsFullScreen()) {
this.apiCall("enterFullScreen");
} else {