Videos not play in Firefox

Esau Silva

February 24, 2021 02:02

I'm creating an HTML5 video tag with the source video in MP4. The video plays in Chrome, Edge, Safari but not in Firefox. Below is a screenshot of what Firefox displays

 

I'm thinking the MIME type is not being set correctly on the server, going by this.

I'm forming the video tag manually like this:

<video

controls

disablePictureInPicture

controlslist="nodownload"

poster={`https://res....`}

>

<source

type="video/mp4"

src={`https://res.cloudinary.com/${process.env.GATSBY_CLOUDINARY_USER}/video/upload/f_auto/andrea-silva-design/${sources.video}`}

/>

<p>Sorry, your browser doesn't support embedded videos.</p>

</video>

 

The only transformation I'm doing is f_auto, but even without the transformation, I get the same not working message in Firefox.

 

0

• 

  Eyal Katz Talmon

  February 24, 2021 16:20

  Hey, thanks for reaching out!

  Looking at the logs for your account, the only errors I found in the last 7 days are caused by performing requests without public IDs, for instance - 
  https://res.cloudinary.com/esausilva/video/upload/andrea-silva-design

  If that's the cause of the issue, then it might be that ${sources.video} is evaluated to null in Firefox.
  Could you try printing the value of ${sources.video} to the console? 

  In addition,  could you please share some additional details regarding the issue you've encountered? e.g - Could you provide the relevant public ID? Does the issue happen only with a specific video? 

  Lastly, it would be easier for us to further investigate if you could share the details via a support ticket at https://support.cloudinary.com/hc/en-us/requests/new

  Thanks!

  0
• 

  Esau Silva

  February 25, 2021 01:37 Edited

  The public id should be the name of the video file, i.e. artist-booth-logo

  I just noticed the source of the video returns a 400 Bad Request, but only in Firefox. I see this in the headers of the request

  fastly;dur=101;cpu=1;start=2021-02-24T23:51:00.629Z;desc=miss,rtt;dur=31,cloudinary;dur=37;start=2021-02-24T23:51:00.687Z,cld-id;desc=054b218ea3a06bbce02f666a52f2d1bf,cld-error;desc="public_id (andrea-silva-design/) is invalid"

  I'm not sure why the headers show andrea-silva-design/ as not a valid public_id

  The link forms correctly if I put it in an anchor tag like this

  <a href={`https://res.cloudinary.com/${process.env.GATSBY_CLOUDINARY_USER}/video/upload/andrea-silva-design/${sources.video}`}>Link to the video</a>

  Component source: https://github.com/esausilva/andrea-silva-design/blob/master/src/components/helpers/Video.js

  For what is worth, I'm doing something similar in another component that displays images, and that works correctly on all the browsers (https://github.com/esausilva/andrea-silva-design/blob/master/src/components/helpers/Image.js)

   

  0
• 

  Esau Silva

  February 25, 2021 01:59

  OK, I solved it. It was a problem with my code.

  I added the below check 

  if (sources.video === "") return null;

   

  When the component was first mounting sources.video was an empty string and that was being rendered

   

  Thanks for replying

  0
• 

  Eyal Katz Talmon

  February 25, 2021 11:00

  Thanks for the update! Glad that the issue is now resolved :)

  0
• 

  Alexendra

  February 25, 2021 19:53

  Hi Eyal Katz Talmon,

  I was also facing the same issue but thanks for providing the solution, issue is now resolved.

  0
• 

  Virginia

  January 20, 2022 15:27

  I am glad the issue is resolved now. Thanks 

  0

Post is closed for comments.