HomeLatest imagesSearchRegisterLog in
Welcome to the forums
Latest topics
» Introductions thread
A little javascript tip for a bigger player/chat EmptySat Jan 09, 2016 12:03 am by MasterMugen

» A Bit of Help
A little javascript tip for a bigger player/chat EmptyTue Aug 25, 2015 12:47 pm by MasterMugen

» Morning Block Suggestions 7/13/15
A little javascript tip for a bigger player/chat EmptyMon Jul 13, 2015 4:37 am by XValHallenX

» How to connect mIRC to Twitch
A little javascript tip for a bigger player/chat EmptySat Jul 04, 2015 3:05 pm by renzo210

» Is Nudity Allowed Here?
A little javascript tip for a bigger player/chat EmptySun Mar 22, 2015 4:48 pm by MacroManJr

» Video not loading?
A little javascript tip for a bigger player/chat EmptyFri Mar 20, 2015 10:57 pm by renzo210

» everyone dont forget to laugh at Mac!
A little javascript tip for a bigger player/chat EmptySat Nov 15, 2014 10:25 pm by Thunderbro

» Where Is Everuhybady?
A little javascript tip for a bigger player/chat EmptyWed Sep 03, 2014 5:25 pm by renzo210

» A little javascript tip for a bigger player/chat
A little javascript tip for a bigger player/chat EmptyTue May 27, 2014 12:53 pm by DanteMCI

Who is online?
In total there are 2 users online :: 0 Registered, 0 Hidden and 2 Guests

None

Most users ever online was 25 on Thu Oct 10, 2013 12:06 am
Log in
Username:
Password:
Log in automatically: 
:: I forgot my password

 

 A little javascript tip for a bigger player/chat

Go down 
AuthorMessage
DanteMCI
Member



Posts : 2
Join date : 2014-05-27

A little javascript tip for a bigger player/chat Empty
PostSubject: A little javascript tip for a bigger player/chat   A little javascript tip for a bigger player/chat EmptyTue May 27, 2014 12:53 pm

Seeing how this involves the broadcast, I hope this is the right forum section.

First of all, hello everybody!

While watching the Memorial weekend stream, I got tired of looking at the small default player (640x508)px and chat on my new 1080p Television which is actually running a resolution of 1920x1080 compared to my old 1280x720 monitor.  After a few hours playing in the source code I was able to create a better player and chat for my display.  Seeing how I may not be the only one using an external monitor to view the stream I figured I share my results.

Experimenting with a little java, a type of programming language that many modern browsers and websites use to interact with a client(viewer in simple terms), I was able to create a bookmark that I can press to enlarge the player and chat.

Because this bookmark only interacts with the client side, their is no permanent change to the actual source code that is loaded from renzo's server.  Which just means that if you refresh the page the default overwrite any changes made on the client side.

Enough chit-chat looks at the code used to create the bookmark.
Code:

document.getElementById('backg').childNodes[0].attributes[0].value = "width:1890px;margin-top:-20px;"
document.getElementById('content').style.width = '1780px'
document.getElementById('content').style.height = '960px'
document.getElementById('live_embed_player_flash').width = '1280px'
document.getElementById('live_embed_player_flash').height = '960px'
document.getElementById('dimmer3').style.width = '500px'
document.getElementById('dimmer3').style.height = '960px'

Basically, the function document.getElementById('') is called to obtain the location and values of the player/chat sizes but if a '=' is used, it can overwrite the values.  After playing around a while with a little math, I came up with some nice values. The values may need to be changed for your specific resolution needs.  The sizes are kept in a 4:3 ratio so there is not a lot of black borders.

Okay, using the code above and some javascript injection, a bookmark can be created like below.

Code:
javascript:void(document.getElementById('backg').childNodes[0].attributes[0].value%20=%20"width:1890px;margin-top:-20px;"%20,document.getElementById('content').style.width%20=%20'1780px'%20,document.getElementById('content').style.height%20=%20'960px'%20,document.getElementById('live_embed_player_flash').width%20=%20'1280px'%20,
document.getElementById('live_embed_player_flash').height%20=%20'960px'%20,document.getElementById('dimmer3').style.width%20=%20'500px'%20,document.getElementById('dimmer3').style.height%20=%20'960px');

If the code above is saved as a bookmark, it will automatically resize the player/chat when pressed.  But because the player is being stretched the video may become a little pixelated, not a concern for me just want to look at a bigger player/chat. Also the banner will stay the same default size, and hopefully for everyone using his little script the links at the bottom of the page 'should' stay out of the player/chat.

To create the bookmark above, a void function is used to inject code from the browser location bar so a console does not need to be used.  The void works by using commas to separate different parameters to be changed.  So basically, the first code section is given commas like so:

This was for the old player and should be replaced by the spoiler at the bottom. It will remain to show how the player has changed overtime.
Spoiler:


Then in your browser create a new bookmark (easiest way maybe atleast in Firefox is to right click on Bookmark toolbar and click New Bookmark):
For the name use whatever you choose.
For the location/URL use: javascript:void( COPY Spoiler section );

That should create a valid bookmark.

Hopefully this helps somebody and I didn't make an ass of myself for I am not a javascript god.  This bookmark was very useful for me so I didn't have to enter full screen mode to see the stream and lose the chat.  This was only tested on Firefox but should work on all browsers that support java. It should be possible to create a link on the website to the change layout from renzo's server side but that is up to him and may be easier on his side to use a different method.

Enjoy

Updated Dec 10, 2014
Please use the spoiler below to have the updated parameters.
Spoiler:


Last edited by DanteMCI on Wed Dec 10, 2014 4:54 pm; edited 3 times in total (Reason for editing : Updated the childNodes array due to layout change)
Back to top Go down
 
A little javascript tip for a bigger player/chat
Back to top 
Page 1 of 1
 Similar topics
-
» So, I MIGHT have broke the stream's chat...
» How to stay automatically logged in the chat

Permissions in this forum:You cannot reply to topics in this forum
 :: Main Forum :: Broadcast Discussion-
Jump to: