How to buffer a video hosted on different server in html

2.1k Views Asked by coding_idiot At 12 April 2014 at 13:16

I have a video url of .mp4 file
When I try to play using html5 video tag or video.js, the video never buffers.
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...

Original Q&A

There are 2 best solutions below

Arnaud Leyder On 13 April 2014 at 22:09

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.

coding_idiot On 15 April 2014 at 05:09

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.

How to buffer a video hosted on different server in html

There are 2 best solutions below

Related Questions in HTML

Related Questions in FLASH

Related Questions in HTML5-VIDEO

Related Questions in FLASH-VIDEO

Trending Questions

Popular # Hahtags

Popular Questions