Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fixed two bugs #154

Merged
merged 2 commits into from

2 participants

@sirudog

Hi,

I was integrating videojs player to my drupal site, and found these small bugs which caused the following problems:

  • flash-fallback could not pick up sources from tags, since the code was not case-insensitive, so the src of the video could not be included into flashvars.
  • the code could not completely remove the tags after processing them, because the loop was based on a dynamically changing condition, making it end prematurely (before it could remove all the source tags from video tag)

Please review these changes.
Thanks

sirudog added some commits
@sirudog sirudog Fix bug in loop for removing source/track nodes from video element.
"j.length" changed in each loop step, causing source/track nodes being left in DOM.
5c2a3cb
@sirudog sirudog Fixed bug of traversing video source/track child nodes by making node…
…Name comparison case-insensitive.

It caused the issue of flash-fallback not being able to discover the source of the video and embed it into flashvars.
4df3d84
@heff
Owner

Thanks for the commit. This wouldn't hurt to add either way, but I'm not understanding what the issue with Flash is. Flash would be getting the source from options.sources just like HTML5, and I'm pretty sure nodeName should always be capitalized. Do you have a live example of what you were running in to?

I do not have a live example, but here is the code I used. I build up the player dynamically, so my nodeNames are lower-cased. Maybe the fact that I manually create the player causes this issue. I don't see why nodeName is always capitalized.

SiteAnimation.CreateVideoTag = function (videoSources) {
var tag, sourceTag;

tag = document.createElement("video");
tag.id = SiteAnimation.VideoId;
tag.className = "video-js vjs-default-skin";

$j.each(videoSources, function (index, sourceUrl) {
    // here I used lower-case nodeName, as I was not aware of that the library expects capitalized nodename
    sourceTag = document.createElement("source");
    sourceTag.src = sourceUrl;
    sourceTag.type = SiteAnimation.ParseVideoSourceType(sourceUrl);
    tag.appendChild(sourceTag);
});

return tag;

}

Then I called SiteAnimation.VideoPlayer = V(SiteAnimation.VideoId, { "controls": true, "autoplay": false, "preload": "none" });
to build my player.
I tested it in IE8, where flash-fallback is used as the tech, and none of the source tags could be picked up. I started to debug it, and I saw that the player code compares the nodeName to "SOURCE". I am not sure if html5 tech has the same issue...

Hope this helps to clarify my scenario.

sorry, the underscores bordering V was wiped out from the last line of code above.

Owner

Aha, cool. Other browsers convert to uppercase automatically, but it looks like IE doesn't (including IE9, so it'd affect HTML5 too). Thanks for digging into the issue.

@heff
Owner

Heh, that makes sense. Interesting I haven't seen this yet. Doesn't seem to be an issue in most browsers when using 3 sources. Thanks for this.

You're very welcome. Thanks for this wonderful player. I'am glad I could help.

@heff
Owner

Commented on the second.

@heff heff merged commit 43fc61f into videojs:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 18, 2012
  1. @sirudog

    Fix bug in loop for removing source/track nodes from video element.

    sirudog authored
    "j.length" changed in each loop step, causing source/track nodes being left in DOM.
  2. @sirudog

    Fixed bug of traversing video source/track child nodes by making node…

    sirudog authored
    …Name comparison case-insensitive.
    
    It caused the issue of flash-fallback not being able to discover the source of the video and embed it into flashvars.
This page is out of date. Refresh to see the latest.
Showing with 6 additions and 5 deletions.
  1. +6 −5 src/player.js
View
11 src/player.js
@@ -58,9 +58,10 @@ _V_.Player = _V_.Component.extend({
// Empty video tag sources and tracks so the built in player doesn't use them also.
if (tag.hasChildNodes()) {
- for (var i=0,j=tag.childNodes;i<j.length;i++) {
- if (j[i].nodeName == "SOURCE" || j[i].nodeName == "TRACK") {
- tag.removeChild(j[i]);
+ var nrOfChildNodes = tag.childNodes.length;
+ for (var i=0,j=tag.childNodes;i<nrOfChildNodes;i++) {
+ if (j[0].nodeName.toLowerCase() == "source" || j[0].nodeName.toLowerCase() == "track") {
+ tag.removeChild(j[0]);
}
}
}
@@ -141,7 +142,7 @@ _V_.Player = _V_.Component.extend({
if (this.tag.hasChildNodes()) {
for (var c,i=0,j=this.tag.childNodes;i<j.length;i++) {
c = j[i];
- if (c.nodeName == "SOURCE") {
+ if (c.nodeName.toLowerCase() == "source") {
options.sources.push({
src: c.getAttribute('src'),
type: c.getAttribute('type'),
@@ -149,7 +150,7 @@ _V_.Player = _V_.Component.extend({
title: c.getAttribute('title')
});
}
- if (c.nodeName == "TRACK") {
+ if (c.nodeName.toLowerCase() == "track") {
options.tracks.push({
src: c.getAttribute("src"),
kind: c.getAttribute("kind"),
Something went wrong with that request. Please try again.