Player Card approved - but not playing video inline in Twitter for Android or mobile.twitter.com


#1

Hey team, our player card (video) is approved (thanks!). We’re wanting to pump some ad spend into some videos but can’t until the player experience is consistent for all users. Here’s the problem:

The video plays inline in the tweet in Twitter Web, and Twitter for iOS.

The video does NOT play inline in mobile.twitter.com (Android Chrome, or iOS Safari) and instead links out to the video page on our site (not ideal but acceptable).

The video does NOT play inline in Twitter for Android (4.x or 5.0) and instead links out to our Twitter embed player url page (this is a deal breaker unfortunately).

Here’s an example Tweet for testing: https://twitter.com/punyweakling/status/410549576483876864
And a URL from our video site: http://genero.tv/watch-video/36826/ (which validates).

Any help would be great.


#2

I’m having the same problem. The video plays properly on Twitter web, but in Twitter mobile web it opens the video page on our website (as defined in twitter:url) and on the iOS Twitter app it opens the embed player page (as defined in twitter:player). I thought this might be because I hadn’t properly defined the content attribute of the twitter:player:stream:content_type meta tag, but I believe I fixed that now and still have the same issues.

Example tweet: https://twitter.com/tellagami/status/405420638275260418

Example page with player card: https://tellagami.com/gami/JP615A/

And the player card tags:

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@tellagami">
<meta name="twitter:url" content="https://tellagami.com/gami/JP615A/">
<meta name="twitter:title" content="Check out this Gami!">
<meta name="twitter:description" content="Tellagami is a mobile app that lets you create and share a quick animated message called a Gami.">
<meta name="twitter:image" content="https://tellagami.com/api/1/project_resource/YXK63K94JYTU/thumbnail-81F94EFA-09BB-45D0-A48B-BF300C7F48DD.jpg">
<meta name="twitter:app:name:iphone" content="Tellagami">
<meta name="twitter:app:id:iphone" content="572737805">
<meta name="twitter:app:name:ipad" content="Tellagami">
<meta name="twitter:app:id:ipad" content="572737805">
<meta name="twitter:app:name:googleplay" content="Tellagami">
<meta name="twitter:app:id:googleplay" content="com.tellagami.Tellagami">
<meta name="twitter:player" content="https://tellagami.com/gami/JP615A/embed/">
<meta name="twitter:player:width" content="640">
<meta name="twitter:player:height" content="360">
<meta name="twitter:player:stream" content="https://tellagami.com/api/1/project_resource/C2BTCQAJPM68/video-BDE85B40-0E6C-46F6-A030-B8835BDAF670.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs=&quot;avc1.42E01E1, mp4a.40.2&quot;">

I saw an earlier post about someone having the same issues - any help appreciated!


Video player card - when does the video play inline?
#3

Any ideas?


#4

Sorry for the delay. Our mobile clients know to use the twitter:player:stream. The web knows to use the twitter:player. Everything else has to link to the site to know how to render.


#5

I believe there might be an error in the example on https://dev.twitter.com/docs/cards/types/player-card . According to the document you’re linking to - http://tools.ietf.org/html/rfc6381#page-11 - the avc1 codec should be followed by 6 hexadecimal characters, not 7. I removed the last hex digit, which is for sure wrong. The last two characters indicate the level_idc, as specified in Annex 1 of ITU-T H.264 and ISO/IEC 14496-10:2012. The level_idc is equal to the level number times 10 and since the highest possible value is 5, the highest possible level_idc is 50dec = 32hex. In the example the last two digits are E1hex=225dec.

In short, removing the last 1 in the video codecs tag made it work. If you’re interested in more details on how the codec configuration should be done, have a look at this blog post I found - http://blog.pearce.org.nz/2013/11/what-does-h264avc1-codecs-parameters.html . There’s also useful info in the RFC and the specification itself - http://www.itu.int/rec/T-REC-H.264