I’ve seen some other topics dedicated to this, but no conclusive solution. I’ve stripped down the problem to the simplest page possible:
When sharing this page on Twitter and viewing on the iOS app, the video card will continue to show the blue play button during playback. You are also not able to tap any controls in the player (i.e. to pause the playback).
Twitter is loading and playing the “twitter:player:stream” URL, which is just a simple MP4 file. No additional page elements or meta tags are influencing this, as far as I can tell. Here are the meta tags being used:
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@ndroopy">
<meta name="twitter:title" content="Sample Player Card">
<meta name="twitter:description" content="Hello. I don't know if this will work!">
<meta name="twitter:image" content="https://assets-jpcust.jwpsrv.com/thumbs/xJ7Wcodt-720.jpg">
<meta name="twitter:player" content="https://support-static.jwplayer.com/iframes/preview-final.html">
<meta name="twitter:player:width" content="320">
<meta name="twitter:player:height" content="260">
<meta name="twitter:player:stream" content="https://support-static.jwplayer.com/content/advertising/static-tag/jwplayer-10s.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mp4a.40.2"">
I’ve also uploaded a screencast of the issue: https://www.dropbox.com/s/dqf4tdiqzfqdwl9/twitter_player-card.mp4?dl=0
Any help would be extremely appreciated. Thanks!