Twitter (and Dailymotion) video onebox autoplays without user interaction

Contribute Bug
12

The reason this isn’t an issue on iPad/Android is because those browsers will not allow a video element with sound to play without user interaction. Desktop browsers do not have this restriction.

These articles have information on when videos can autoplay on iOS/Android:

Muted Autoplay on Mobile - Say goodbye to canvas hacks and animated GIFs!  |  Blog  |  Chrome for Developers

I think this is a change from Twitter/Dailymotion rather than a browser thing (i.e. they’ve set the autoplay attribute on the video elements inside the iframes)

Using the example in my first post, the link I pasted has this tag in the <head>

<link rel="alternate" type="application/json+oembed" href="https://publish.twitter.com/oembed?url=https://twitter.com/UniofNottingham/status/827966230568988672" title="Uni of Nottingham on Twitter: &quot;Highlights from @LakesideArts digital show celebrating #ChineseNewYear 🐓 https://t.co/yWujAUIFNw&quot;">

which links to:

O-embed JSON 
{  
   "url":"https:\/\/twitter.com\/UniofNottingham\/status\/827966230568988672",
   "author_name":"Uni of Nottingham",
   "author_url":"https:\/\/twitter.com\/UniofNottingham",
   "html":"\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EHighlights from \u003Ca href=\"https:\/\/twitter.com\/LakesideArts\"\u003E@LakesideArts\u003C\/a\u003E digital show celebrating \u003Ca href=\"https:\/\/twitter.com\/hashtag\/ChineseNewYear?src=hash\"\u003E#ChineseNewYear\u003C\/a\u003E \uD83D\uDC13 \u003Ca href=\"https:\/\/t.co\/yWujAUIFNw\"\u003Epic.twitter.com\/yWujAUIFNw\u003C\/a\u003E\u003C\/p\u003E&mdash; Uni of Nottingham (@UniofNottingham) \u003Ca href=\"https:\/\/twitter.com\/UniofNottingham\/status\/827966230568988672\"\u003EFebruary 4, 2017\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E",
   "width":550,
   "height":null,
   "type":"rich",
   "cache_age":"3153600000",
   "provider_name":"Twitter",
   "provider_url":"https:\/\/twitter.com",
   "version":"1.0"
}

This is a javascript based embed, which I believe Discourse ignores because it is variable height and so risks breaking scrolling :frowning:

Instead, it seems like Discourse is using the og:video property, which is a link to a page with the video autoplaying. If you visit that URL, and remove the embed_source=facebook parameter then it doesn’t autoplay any more. I suspect twitter have done this so that their videos autoplay when people share them on Facebook.

<meta property="og:video:secure_url" content="https://twitter.com/i/videos/827966230568988672?embed_source=facebook">

Note that currently a link to a twitter video does not match the custom “Twitter Status Onebox”, since the URL is not to a status, but to a video:

So I think the only way this can be solved on the Discourse end is by implementing a “Twitter video” onebox which takes the og:video URL and removes the embed_source=facebook parameter…

Does anyone have any tidier ideas?

2 « J'aime »