Closed riveramj closed 11 years ago
@heff did some investigation of this issue yesterday and thinks it might be related to timing issues with the SWF and how we handle interaction with video.js before it is ready. To work around this in the meantime, you can try adding a short delay (50-100ms) after the ready event fires before calling play()
.
I tried adding a window timeout (in several places actually), but it still states
[15:50:05.699] TypeError: this.el_.vjs_play is not a function @ static/js/videojs/video.dev.js:4673
also, I tried the local setup from the main site and got a different error
[15:55:26.726] ReferenceError: videojs is not defined @ test.html:10
with the text
"No video with supported format and MIME type found" over the video
Also I tested the standard hosted version (above) in IE and it worked fine.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/static/js/videojs/video-js.css" rel="stylesheet">
<script src="/static/js/videojs/video.dev.js"></script>
<script type="text/javascript">
videojs.options.flash.swf = "/static/js/videojs/video-js.swf"
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
</body>
</html>
I use VideoJS to play only flv files (for the moment). I set html like this:
<video id="vidJS" class="video-js vjs-default-skin" controls preload="auto" width="700" height="700" data-setup="{}">
<source type="video/mp4" src="video.flv"></source>
</video>
And javascript/jQuery:
$(function(){
var vidJS = videojs('vidJS', {techOrder:['flash','html5']}).ready(function(){
$('#vidJS .vjs-big-play-button').show();
});
});
Yesterday that was working nearly perfect (only have to wait a bunch of minutes before the ready event fired in IE9 and IE10, giving an error about an undefined method vjs_play when clicking play button before the ready event). That's why i show the play button only when the player is ready, and that make me think that a timer is not the solution.
This morning after updating firefox (21.0) this is not working anymore on firefox, firebug saying that the HTTP Content-Type text/plain is not managed (strangely pointing a line in my jQuery file and then logging a videojs error object)
For the moment i fixed the bug in firefox by setting the html structure with javascript before the call to videojs.
$(function(){
$('#container').html('<video id="vidJS" class="video-js vjs-default-skin" controls preload="auto" width="700" height="700" data-setup="{}"><source type="video/mp4" src="video.flv"></source></video>');
var vidJS = videojs('vidJS', {techOrder:['flash','html5']}).ready(function(){
$('#vidJS .vjs-big-play-button').show();
});
});
Hope this can help
I am also seeing this error, but I can't figure out why it happens on some pages but not others. I don't get it on my own website at http://www.kylegilman.net/ , but one of my users noticed it at http://cscmensministry.com/latest-video/ and I was able to reproduce it on my development site by switching my WordPress theme. In Firefox, this video gives me the 'this.b.vjs_play is not a function' error http://www.kylegilman.net/dev/2013/05/01/test-video/
Thanks for the examples. They're breaking for me too. Looking into it.
@kylegilman it looks like your page is pointing to an old version of the swf (3.0.2)? You may want to try updating that. It also looks like you or someone has changed something so that there's a 'fluid-width-video-wrapper' around the flash object. That might be affecting it.
I'm having trouble reproducing this error using video.js 4.0.3 and the test cases above. I see the "video/mp4" is not supported
warning in firefox, but the video still plays for me using flash. I think the warning is from firefox reading the tag too quickly before video.js can modify it, but it still works, for me at least in every browser I try.
Would someone be able to put together a reduced test case where this bug can be reproduced?
I made a change in #553 (now in master) that may affect this issue, but I'm not sure.
Yes, I have several JavaScript customizations, including that fluid width wrapper. I'll try to make a simpler test case, but I also want to figure out why it fails on some pages and not on others. All of the examples I gave you use the same customization, but it works at http://www.kylegilman.net/ .
What version number is the SWF supposed to be? I'm using the SWF from the 4.0.3 package. When I open that SWF file in Flash Player and right-click on it I see "VideoJS Flash Component v3.0.2" I get the same result when I right-click on http://vjs.zencdn.net/4.0.3/video-js.swf
Ah, I just realized that about the flash swf, and updated the version in the repo to 4.0.0. So nevermind on that.
Yeah, it'd be great if we can narrow down the test case. It'll make it a lot easier to debug.
On May 31, 2013, at 11:11 AM, kylegilman notifications@github.com wrote:
Yes, I have several JavaScript customizations, including that fluid width wrapper. I'll try to make a simpler test case, but I also want to figure out why it fails on some pages and not on others. All of the examples I gave you use the same customization, but it works at http://www.kylegilman.net/ .
What version number is the SWF supposed to be? I'm using the SWF from the 4.0.3 package. When I open that SWF file in Flash Player and right-click on it I see "VideoJS Flash Component v3.0.2" I get the same result when I right-click on http://vjs.zencdn.net/4.0.3/video-js.swf
— Reply to this email directly or view it on GitHub.
Ok, I've updated http://www.kylegilman.net/dev/2013/05/01/test-video/ to remove my custom JavaScript, custom skin, surrounding DIVs, and I'm not setting the videojs.options.flash.swf variable any more. It still works fine in Chrome & Safari and I get the same problem in Firefox.
It's still hard to tell what's unique about this case. Can we recreate it from scratch. Is this working for you in firefox? http://jsbin.com/okofet/1/edit
Oh, that's so much easier to work with. Sorry I was making it hard on you. I got to the bottom of it by selectively adding in JavaScripts. Both of the pages that had problems are loading fitVids.js which does not seem to play nicely with Video.js.
Your link works fine. This one I just made does not work in Firefox http://jsbin.com/ozicix/1/edit
Ah yeah, something about fitvids. I don't know exactly what it's doing, but it's breaking the reference between video.js and the flash object somehow. You might submit this example to fitvids.
Yes, this does not seem like your problem. I don't use fitVids for my own responsive resizing, but it seems widespread enough that it's going to cause me trouble. Thanks for taking the time to work through this. I really appreciate it.
No problem. Glad we were able to figure out that much at least.
@Eckerdecker Try using video/flv
for the type of your flv files. video/mp4
will try to feed those files to Chrome/Safari which do support MP4s but not FLVs. If you're still getting the bug, can you whittle it down to a test case like this one? http://jsbin.com/okofet/1/edit
@riveramj I can't reproduce the case. Can you check if it's still happening with the latest version (4.0.3)?
Closing for now, will re-open when we get some more specifics.
@heff Still no luck on mp4 source via self hosted or CDN Version in FF.
From dev tools:
[15:41:23.835] ReferenceError: videojs is not defined @ test.html:10 [15:41:23.837] Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://video-js.zencoder.com/oceans-clip.mp4 failed. @ test.html [15:41:23.837] All candidate resources failed to load. Media load paused. @ test.html
Another example is if you download the zip from the main site, and remove all sources except mp4, it won't load. I know FF can't handle mp4 but I thought this should fail it over to flash.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/static/js/videojs/video-js.css" rel="stylesheet">
<script src="/static/js/videojs/video.dev.js"></script>
<script type="text/javascript">
videojs.options.flash.swf = "/static/js/videojs/video-js.swf"
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
</body>
</html>
While it is seemingly working in JS Bin, taking the same exact code elsewhere and it no longer works. This should be reopened in my opinion as it is not yet functioning completely. Example can be found at: http://www.gahannatv.com/video/
@fourthfloor I just tried your page and the jsbin previously mentioned and both "work for me" (clicking play button causes video to play) in Firefox with the following user agent string:
[20:42:55.722] "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0"
(HTML5 playback)
I can see the jsbin perfectly fine but cannot view the video. I get no error message except when refreshing the page for a brief moment that suggests I download Chrome or update Flash. I have the latest version of Flash currently.
This is my user agent string:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:21.0) Gecko/20100101 Firefox/21.0
I just tested on a Mac, although with an slighted older version of Firefox, video played correctly but used Flash fallback. The console output consisted of the following (as expected):
[22:21:15.623] Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://vjs.zencdn.net/v/oceans.mp4 failed. @ http://www.gahannatv.com/video/
[22:21:15.623] All candidate resources failed to load. Media load paused. @ http://www.gahannatv.com/video/
And the "user agent" for reference purposes is this:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:20.0) Gecko/20100101 Firefox/20.0"
@DeanMarkTaylor Try http://jsbin.com/obozoz/2/edit in FF. It works in chrome but not in FF.
Its the base code I provided above and still can't get to work. its just a mp4 file that should be converted to a flash container.
@riveramj Your example isn't loading Flash because you're using relative links in the head. Since the link is <script src="/static/js/videojs/video.dev.js"></script>
the browser is trying to find http://jsbin.com/static/js/videojs/video.dev.js
which doesn't exist, so Video.js isn't loaded and it doesn't load Flash.
Try this instead http://jsbin.com/obozoz/5/edit
I just had the same problem, I can see that you're opening the file via. the local filesystem (File:///) in your opening post. If that's not the case anymore, ignore the following.
Chrome is allowed to open files that way (File:///), but I don't think Flash SWFs are?
Anyway I got mine working by cd'ing into the folder and running a python -m SimpleHTTPServer
Then when I opened the site at localhost:8000 the flash fallback was working as expected in FF.
edit: wrong port number.
I am having the same issue as noted above. I then tried at the jsbin noted from @heff (http://jsbin.com/okofet/1/edit) and that is not working either. Since that is from the CDN (I also tried with the updated 4.1 version) that it's not working on FF, especially on OSX. Tested on IE in a VM and that was working as expected. I think this needs to be reopened.
[Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:23.0) Gecko/20100101 Firefox/23.0]
console warnings below:
Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://vjs.zencdn.net/v/oceans.mp4 failed.
...atch(c){try{navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin&&...
video.js (line 94)
All candidate resources failed to load. Media load paused.
@chuckcarpenter Does this link work for you? http://jsfiddle.net/N8Zs5/1/
I'm having issues with jsbin and the flash fallback, but jsfiddle seems to handle it fine. The link you posted on jsbin is broken for me too, but the jsfiddle, which uses, the same setup, is working for me. It also works for me when I load the same files locally, both the CDN version and the original source files.
@heff, there was no difference with those two but the link you added does work for me. Bizarre, as the jsbin link has similar issues as to what we are experiences while integrating to our app. Basically, works everywhere fine but FF on OSX. Tried uninstalling/reinstalling Flash and many other things looking for conflicts. I'd almost thought the issue was isolated, but your example makes me wonder otherwise. I notice that jsfiddle loads in your scripts different, so I tried codepen, where I actually get a failure as well. Same errors as above and as what we have in our app.
Does this work for you? http://codepen.io/anon/pen/ctwlj
@chuckcarpenter, code pen doesn't work for me either. They're all loading vjs inside an iframe, so i'm wondering if it has to do with that, maybe some security error. Is your case similar to that in any way?
On Aug 20, 2013, at 2:58 PM, Chuck Carpenter notifications@github.com wrote:
@heff, the only difference with those two but the link you added does work for me. Bizarre, as the jsbin link has similar issues as to what we are experiences while integrating to our app. Basically, works everywhere fine but FF on OSX. Tried uninstalling/reinstalling Flash and many other things looking for conflicts. I'd almost thought the issue was isolated, but your example makes me wonder otherwise. I notice that jsfiddle loads in your scripts different, so I tried codepen, where I actually get a failure as well. Same errors as above and as what we have in our app.
Does this work for you? http://codepen.io/anon/pen/ctwlj
— Reply to this email directly or view it on GitHub.
I wrote to them about this recently -- it is the iframe and security they have set up. I forget all the details, but looks like you can't do video players there unless they change something.
Robert
Robert Crooks | Director of Learning Services | Brightcove, Inc. || P: 617.245-5090 | M: 617.584.6128 | Twitter: http://twitter.com/BrightcoveLearn/
On Aug 21, 2013, at 12:34 PM, Steve Heffernan notifications@github.com wrote:
@chuckcarpenter, code pen doesn't work for me either. They're all loading vjs inside an iframe, so i'm wondering if it has to do with that, maybe some security error. Is your case similar to that in any way?
On Aug 20, 2013, at 2:58 PM, Chuck Carpenter notifications@github.com wrote:
@heff, the only difference with those two but the link you added does work for me. Bizarre, as the jsbin link has similar issues as to what we are experiences while integrating to our app. Basically, works everywhere fine but FF on OSX. Tried uninstalling/reinstalling Flash and many other things looking for conflicts. I'd almost thought the issue was isolated, but your example makes me wonder otherwise. I notice that jsfiddle loads in your scripts different, so I tried codepen, where I actually get a failure as well. Same errors as above and as what we have in our app.
Does this work for you? http://codepen.io/anon/pen/ctwlj
— Reply to this email directly or view it on GitHub.
— Reply to this email directly or view it on GitHub.
@heff, my case is not similar in that we're using iFrames. I did try the same code that is in that Pen on a simple page and local runserver. Seems to work. Our application is Backbone and RequireJS, so I'm not sure if we're running into issues as to when videoJS renders through RequireJS and when FF errors. I'll look more and see if I can narrow the issue down more. Thanks for the responses and from @rcrooks as well.
I'm also experiencing the same issue.
I'm facing the same problem, @chuckcarpenter, could you find a solution / workaround? Any help would be greatly appreciated!
@ridmahajan, we tried to figure it out, but were forced to release with Mediaelement.js instead. I like this project, but we didn't have time to debug for a solution.
I too see this issue on FireFox. Any thoughts?
Here's a working bare bones example that works in Firefox 24. It's forced into Flash tech:
http://jsfiddle.net/rsadwick/cfMak/
How are you implementing videojs? Without an isolated example, it's hard to debug the issue.
Firefox 26.0 doesn't like this :(
I have the same issue here. Firefox 26 (stable) to 28 (Aurora).
Tested the following urls with Firefox 28.0.
http://jsbin.com/obozoz/5/edit NOK (JS error "TypeError: a.h is undefined"). http://codepen.io/anon/pen/ctwlj NOK (JS error "TypeError: a.h is undefined"). http://jsfiddle.net/rsadwick/cfMak/ or http://jsfiddle.net/N8Zs5/1/ OK
jsbin and code pen don't like Flash for some reason. I have to use jsfiddle whenever testing the flash player.
@rsadwick Your jsfiddle example still helping in 2015 :) You saved a lot of my time. Though for me, the issue wasn't with Firefox but with Safari (8.0.4) in Mac 10.10.2
Reopening of #343
I tried the below code in FF 21 (current) and it does not work. I had 20 but that didnt work either. I also have the latest flash installed and working. "Plug-in version 11.7.700.203 is installed" according to adobe. Also on OS X 10.8 (ML)
from FF inspector:
The play button shows but if you click it nothing happens and in the console I get
Code: