Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

.mp4 Not Playing In Firefox Even With Flash Fallback #526

Closed
riveramj opened this issue May 22, 2013 · 38 comments
Closed

.mp4 Not Playing In Firefox Even With Flash Fallback #526

riveramj opened this issue May 22, 2013 · 38 comments
Labels

Comments

@riveramj
Copy link

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:

[00:46:24.615] Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://video-js.zencoder.com/oceans-clip.mp4 failed. @ file:///Users/mjr/dev/workspace/mercury/portal/src/main/webapp/templates-hidden/videoJsTest.html
[00:46:24.615] All candidate resources failed to load. Media load paused. @ file:///Users/mjr/dev/workspace/mercury/portal/src/main/webapp/templates-hidden/videoJsTest.html
[00:46:24.901] GET http://video-js.zencoder.com/oceans-clip.png [HTTP/1.0 304 Not Modified 41ms]
[00:46:24.901] GET http://vjs.zencdn.net/4.0/video-js.swf [HTTP/1.1 304 Not Modified 17ms]

The play button shows but if you click it nothing happens and in the console I get

[00:46:59.464] TypeError: this.b.vjs_play is not a function @ http://vjs.zencdn.net/4.0/video.js:91
[00:46:59.464] [(new TypeError("this.b.vjs_play is not a function", "http://vjs.zencdn.net/4.0/video.js", 91))]

Code:

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.0/video.js"></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>
@dmlap
Copy link
Member

dmlap commented May 22, 2013

@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().

@riveramj
Copy link
Author

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>

@Eckerdecker
Copy link

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

@kylegilman
Copy link

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/

@heff
Copy link
Member

heff commented May 31, 2013

Thanks for the examples. They're breaking for me too. Looking into it.

@heff
Copy link
Member

heff commented May 31, 2013

@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.

@kylegilman
Copy link

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

@heff
Copy link
Member

heff commented May 31, 2013

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.

@kylegilman
Copy link

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.

@heff
Copy link
Member

heff commented May 31, 2013

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

@kylegilman
Copy link

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

@heff
Copy link
Member

heff commented May 31, 2013

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.

@kylegilman
Copy link

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.

@heff
Copy link
Member

heff commented May 31, 2013

No problem. Glad we were able to figure out that much at least.

@heff
Copy link
Member

heff commented May 31, 2013

@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 heff closed this as completed May 31, 2013
@riveramj
Copy link
Author

riveramj commented Jun 1, 2013

@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>

@fourthfloor
Copy link

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/

@DeanMarkTaylor
Copy link

@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)

@fourthfloor
Copy link

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

@DeanMarkTaylor
Copy link

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"

@riveramj
Copy link
Author

@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.

@kylegilman
Copy link

@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

@Ern-st
Copy link

Ern-st commented Jun 26, 2013

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.

@chuckcarpenter
Copy link

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.

@heff
Copy link
Member

heff commented Aug 20, 2013

@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.

@chuckcarpenter
Copy link

@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

@heff
Copy link
Member

heff commented Aug 21, 2013

@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.

@rcrooks
Copy link
Contributor

rcrooks commented Aug 21, 2013

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.

@chuckcarpenter
Copy link

@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.

@droplab
Copy link

droplab commented Sep 20, 2013

I'm also experiencing the same issue.

@ridmahajan
Copy link

I'm facing the same problem, @chuckcarpenter, could you find a solution / workaround?
Any help would be greatly appreciated!

@chuckcarpenter
Copy link

@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.

@miguelb
Copy link

miguelb commented Oct 7, 2013

I too see this issue on FireFox. Any thoughts?

@rsadwick
Copy link

rsadwick commented Oct 8, 2013

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.

@AaronThornton00
Copy link

Firefox 26.0 doesn't like this :(

@GoOz
Copy link

GoOz commented Jan 13, 2014

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

@heff
Copy link
Member

heff commented Mar 4, 2014

jsbin and code pen don't like Flash for some reason. I have to use jsfiddle whenever testing the flash player.

@arifulhb
Copy link

@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

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests