Twitch.tv force html5 player

Hi,

Does anybody know of a simpler way of forcing twitch to play the streams in html5 other than installing greasy/tampermonkey and installing this script ?
https://github.com/EchoDev/TwitchHTML5
https://github.com/EchoDev/TwitchHTML5/wiki

This solution works but I would like to avoid greasymonkey if I can. Thank you in advance for your help.

I have never before seen that method for implementing an HTML5 video player, and yes… it is possible to create a video player that doesn’t use greasemonkey… and as the wiki describes their chosen method also is imperfect (can’t handle secure/unsecure mixed content without disabling security altogether in the browser).

There are numerous HTML5 Video Player tutorials and code on the Internet today, with plenty of choice compared to a year and a couple years ago when I first looked at this.

Typically, instead of running the whole thing locally in a script which the TwitchTV coders are doing, the basic, unconfigured player should be downloaded and made available with a <script src = url/script.js> tag in the header, then invoked in the body of the webpage, specifying configuration properties. This easily works entirely within the common browser security model without special settings

I skimmed the TwitchTV script to see if they’re doing anything special with their player, and I didn’t notice anything so if they wanted to tread the common, well used path instead of doing things their own way, it should be possible.

TSU

Thanks for the reply. Yes I know they can fix it but for some reason I guess they don’t want to (probably to retain the ability to show adds). I’ve read somwhere that it works in Safari without any tricks (don’t know if this is true).

But I’m not that interested in what TwitchTV should do. I want to know what I can do to have the streams play in html5 without using greasymonkey ? :slight_smile:

On Wed 01 Jun 2016 07:46:02 AM CDT, glistwan wrote:

tsu2;2780403 Wrote:
> I have never before seen that method for implementing an HTML5 video
> player, and yes… it is possible to create a video player that
> doesn’t use greasemonkey… and as the wiki describes their chosen
> method also is imperfect (can’t handle secure/unsecure mixed content
> without disabling security altogether in the browser).
>
> There are numerous HTML5 Video Player tutorials and code on the
> Internet today, with plenty of choice compared to a year and a couple
> years ago when I first looked at this.
>
> Typically, instead of running the whole thing locally in a script
> which the TwitchTV coders are doing, the basic, unconfigured player
> should be downloaded and made available with a <script src =
> url/script.js> tag in the header, then invoked in the body of the
> webpage, specifying configuration properties. This easily works
> entirely within the common browser security model without special
> settings
>
> I skimmed the TwitchTV script to see if they’re doing anything special
> with their player, and I didn’t notice anything so if they wanted to
> tread the common, well used path instead of doing things their own
> way, it should be possible.
>
> TSU
Thanks for the reply. Yes I know they can fix it but for some reason I
guess they don’t want to (probably to retain the ability to show adds).
I’ve read somwhere that it works in Safari without any tricks (don’t
know if this is true).

But I’m not that interested in what TwitchTV should do. I want to know
what I can do to have the streams play in html5 without using
greasymonkey ? :slight_smile:

Hi
Not sure, but is H.264 present/active at;
https://www.youtube.com/html5
http://html5test.com/
Background: http://forums.opensuse.org/showthread.php?t=517897


Cheers Malcolm °¿° LFCS, SUSE Knowledge Partner (Linux Counter #276890)
openSUSE Leap 42.1|GNOME 3.16.2|4.1.21-14-default
If you find this post helpful and are logged into the web interface,
please show your appreciation and click on the star below… Thanks!

Yes it’s active. It works fine with both chromium and firefox and the user script enabled. It’s not working without it.
I would think it wouldn’t work even with the greasymonkey userscript if H.264 was not active. (I may be wrong though)

I took one more look at this, as far as I’m willing to go without writing the actual code to re-invent their implementation…

First, the basic process of invoking a video player is pretty much as I described, the HTML player itself is nothing special and can be any implementation. You can use theirs or any other like the following which is freely open source
http://docs.videojs.com/
If you want more descriptive documentation, the Mozilla Developer Network
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

So, embedding a video player in a web page nowadays is not difficult and should not be difficult to implement. The issue then is what TwitchTV is doing to enhance the basic video player, and this is the Greasemonkey script
https://github.com/EchoDev/TwitchHTML5/blob/master/waitForKeyElements.js

Although I haven’t seen that code before (Probably not surprising), it looks like a standardized way to handle AJAX content. If you’re not familiar with AJAX, it’s the ability for the client to interactively communicate with the Server using Javascript to dynamically build customized content to display. I don’t see anything customized by and specific to TwitchTV in that Greasemonkey script, only generic methods to send/receive data . This suggests to me that just about any AJAX code from anywhere else might be close to a drop in replacement for what Greasemonkey is doing… And if the TwitchTV people are ready to progress beyond simple startup and getting off the ground any way possible to improving their app, this is probably a good candidate to start.

The last thing I didn’t look at is where the User specific variables are coming from, but a good guess is that is generated by the User logging into TwitchTV and setting up User preferences, and likely based on the specific webpage the User is currently viewing. It’d be easy to collect User data from a specific web page and inject that data into the AJAX process.

Bottom line is that what you heard about Safari is probably not true unless Safari has maybe an AJAX plugin that automatically can process AJAX without invoking in the website code(remember, I described the Greasemonkey processing as entirely generic), but that’d be pure speculation. I’ve not seen such a plugin anywhere but can imagine such a thing as viable. I’d also be suspicious about such a plugin, 'Way back when AJAX was first conceived I speculated about AJAX security vulnerabilities which were later verified and steps were implemented to secure (one was to run AJAX only over SSL but not everybody does that).

TSU

One last post about what you can try…

  1. Save a TwitchTV page to your local system.
  2. Open the saved webpage in your favorite text editor
  3. Add the following to the <head></head> section of the webpage and save.
<script source="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js">
  1. Open your local webpage in your web browser.

Don’t know if this will work, but it does make an AJAX library available to the webpage.
Whether the webpage will actually find the libarary and know how to pass the required User data to the libarary is unknown.

TSU

Thanks for all the suggestions. Will try them out. I think there must be a simpler way because there is a plugin for Kodi/XBMC that plays streams from TwitchTV :

This plugin also works like a charm :slight_smile: Based on the FAQ I guess it’s written in python.

That’s interesting, verifying my suspicion that the AJAX functionality can be implemented as a plugin.

But, without closely inspecting the code I also caution that AJAX can be implemented by Dev without an understanding of potential security issues so would recommend that use of a plugin like this should be disabled when not in use.

TSU

I agree. Tried the method of inserting

<script source="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js">

and it doesn’t work (unless I’m inserting it in the wrong place).

The greasymonkey script is no longer needed :slight_smile:
From the script github redme:
https://github.com/EchoDev/TwitchHTML5
"
Script not maintained anymore, HTML5 works by default on Twitch now.
#TwitchHTML5
Twitch.tv Full HTML5 Player
"