Added interactive video embed #6
Conversation
Friss
left a comment
Friss
left a comment
There was a problem hiding this comment.
Thanks for the PR!
I added some comments about how I'd like to see this fully implemented. Most of it is just moving some code around to fit the flow of the rest of current layout.
| <h1>Twitch Stream offline.</h1> | ||
| <p>Stream offline. Come back later and watch me play.</p> | ||
| </div> | ||
| <script src= "http://player.twitch.tv/js/embed/v1.js"></script> |
There was a problem hiding this comment.
I think it would be best to have this down at the end of the file with the other JS <script> tags. Probably before the bootstrap include.
Also using https would be awesome.
| <p>Stream offline. Come back later and watch me play.</p> | ||
| </div> | ||
| <script src= "http://player.twitch.tv/js/embed/v1.js"></script> | ||
| <div id="{PLAYER_DIV_ID}"></div> |
There was a problem hiding this comment.
And with a class="hidden" so we can toggle it.
| <script src= "http://player.twitch.tv/js/embed/v1.js"></script> | ||
| <div id="{PLAYER_DIV_ID}"></div> | ||
| <script type="text/javascript"> | ||
| var options = { |
There was a problem hiding this comment.
I would move these and the lines following to the main.js file. Also the width and height can both be 100%
| var options = { | ||
| width: 854, | ||
| height: 480, | ||
| channel: "{nl_kripp}", |
| width: 854, | ||
| height: 480, | ||
| channel: "{nl_kripp}", | ||
| //video: "{VIDEO_ID}" |
| channel: "{nl_kripp}", | ||
| //video: "{VIDEO_ID}" | ||
| }; | ||
| var player = new Twitch.Player("{PLAYER_DIV_ID}", options); |
| }; | ||
| var player = new Twitch.Player("{PLAYER_DIV_ID}", options); | ||
| player.setVolume(0.5); | ||
| player.addEventListener(Twitch.Player.PAUSE, () => { console.log('Player is paused!'); }); |
There was a problem hiding this comment.
Instead of this PAUSE event we can hook into the OFFLINE and ONLINE events to add / remove the hidden class on the player-video div
Much like how the main.js is interacting with the embed iframe now.
There was a problem hiding this comment.
okay,actually i am new to this can you explain a bit, i am familiar with js but i haven't done any projects like this ...thanks
| <div class="col-md-4 chat"> | ||
| <h2>Chat</h2> | ||
| <iframe src="https://www.twitch.tv/twitchusername/chat" frameborder="0" scrolling="no" height="500" width="100%"></iframe> | ||
| <iframe src="https://www.twitch.tv/nl_kripp/chat" frameborder="0" scrolling="no" height="500" width="100%"></iframe> |
There was a problem hiding this comment.
This can go back to TWITCH_USER_NAME
3 participants
#5