2
  1. I have a video url of .mp4 file
  2. When I try to play using html5 video tag or video.js, the video never buffers.
  3. But when I try the same link in browser it downloads the video.

Code :

<html>
    <head>
        <link href="http://vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
        <script src="http://vjs.zencdn.net/4.5/video.js"></script>
    </head>
    <body>
        <video width="320" height="240" controls>
        <source src="http://vl.mccont.com/ItemFiles/%5BFrom%20www.metacafe.com%5D%2011334027.29120961.4.mp4?__gda__=1397298243_b382c45af7c5325b3f7443f57412d04c 
" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <video id="my_video_1" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
 data-setup="{}">
 <source src="http://vl.mccont.com/ItemFiles/%5BFrom%20www.metacafe.com%5D%2011334027.29120961.4.mp4?__gda__=1397298243_b382c45af7c5325b3f7443f57412d04c" type='video/mp4'>

</video>
    </body>
</html>

I am unable to figure/google out the issue. Please help.

EDIT

The above code works well in firefox and the video gets played. It's not working with chrome, seems like a plugin issue or such...

coding_idiot
  • 13,526
  • 10
  • 65
  • 116

2 Answers2

2

I have the same issue you described on my side with your code. Works everywhere except for Chrome. What I found is that if I host your mp4 on one of my servers it is working fine ... even in Chrome.

Based on that I am suspecting a server side issue ie the server from where your mp4 are delivered is not properly tuned for HTML5 video. A common source for this issue is with MIME types. I would suggest you double check this area.

"MIME Types Rear Their Ugly Head" section from here can show you how to do this (other related articles on Google also deal with the subject for different flavor of servers).

Let us know if it works for you.

Arnaud Leyder
  • 6,674
  • 5
  • 31
  • 43
0

I modified the video code as below :

<video id="movie" width="320" height="240" preload controls>

  <source src="http://c6969c880f66ae12a3e2-87bf587b08b2b7b4541aa273825a564d.r1.cf1.rackcdn.com/11334027.29120961.4.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value="config={'clip': {'url': 'http://c6969c880f66ae12a3e2-87bf587b08b2b7b4541aa273825a564d.r1.cf1.rackcdn.com/11334027.29120961.4.mp4', 'autoPlay':false, 'autoBuffering':true}}" />

  </object>
</video>

and now it works for all browsers. Although the intension to use video.js ain't fulfilled.

coding_idiot
  • 13,526
  • 10
  • 65
  • 116
  • You did change the src of your source tag for a server provider that better support HTML5 video delivery (rackcdn in your case) hence your problem was solved. Though I could make your new URL work with videojs in Chrome it was laggy. – Arnaud Leyder Apr 15 '14 at 06:29
  • @Florestan06 Sorry, I forgot that I've changed the video-url & hence, it's not the right answer. Looking for a plugin or something, that can fix it in chrome. – coding_idiot Apr 15 '14 at 12:55
  • Well we can think about detecting user agent and forcing the flash fallback for Chrome but that would not be ideal. For example Chrome on Android would get stuck with no flash and then you will need to detect Android ... – Arnaud Leyder Apr 15 '14 at 13:01
  • I have delivered HTML5 video to Chrome successfully in the past but it requires having a proper mp4 file and a server with proper mime types. If you have no control over the server and you cannot host the file elsewhere you are stuck with half-satisfactory solution. For example try this URL http://provideoencoding.com/stack/test.mp4 of your video and it should work fine in any of your example. – Arnaud Leyder Apr 15 '14 at 13:06
  • There is maybe something wrong as well with your mp4 video file as Chrome struggles to play it when there is both a video tag and videojs on the same page. The reference mp4 file from videojs http://vjs.zencdn.net/v/oceans.mp4 works fine everywhere with multiple instances. – Arnaud Leyder Apr 15 '14 at 13:20
  • @Florestan06 I am more concerned about, why it doesn't work in Chrome and works else-where and hence, I don't think it's the .mp4 that's the issue, there must be some fix to make it work in Chrome. Can you provide a flash-fallback, that'll make it work in Chrome in desktop for now ? – coding_idiot Apr 15 '14 at 14:49
  • For me it would need to be fixed either with the file format or the server side (well this needs to be investigated further anyway). If you want a flash fallback look at strobe from adobe which is free: http://osmf.org/dev/2.0gm/setup.html – Arnaud Leyder Apr 15 '14 at 15:13