Facebook,Twitter,Slack,KakaoTalk,Line에서 영상링크를 인라인으로 재생시키는방법

Posted by on Wednesday, November 25, 2020 Tags: web/ogp   1 minute read

Line

불가능

Kakao Talk

불가능

데스크톱 어플에서는 썸네일 조차 표시안됨

모바일 어플에서는 썸네일,description까지는 동작함

Facebook의 경우

현재는 불가능 페이스북에서 인라인 재생을 막아놈

인라인 재생외 동작확인시 Facebook OGP debug tool에서 디버깅이 가능

Twitter의 경우

웹에서 가능

모바일에서도 가능 사파리에서 동작확인

twitter어플에서는 불가능

필수meta tag설정은 아래와 같다.

 <meta name="twitter:card" content="player">
 <meta name="twitter:site" content="@username">
 <meta name="twitter:title" content="テストタイトル">
 <meta name="twitter:description" content="テストです。">
 <meta name="twitter:image" content="https://xxxx/ki.png">
 <meta name="twitter:player" content="https://www.youtube.com/embed/xxxx?rel=0 amp;controls=0&amp;showinfo=0">
 <meta name="twitter:player:width" content="640">
 <meta name="twitter:player:height" content="360">

vue-cli-vue-head-test 에서 동작확인함.

디버깅은 여기서 Card validator

Slack

유투브링크는 inline재생이 가능한걸로 보아서 가능할지도??

image

단순og:video이나 twitter:xx 설정만으로는 인라인 재생이 안됨

찾아보니까 slack은 YouTube,Spotify같은 유명사이트들을 위한 embed를 따로 제공한다고함.

즉 쩌리 사이트는 불가능..한듯 ㅠ

Unfortunately, this doesn't seem to be supported at the moment! Only Slack's own, natively built embeds are currently possible, such as YouTube, Spotify, etc.

Slack integration 를 참조


메모

meta tag에 기술할 정보와 억세스 도메인명이 틀려도 문제없는가

https://l-youtube.com에 억세스시 meta tag정보가 https://youtube.com여도 문제 없이 동작함(twitter)

twitter:player에 지정한 url에 있는 javascript코드는 동작하는가

조사중

reference: