CONTROLLING THE TUBEPLAYER 2
The tubeplayer has many more options and settings to control the tubeplayer API programmable ...
SET
------------------------------------------------------------------------------------------
$(selector).tubeplayer("play");
- play tubeplayer
- triggers: event | on play
callback | on playing
------------------------------------------------------------------------------------------
$(selector).tubeplayer("play", "videoID");
- play tubeplayer with specified youtube url
- triggers: event | on play
callback | on unstarted
callback | on quality change
callback | on playing
------------------------------------------------------------------------------------------
$(selector).tubeplayer("play", {id: "videoID", time: 10});
- play tubeplayer with specified youtube url and specified time in movie
- triggers: event | on play
callback | on unstarted
callback | on quality change
callback | on playing
------------------------------------------------------------------------------------------
$(selector).tubeplayer("cue", "videoID");
- cue (stopped) tubeplayer with specified youtube url + use movie quality of init.
- triggers: callback | on unstarted
callback | on cued
------------------------------------------------------------------------------------------
$(selector).tubeplayer("stop");
- stop tubeplayer and stop buffering
- triggers: event | on stop
callback | on unstarted
callback | on cued
------------------------------------------------------------------------------------------
$(selector).tubeplayer("pause");
- pause tubeplayer (buffering continues)
- triggers: event | on pause
callback | on paused
------------------------------------------------------------------------------------------
$(selector).tubeplayer("seek", 100); - method 1
$(selector).tubeplayer("seek", "0:30"); - method 2
- seek specific time in movie
- triggers: event | on seek
callback | on playing
------------------------------------------------------------------------------------------
$(selector).tubeplayer("mute");
- mute volume
- triggers: event | on mute
------------------------------------------------------------------------------------------
$(selector).tubeplayer("unmute");
- unmute volume
- triggers: event | on unmute
------------------------------------------------------------------------------------------
$(selector).tubeplayer("volume", 50);
- set volume between 0 - 100
------------------------------------------------------------------------------------------
$(selector).tubeplayer("quality", "medium");
- set movie quality - default, small, medium, large, hd720
- triggers: callback | on quality change
------------------------------------------------------------------------------------------
$(selector).tubeplayer("size",{width:400, height:300});
- change tubeplayer dimension
------------------------------------------------------------------------------------------
$(selector).tubeplayer("destroy");
- remove the tubeplayer completely
------------------------------------------------------------------------------------------
$(selector).tubeplayer("playbackRate", 1.5);
- set movie playback rate if available
GET
------------------------------------------------------------------------------------------
$(selector).tubeplayer("isMuted");
- get tubeplayer mute/unmute state (true/false)
------------------------------------------------------------------------------------------
$(selector).tubeplayer("volume");
- get tubeplayer volume level
------------------------------------------------------------------------------------------
$(selector).tubeplayer("quality");
- get tubeplayer movie quality level
------------------------------------------------------------------------------------------
$(selector).tubeplayer("videoId");
- get tubeplayer movie ID - youtube url ID
------------------------------------------------------------------------------------------
$(selector).tubeplayer("playbackRate");
- get tubeplayer movie playback rate if available
------------------------------------------------------------------------------------------
$(selector).tubeplayer("data").bytesLoaded;
- get tubeplayer information
- bytesLoaded = loaded bytes
- bytesTotal = total bytes
- currentTime = current time
- duration = total time
- startBytes = start position in bytes
- state = player state
-1 = error/unstarted
0 = ended
1 = playing
2 = paused
5 = cued/stopped
- availableQualityLevels = available quality levels
- videoURL = complete youtube url
- videoID = youtube url ID
------------------------------------------------------------------------------------------
$(selector).tubeplayer("opts").start;
- get + set tubeplayer (plugin) settings
------------------------------------------------------------------------------------------
$(selector).tubeplayer("player").k.availableQualityLevels;
- get tubeplayer information as the ytplayer that the youtube API specifies
The tubeplayer has many more options and settings to control the tubeplayer API programmable ...
SET
------------------------------------------------------------------------------------------
$(selector).tubeplayer("play");
- play tubeplayer
- triggers: event | on play
callback | on playing
------------------------------------------------------------------------------------------
$(selector).tubeplayer("play", "videoID");
- play tubeplayer with specified youtube url
- triggers: event | on play
callback | on unstarted
callback | on quality change
callback | on playing
------------------------------------------------------------------------------------------
$(selector).tubeplayer("play", {id: "videoID", time: 10});
- play tubeplayer with specified youtube url and specified time in movie
- triggers: event | on play
callback | on unstarted
callback | on quality change
callback | on playing
------------------------------------------------------------------------------------------
$(selector).tubeplayer("cue", "videoID");
- cue (stopped) tubeplayer with specified youtube url + use movie quality of init.
- triggers: callback | on unstarted
callback | on cued
------------------------------------------------------------------------------------------
$(selector).tubeplayer("stop");
- stop tubeplayer and stop buffering
- triggers: event | on stop
callback | on unstarted
callback | on cued
------------------------------------------------------------------------------------------
$(selector).tubeplayer("pause");
- pause tubeplayer (buffering continues)
- triggers: event | on pause
callback | on paused
------------------------------------------------------------------------------------------
$(selector).tubeplayer("seek", 100); - method 1
$(selector).tubeplayer("seek", "0:30"); - method 2
- seek specific time in movie
- triggers: event | on seek
callback | on playing
------------------------------------------------------------------------------------------
$(selector).tubeplayer("mute");
- mute volume
- triggers: event | on mute
------------------------------------------------------------------------------------------
$(selector).tubeplayer("unmute");
- unmute volume
- triggers: event | on unmute
------------------------------------------------------------------------------------------
$(selector).tubeplayer("volume", 50);
- set volume between 0 - 100
------------------------------------------------------------------------------------------
$(selector).tubeplayer("quality", "medium");
- set movie quality - default, small, medium, large, hd720
- triggers: callback | on quality change
------------------------------------------------------------------------------------------
$(selector).tubeplayer("size",{width:400, height:300});
- change tubeplayer dimension
------------------------------------------------------------------------------------------
$(selector).tubeplayer("destroy");
- remove the tubeplayer completely
------------------------------------------------------------------------------------------
$(selector).tubeplayer("playbackRate", 1.5);
- set movie playback rate if available
GET
------------------------------------------------------------------------------------------
$(selector).tubeplayer("isMuted");
- get tubeplayer mute/unmute state (true/false)
------------------------------------------------------------------------------------------
$(selector).tubeplayer("volume");
- get tubeplayer volume level
------------------------------------------------------------------------------------------
$(selector).tubeplayer("quality");
- get tubeplayer movie quality level
------------------------------------------------------------------------------------------
$(selector).tubeplayer("videoId");
- get tubeplayer movie ID - youtube url ID
------------------------------------------------------------------------------------------
$(selector).tubeplayer("playbackRate");
- get tubeplayer movie playback rate if available
------------------------------------------------------------------------------------------
$(selector).tubeplayer("data").bytesLoaded;
- get tubeplayer information
- bytesLoaded = loaded bytes
- bytesTotal = total bytes
- currentTime = current time
- duration = total time
- startBytes = start position in bytes
- state = player state
-1 = error/unstarted
0 = ended
1 = playing
2 = paused
5 = cued/stopped
- availableQualityLevels = available quality levels
- videoURL = complete youtube url
- videoID = youtube url ID
------------------------------------------------------------------------------------------
$(selector).tubeplayer("opts").start;
- get + set tubeplayer (plugin) settings
------------------------------------------------------------------------------------------
$(selector).tubeplayer("player").k.availableQualityLevels;
- get tubeplayer information as the ytplayer that the youtube API specifies
EXPLAIN ?
module | tubeplayer properties can be used to display youtube content on the fly - (HMTL5/FLASH)
And external control the tubeplayer API (stop, play, mute etc)
module | tubeplayer furthermore runs in 4 modes
- normal display
- auto fullwidth background
- auto fullscreen background - (window + object level)
module | tubeplayer properties can be used to display youtube content on the fly - (HMTL5/FLASH)
And external control the tubeplayer API (stop, play, mute etc)
module | tubeplayer furthermore runs in 4 modes
- normal display
- auto fullwidth background
- auto fullscreen background - (window + object level)
__________________________________________________________________________
more info on module | tubeplayer see here Properties
more info on module | tubeplayer see here Online Tutorials
credits: nirvana tikku
credits: sean mccambridge - (scale code)
more info on module | tubeplayer see here Properties
more info on module | tubeplayer see here Online Tutorials
credits: nirvana tikku
credits: sean mccambridge - (scale code)
advanced!
NOTE: LOCAL VIEWING AND INTERACTION ?
Module | tubeplayer can be viewed and interacted with local ...
But for ? reasons local interaction on the youtube API may not be working at times ?
SOLUTIONS:
• Try different browsers, even if a browser does not seem to work, try again later it might work after all
• Best browser bet to work - Chrome or Firefox
• If all fails, the tubeplayer always works from a server, upload and view online
Module | tubeplayer can be viewed and interacted with local ...
But for ? reasons local interaction on the youtube API may not be working at times ?
SOLUTIONS:
• Try different browsers, even if a browser does not seem to work, try again later it might work after all
• Best browser bet to work - Chrome or Firefox
• If all fails, the tubeplayer always works from a server, upload and view online
NOTE: MOBILE DEVICES ?
Module | tubeplayer will view and work on mobile devices
External control however will not execute before the tubeplayer is manual activated first ... !
"Mobile devices do not allow a tube-player to auto play"
Any external control that engages into such behavior is therefore disabled as well
NOTE:
Always present the end-user the option to manual engage the tube-player if the target is mobile devices
Module | tubeplayer will view and work on mobile devices
External control however will not execute before the tubeplayer is manual activated first ... !
"Mobile devices do not allow a tube-player to auto play"
Any external control that engages into such behavior is therefore disabled as well
NOTE:
Always present the end-user the option to manual engage the tube-player if the target is mobile devices
MODULE TUBEPLAYER - OVERVIEW
Add A YouTube Player On The Fly
External Control It's API
Stop - Play - Mute - Etc
Fullscreen - Custom - Scale
External Control It's API
Stop - Play - Mute - Etc
Fullscreen - Custom - Scale
PLUGIN
••• MODE 1
Module | tubeplayer default setup
identifier : my tubeplayer notes
container | selector : #Html1
...
response | mode : not used
...
run on load : true
run on call : Call_Tube_1
...
This will create a tubeplayer on a WB Html object, the Html object will be the container for the tubeplayer
The Html object sets the position and the dimension of the tubeplayer
Module | tubeplayer default setup
identifier : my tubeplayer notes
container | selector : #Html1
...
response | mode : not used
...
run on load : true
run on call : Call_Tube_1
...
This will create a tubeplayer on a WB Html object, the Html object will be the container for the tubeplayer
The Html object sets the position and the dimension of the tubeplayer
4 MODES - POSITION & DIMENSION
The different modes of module | tubeplayer determine the position and dimension of the tubeplayer
The different modes of module | tubeplayer determine the position and dimension of the tubeplayer
••• MODE 2
Module | tubeplayer auto fullscreen setup - window level
identifier : my tubeplayer notes
container | selector : #Html1
...
response | mode : auto fullscreen
response | ratio : 16/9
response | fullscreen | mode : window
...
run on load : true
run on call : Call_Tube_1
...
This will create a tubeplayer on a WB Html object, the Html object will be the container for the tubeplayer
The tubeplayer however is positioned in fixed position, the window viewport determines the tubeplayer dimension (=fullscreen)
The youtube movie is displayed fullscreen scaled in ratio
Module | tubeplayer auto fullscreen setup - window level
identifier : my tubeplayer notes
container | selector : #Html1
...
response | mode : auto fullscreen
response | ratio : 16/9
response | fullscreen | mode : window
...
run on load : true
run on call : Call_Tube_1
...
This will create a tubeplayer on a WB Html object, the Html object will be the container for the tubeplayer
The tubeplayer however is positioned in fixed position, the window viewport determines the tubeplayer dimension (=fullscreen)
The youtube movie is displayed fullscreen scaled in ratio
••• MODE 3
Module | tubeplayer auto fullwidth setup
identifier : my tubeplayer notes
container | selector : #Html1
...
response | mode : auto fullwidth
response | ratio : 16/9
...
run on load : true
run on call : Call_Tube_1
...
Module | tubeplayer auto fullwidth setup
identifier : my tubeplayer notes
container | selector : #Html1
...
response | mode : auto fullwidth
response | ratio : 16/9
...
run on load : true
run on call : Call_Tube_1
...
CONTROLLING THE TUBEPLAYER 1
module | tubeplayer by default has 4 properties that can be used to control the tubeplayer external by WB Image objects
The options are - play, stop, pause and a mute/unmute toggle button
module | tubeplayer by default has 4 properties that can be used to control the tubeplayer external by WB Image objects
The options are - play, stop, pause and a mute/unmute toggle button
The 3th mode new added in JMPv3.0 b5.6 is auto fullwidth
In this mode the container sets the top position and the height of the tubeplayer - absolute positioned
The width of the tubeplayer is set by the width of the window viewport, the youtube movie is displayed scaled in ratio
In this mode the container sets the top position and the height of the tubeplayer - absolute positioned
The width of the tubeplayer is set by the width of the window viewport, the youtube movie is displayed scaled in ratio
b5.6
••• MODE 4
Module | tubeplayer auto fullscreen setup - object level
identifier : my tubeplayer notes
container | selector : #Html1
...
response | mode : auto fullscreen
response | ratio : 16/9
response | fullscreen | mode : #layer1 <------ object level
...
run on load : true
run on call : Call_Tube_1
...
Module | tubeplayer auto fullscreen setup - object level
identifier : my tubeplayer notes
container | selector : #Html1
...
response | mode : auto fullscreen
response | ratio : 16/9
response | fullscreen | mode : #layer1 <------ object level
...
run on load : true
run on call : Call_Tube_1
...
The 4th mode also new added in JMPv3.0 b5.6 is auto fullscreen - object level
This is the most powerful mode to use, it requires an additional object that will serve as the viewport
This is the most powerful mode to use, it requires an additional object that will serve as the viewport
b5.6
Here the response | fullscreen | mode property is set to #Layer1, we need to add a WB Layer1 to our project
The WB Layer1 will serve as the viewport
We can now use the WB Layer1 in any method we like - full screen, full width, full height, RWD, - fixed, absolute positioned etc
The tubeplayer will follow the WB Layer1 in scaled ratio, a very powerful new mode
The WB Layer1 will serve as the viewport
We can now use the WB Layer1 in any method we like - full screen, full width, full height, RWD, - fixed, absolute positioned etc
The tubeplayer will follow the WB Layer1 in scaled ratio, a very powerful new mode
NEW IN BUILD 5.6
01. FIX
• response mode: option auto fullscreen mode - ratio position fix
02. REMOVED
• response mode: option custom mode + response scale removed
03. NEW
• response mode: new option - auto fullwidth mode
• response mode: new option - auto fullscreen object mode
01. FIX
• response mode: option auto fullscreen mode - ratio position fix
02. REMOVED
• response mode: option custom mode + response scale removed
03. NEW
• response mode: new option - auto fullwidth mode
• response mode: new option - auto fullscreen object mode
5