Html5: Video file not found

dan_vitch picture dan_vitch · Sep 4, 2013 · Viewed 17k times · Source

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)

Answer

dan_vitch picture dan_vitch · Sep 5, 2013

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);
}