CODEWITHSUNDEEP
htmlvideohtml5-videomov
Banana Code
Banana Code

Reputation: 817

HTML video tag read MOV file as an audio file in Google Chrome

Here is a MOV video file URL which was copied from my iPhone 8.
https://www.yangfamily.tw/attachments/IMG_3049.MOV

Then I tried to play this video on Chrome, the html code like below:

<video width="320" height="240" controls>
  <source src="https://www.yangfamily.tw/attachments/IMG_3049.MOV">
  Your browser does not support the video tag.
</video>

Ok, it was loaded successfully. But no frame showed, only the controls displayed.

And then I right clicked the controls, the menu showed that it is an AUDIO file, not a video file. Right clicked on the controls

It's indeed a video file, and I can play this video file and show the frames successfully on any other player. Why this MOV video file was read as an audio file in Google Chrome? (Chrome Version: 90.0.4430.93 64-bits)

Any idea?

Upvotes: 2

Views: 3916

Answers (2)

Doug Sillars
Doug Sillars

Reputation: 1765

This video is encoded as h.265 HEVC.

ffprobe is a free open source tool (online version: https://ffprobe.a.video/probe?url=https%3A%2F%2Fwww.yangfamily.tw%2Fattachments%2FIMG_3049.MOV)

when I look at the codec:

codec_long_name : H.265 / HEVC (High Efficiency Video Coding)

h265 is only supported in Safari. its a patent/royalty thing. You should re-encode the video as h264 - and serve that version (99.9% browser support).

Chrome CAN play the audio track:

codec_long_name : AAC (Advanced Audio Coding)

so thats why you get audio only in Chrome.

Upvotes: 5

Dat Boi
Dat Boi

Reputation: 683

In your <source> tag, you need to add type='video/mp4'

Like this:

<source src="https://www.yangfamily.tw/attachments/IMG_3049.MOV" type='video/mp4'>

Upvotes: 0

Related Questions