Html5: Video file not found

Question

I have seen other posts and tried different resolutions, but none are working for me.

The video file plays fine for me in Chrome but gives the error

html5: file not found

in IE10 and FF

Originally I just had the following code

<div class="flowplayer">
    <video>
         <source class="video-source" type="video/mp4" src="@Model.VideoURL" />
    </video>
</div>

then I updated code based off this

<div class="flowplayer">
    <video>
        <!-- if Firefox -->  
        <source src="@Model.VideoURL" type="video/ogg" />  
        <!-- if Safari/Chrome-->  
        <source src="@Model.VideoURL" type="video/mp4" />  
        <!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
        <embed src="@Model.VideoURL" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed> 
    </video>
</div>

I am pulling my videos from AWS, video url looks like this

 https://myurl.cloudfront.net/MyGuid

UPDATE

I changed my code per this doc

HTML

<div class="player" data-engine="flash">
   <video preload="none">
      <source type="video/ogg" src="@Model.VideoURL">
      <source type="video/webm" src="@Model.VideoURL">
      <source type="video/mp4" src="@Model.VideoURL">
   </video>
</div>

Javascript

  $(".player").flowplayer({ swf: "/Content/swf/flowplayer.swf" });

this works fine in IE10 and Chomre, but in FF I get the error

html5: Video file not found
'https://myurl.cloudfront.net/myGuid' 
//this is the correct url and the one that is located in @Model.VideoURL

UPDATE 2

I guess firefox doesnt like abosulte urls from other sites here

I tried to setup a custom attribute using this guys suggestion

but I am still getting the same error (html5: Video file not found)

You already figured out you need CORS, but you need to properly set it up for your video files, i.e. cloundfront.net, which in turns means S3 or whatever server cloudfront mirrors. Other than that, you didn't provide enough details to reproduce/diagnose the problem further. — nmaier, Sep 05 '13 at 01:30

score 3 · Accepted Answer · answered Sep 05 '13 at 18:08

The error was not the url or flowplayer. It was how I was storing my data in AWS. I was not specifying content type when I was uploading the video. Chrome was smart enough to figure it out and with flash so was IE, but FF never was.

New file upload code

using (AmazonS3Client client = new AmazonS3Client())
{
     var bucketObject = new PutObjectRequest
     {
          BucketName = fileStorageProvider.BucketName,
          Key = awsFileName,
          ContentType = "video/mp4", //new line of code
          CannedACL = S3CannedACL.PublicRead
     };

     bucketObject.WithInputStream(file.InputStream);
     client.PutObject(bucketObject);
}

Html5: Video file not found

1 Answers1