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

Added support for loading the player first and then setting the source later.

Browse Source 
Fixed iOS loading issue.
This commit is contained in:
Steve Heffernan
2011-11-30 13:06:32 -08:00
parent 1e284827d7
commit f0154eeab7
3 changed files with 57 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
dev.html
View File

@ -23,10 +23,27 @@
<script src="src/tracks.js"></script> <script src="src/tracks.js"></script>
<script src="flash/swfobject.js"></script> <script src="flash/swfobject.js"></script>
<script type="text/javascript" charset="utf-8">
if (window.location.href.indexOf("?flash") !== -1) {
_V_.options.techOrder = ["H5swf"]
}
</script>
</head> </head>
<body> <body>
<video id="dyn" class="video-js vjs-default-skin" autoplay controls width="640" height="264">
</video>
<script type="text/javascript" charset="utf-8">
_V_("dyn");
setTimeout(function(){
_V_("dyn").src("http://video-js.zencoder.com/oceans-clip.mp4");
}, 2000);
</script>
<video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" <video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png" poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{}'> data-setup='{}'>

21
src/player.js
View File

@ -99,9 +99,24 @@ _V_.Player = _V_.Component.extend({
}); });
} }
// Loop through playback technologies (HTML5, Flash) and check for support // If there are no sources when the player is initialized,
// Then load the best source. // load the first supported playback technology.
this.src(this.options.sources); if (!this.options.sources || this.options.sources.length == 0) {
for (var i=0,j=this.options.techOrder;i<j.length;i++) {
var techName = j[i],
tech = _V_[techName];
// Check if the browser supports this technology
if (tech.isSupported()) {
this.loadTech(techName);
break;
}
}
} else {
// Loop through playback technologies (HTML5, Flash) and check for support
// Then load the best source.
this.src(this.options.sources);
}
}, },
// Cache for video property values. // Cache for video property values.

39
src/tech.js
View File

@ -35,9 +35,9 @@ _V_.HTML5 = _V_.PlaybackTech.extend({
var source = options.source; var source = options.source;
if (this.el.currentSrc != source.src) { if (source && this.el.currentSrc != source.src) {
this.el.src = source.src; this.el.src = source.src;
} else { } else if (source) {
player.triggerEvent("loadstart"); player.triggerEvent("loadstart");
} }
@ -58,16 +58,18 @@ _V_.HTML5 = _V_.PlaybackTech.extend({
}, },
createElement: function(){ createElement: function(){
var html5 = _V_.HTML5,
player = this.player,
var el = this.player.tag, // Reuse original tag for HTML5 playback technology element // Reuse original tag for HTML5 playback technology element
html5 = _V_.HTML5, el = player.tag,
playerOptions = this.player.options; newEl;
// Check if this browser supports moving the element into the box. // Check if this browser supports moving the element into the box.
// On the iPhone video will break if you move the element, // On the iPhone video will break if you move the element,
// So we have to create a brand new element. // So we have to create a brand new element.
if (html5.supports.movingElementInDOM === false) { if (html5.supports.movingElementInDOM === false) {
var newEl = _V_.createElement("video", { newEl = _V_.createElement("video", {
id: el.id, id: el.id,
className: el.className className: el.className
}); });
@ -79,11 +81,10 @@ _V_.HTML5 = _V_.PlaybackTech.extend({
// Update tag settings, in case they were overridden // Update tag settings, in case they were overridden
_V_.each(["autoplay","preload","loop","muted","poster"], function(attr){ _V_.each(["autoplay","preload","loop","muted","poster"], function(attr){
el[attr] = playerOptions[attr]; el[attr] = player.options[attr];
}, this); }, this);
return el; return el;
}, },
setupTriggers: function(){ setupTriggers: function(){
@ -234,17 +235,17 @@ _V_.H5swf = _V_.PlaybackTech.extend({
var source = options.source, var source = options.source,
placeHolder = this.el = _V_.createElement("div", { id: player.el.id + "_temp_h5swf" }), placeHolder = this.el = _V_.createElement("div", { id: player.el.id + "_temp_h5swf" }),
objId = player.el.id+"_h5swf_api", objId = player.el.id+"_h5swf_api",
playerOptions = player.options;
flashvars = { flashvars = {
readyFunction: "_V_.H5swf.onSWFReady", readyFunction: "_V_.H5swf.onSWFReady",
eventProxyFunction: "_V_.H5swf.onSWFEvent", eventProxyFunction: "_V_.H5swf.onSWFEvent",
errorEventProxyFunction: "_V_.H5swf.onSWFErrorEvent", errorEventProxyFunction: "_V_.H5swf.onSWFErrorEvent",
src: source.src, autoplay: playerOptions.autoplay,
autoplay: player.options.autoplay, preload: playerOptions.preload,
preload: player.options.preload, loop: playerOptions.loop,
loop: player.options.loop, muted: playerOptions.muted,
muted: player.options.muted, poster: playerOptions.poster
poster: player.options.poster
}, },
params = { params = {
@ -259,10 +260,14 @@ _V_.H5swf = _V_.PlaybackTech.extend({
'class': 'vjs-tech' 'class': 'vjs-tech'
}; };
// If source was supplied pass as a flash var.
if (source) {
flashvars.src = source.src;
}
player.el.appendChild(placeHolder); player.el.appendChild(placeHolder);
swfobject.embedSWF(options.swf || this.swf, placeHolder.id, "480", "270", "9.0.124", "", flashvars, params, attributes); swfobject.embedSWF(options.swf || this.swf, placeHolder.id, "480", "270", "9.0.124", "", flashvars, params, attributes);
}, },
setupTriggers: function(){ setupTriggers: function(){
@ -272,7 +277,7 @@ _V_.H5swf = _V_.PlaybackTech.extend({
play: function(){ this.el.vjs_play(); }, play: function(){ this.el.vjs_play(); },
pause: function(){ this.el.vjs_pause(); }, pause: function(){ this.el.vjs_pause(); },
src: function(src){ this.el.vjs_src(src); }, src: function(src){ this.el.vjs_src(src); },
load: function(){ this.el.vjs_load(); }, load: function(){ this.el.vjs_load(); _V_.log("load"); },
poster: function(){ this.el.vjs_getProperty("poster"); }, poster: function(){ this.el.vjs_getProperty("poster"); },
buffered: function(){ buffered: function(){
@ -290,7 +295,7 @@ _V_.H5swf = _V_.PlaybackTech.extend({
// Create setters and getters for attributes // Create setters and getters for attributes
(function(){ (function(){
var api = _V_.H5swf.prototype, var api = _V_.H5swf.prototype,
readWrite = "src,preload,currentTime,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted".split(","), readWrite = "preload,currentTime,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted".split(","),
readOnly = "error,currentSrc,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks".split(","), readOnly = "error,currentSrc,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks".split(","),
callOnly = "load,play,pause".split(","); callOnly = "load,play,pause".split(",");
// Overridden: buffered // Overridden: buffered