this is the first time I'm trying to use html5 to display a video. I could view the video on my local machine and wamp, no problem with the code.

However today I loaded the video page online to one of my subdomains eg abc.mysite The video is simply disappeared. I went to check firebugs, the source part of the code is greyed out.

Can someone please lead me to the right direction to make this video work online? Is there anything in cpanel or something I need to configure to make html5 online? Thanks very much.

Here is the code

<div id="item1" class="item">   
<div class="content">
   <a href="#item2" class="panel">
      <video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>

            //below is where greyed out on firebugs!!

             <source src="_video/abc12296_Animation.mp4" type="video/mp4" />
             <source src="_video/abc12296_Animation.webm" type="video/webm" />
             <source src="_video/abc12296_Animation.ogv" type="video/ogg" />
             <p>Your browser does not support HTML5 video.</p>

           //finished grey out!

          </video>  
   </a> 
 </div>
 </div>

  <script>
  $("#my_Video").bind("ended", function(){
    this.play();
  });
  </script> 

this is the first time I'm trying to use html5 to display a video. I could view the video on my local machine and wamp, no problem with the code.

However today I loaded the video page online to one of my subdomains eg abc.mysite. The video is simply disappeared. I went to check firebugs, the source part of the code is greyed out.

Can someone please lead me to the right direction to make this video work online? Is there anything in cpanel or something I need to configure to make html5 online? Thanks very much.

Here is the code

<div id="item1" class="item">   
<div class="content">
   <a href="#item2" class="panel">
      <video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>

            //below is where greyed out on firebugs!!

             <source src="_video/abc12296_Animation.mp4" type="video/mp4" />
             <source src="_video/abc12296_Animation.webm" type="video/webm" />
             <source src="_video/abc12296_Animation.ogv" type="video/ogg" />
             <p>Your browser does not support HTML5 video.</p>

           //finished grey out!

          </video>  
   </a> 
 </div>
 </div>

  <script>
  $("#my_Video").bind("ended", function(){
    this.play();
  });
  </script> 

• javascript
• css
• html
• html5-video

Share Improve this question Follow edited Feb 23, 2012 at 3:24 grumpypanda asked Feb 23, 2012 at 3:03 grumpypandagrumpypanda 57111 gold badge1212 silver badges3737 bronze badges 5

• 1 Make sure the videos are in a subfolder of the file with that HTML (specifically _video/), and the filenames are also accurate. – Kitsune Commented Feb 23, 2012 at 3:11
• can you post your online url.It helps us to test? – Kiran Commented Feb 23, 2012 at 3:12
• maybe it's a case-sensitivity thing? – aletzo Commented Feb 23, 2012 at 3:14
• Thanks for all your replies. The code above is my index page, and the '_video' folder is on the same level as the index.php. the problem is the code is working fine on my local. It is weird the source part of the code has got greyed out online.Unfortunately I can't post the url at the mo, cos it doesn't belong to me, but i can give more code if needed. Aletzo what do you mean by case-sensitivity, where are you referring? Thanks to you all. – grumpypanda Commented Feb 23, 2012 at 3:22
• 1 Well usually, when all things work locally and not in production server, which usually is linux, there is a good chance that a file named Filename.sth is called as filename.sth in the script. Which works locally but not in linux. – aletzo Commented Feb 23, 2012 at 18:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

had a similiar issue, and i had to register the mime types via .htaccess on my server (mp4 didn t work before).

.htaccess-file:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/mp4 .mov
AddType video/webm .webm

check here: http://blog.j6consultants..au/2011/01/10/cross-browser-html5-video-running-under-iis-7-5/

Just an idea but does your server block underscore prefixed folders?

Can you access the videos directly if you type the full URL (i.e. http://abc.mysite./_videos/abc12296_Animation.mp4)?

Also some servers may not serve those specific file types unless you specify you want to and tell the server how to handle it. Can you provide more information on the host you are using?

Edit Since I cannot post ments on the main question. What aletzo is talking about with case sensitivity is that some servers (Linux usually) are case sensitive so FILE.gif is different than file.gif and other servers (usually Windows) do not care about case and FILE.gif and file.gif are actually referring to the same file.