Skip to content

Instantly share code, notes, and snippets.

@scien
Last active October 24, 2015 01:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scien/1aa67fc1e45de313d05c to your computer and use it in GitHub Desktop.
Save scien/1aa67fc1e45de313d05c to your computer and use it in GitHub Desktop.
twitch player - 2015-10-23
@scien
Copy link
Author

scien commented Oct 23, 2015

input params to Player

location.search.slice(1)
ex: "channel=monstercat&autoplay=false&muted=true&controls=true&branding=false"

@scien
Copy link
Author

scien commented Oct 23, 2015

var params = location.search.slice(1);
var player = new Twitch.video.Player("video-playback", params);

@scien
Copy link
Author

scien commented Oct 23, 2015

events: video_init

{
    "event": "video_init",
    "properties": {
        "domain": "maestro.io",
        "play_session_id": "KdMeTjRztzJ3imnXSV5lkU11mPnIZYER",
        "referrer_url": "",
        "url": "http://static.maestro.io/twitch/player/index.html?channel=monstercat&mute=true",
        "token": "809576468572134f909dffa6bd0dcfcf",
        "browser": "5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36",
        "flash_version": "MAC 19,0,0,226",
        "referrer_domain": "",
        "app_version": "2.2.3",
        "referrer_host": "",
        "os": "Mac OS 10.11.1",
        "host": "static.maestro.io",
        "time": 1445627083.392,
        "platform": "web",
        "backend": "flash",
        "channel": "monstercat",
        "game": "Music",
        "live": true,
        "player": "popout",
        "ui_version": "0.3.6",
        "device_id": "VmhUC7EHk73huMKIFvrzWRRBWpgG5DX8",
        "distinct_id": "VmhUC7EHk73huMKIFvrzWRRBWpgG5DX8",
        "session_device_id": "XUeSgcQuvdYdV5eApTjll9FhD1rTqYMu",
        "localstorage_device_id": "M1WkES8tRo9SUmHd0esBqAhUyKL9pffa",
        "login": null,
        "content_mode": "live"
    }
}

@scien
Copy link
Author

scien commented Oct 23, 2015

crossdomain

<cross-domain-policy>
  <allow-access-from domain="*.justin.tv" secure="false" to-ports="*" />
  <allow-access-from domain="*.staging.justin.tv" secure="false" to-ports="*" />
  <allow-access-from domain="*.jtvnw.net" secure="false" to-ports="*" />
  <allow-access-from domain="localhost" to-ports="*" />
  <allow-access-from domain="*.twitch.tv" secure="false" to-ports="*" />
  <allow-access-from domain="*.staging.twitch.tv" secure="false" to-ports="*" />
  <allow-access-from domain="*.newjtv.com" secure="false" to-ports="*" />
  <allow-http-request-headers-from domain="*.justin.tv" secure="false" headers="*" />
  <allow-http-request-headers-from domain="*.staging.justin.tv" secure="false" headers="*" />
  <allow-http-request-headers-from domain="*.jtvnw.net" secure="false" headers="*" />
  <allow-http-request-headers-from domain="localhost" secure="false" headers="*" />
  <allow-http-request-headers-from domain="*.twitch.tv" secure="false" headers="*" />
  <allow-http-request-headers-from domain="*.staging.twitch.tv" secure="false" headers="*" />
  <allow-http-request-headers-from domain="*.newjtv.com" secure="false" headers="*" />
</cross-domain-policy>

@scien
Copy link
Author

scien commented Oct 23, 2015

@scien
Copy link
Author

scien commented Oct 23, 2015

104.130.155.154 player.twitch.tv

@scien
Copy link
Author

scien commented Oct 23, 2015

@scien
Copy link
Author

scien commented Oct 23, 2015

loadChannel, loadVideo, videoSeek, playVideo, pauseVideo, setVolume, setQuality, startPlaybackStatistics, stopPlaybackStatistics

@scien
Copy link
Author

scien commented Oct 23, 2015

subscribe" === r ? u(e.source)
"play" === r ? n.play()
"pause" === r ? n.pause()
"channel=" === r ? n.setChannel(i[0])
"video=" === r ? n.setVideo(i[0])
"currentTime=" === r ? n.setCurrentTime(parseFloat(i[0]))
"quality=" === r ? n.setQuality(i[0])
"muted=" === r ? n.setMuted(!!i[0])
"volume=" === r && n.setVolume(parseFloat(i[0]))

@scien
Copy link
Author

scien commented Oct 24, 2015

unmute

+            player.postMessage {
+              namespace: 'player.embed.server'
+              method: 'muted='
+              args: [false]
+            }, '*'

set volume

+            player.postMessage {
+              namespace: 'player.embed.server'
+              method: 'volume='
+              args: [amount / 100]
+            }, '*'

seek

+          player.postMessage {
+            namespace: 'player.embed.server'
+            method: 'currentTime='
+            args: [seconds]
+          }, '*'

play

+          player.postMessage {
+            namespace: 'player.embed.server'
+            method: 'play'
+          }, '*'

pause

+          player.postMessage {
+            namespace: 'player.embed.server'
+            method: 'pause'
+          }, '*'

mute

+            player.postMessage {
+              namespace: 'player.embed.server'
+              method: 'muted='
+              args: [true]
+            }, '*'

listen for events

+          $el.html teacup.render ( ->
+            div "##{options.player_id}",  ->
+              url = 'http://player.twitch.tv?' + (
+                "#{k}=#{encodeURIComponent v}" for k, v of {
+                  branding: false
+                  controls: false
+                  muted: options.volume is 0
+                  t: Math.floor options.start
+                  video: options.id
+                  volume: options.volume
+
+                  # autoplay: options.autoplay # this doesn't work yet
+                }
+              ).join '&'
+
+              iframe {
+                align: 'middle'
+                frameborder: '0'
+                height: height
+                scrolling: 'no'
+                src: url
+                width: width
+              }
+          )
+          player = $el.find('iframe')[0]
+          player = player.contentWindow or player
+          setPlayer player
+
+          # browser compatibility
+          if window.addEventListener
+            method = 'addEventListener'
+            event = 'message'
+          else
+            method = 'attachEvent'
+            event 'onmessage'
+
+          # listen for events
+          window[method] event, ((e) ->
+            if e.source is player
+              key = if e.message then 'message' else 'data'
+              {method, args} = e[key]
+              switch method
+
+                # when 'adcompanionrendered'
+                # when 'adend'
+                # when 'adstart'
+                # when 'bufferedchange'
+                # when 'canplay'
+                # when 'isspectre'
+                # when 'loadedchannel'
+                # when 'loadeddata'
+                # when 'loadedmetadata'
+                # when 'loadedvideo'
+                # when 'loadstart'
+                # when 'playing'
+                # when 'progress'
+                # when 'qualitieschange'
+                # when 'qualitychange'
+                # when 'restricted'
+                # when 'seeked'
+                # when 'seeking'
+                # when 'segmentchange'
+                # when 'statschange'
+                # when 'timeupdate'
+                # when 'viewerschange'
+                # when 'waiting'
+
+                when 'durationchange'
+                  options.duration = args[0]
+
+                when 'ended'
+                  onEnd()
+
+                when 'init'
+                  onReady()
+
+                when 'offline'
+                  onOffline()
+
+                when 'online'
+                  onOnline()
+
+                when 'play'
+                  onPlay()
+
+                when 'volumechange'
+                  options.volume = 100 * args[0] if args[0]
+
+          ), false

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment