Shared mp4 video shows "download file" instead of playing it on timeline

Question

I have a web page that shows video and people can share it to facebook.

here are the open graph meta tags im using:

<meta property="fb:app_id" content="app_id" />
<meta property="og:url" content="https://www.domain.com/show/245" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Website tile" />
<meta property="og:description" content="Website description" />
<meta property="og:video" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:video:url" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:video:secure_url" content="https://www.domain.com/uploads/09250522_18.mp4" />
<meta property="og:image" content="https://www.domain.com/uploads/thumbnail.png" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />

*not actual domain name and app id, for privacy purpose

When i check the page using sharing debugger, it works okay, no error whatsoever.

The shared video also looks okay, just like normal video. But when i try to play it, it shows "download file" link to the video file instead. Any idea why this is happening? i tried using different video, using 3rd party tools like addThis to generate the share button, but the result is the same.

Answer 1

Just figured it out!

You need to call "og:video:type" before you set video source.

I know it's weird, but this prevents api to set video source to "flash".

So your meta tag should look like this:

<meta property="og:url" content="someurl" />
<meta property="og:type" content="video.other" />
<meta property="og:title" content="yourtitle" />
<meta property="og:image" content="https://url.com/img.png">
<meta property="og:video:type" content="video/mp4"/>
<meta property="og:video" content="https://url.com/video.mp4" />
<meta property="og:video:url" content="https://url.com/video.mp4" />
<meta property="og:video:secure_url" content="https://url.com/video.mp4" />
<meta property="og:video:width" content="videoWidth"/>
<meta property="og:video:height" content="videoHeight"/>
<meta property="fb:app_id" content="id" />