neoYouTube
YouTube advanced background video player
IMPORTANT: Needs secure context (https:// or localhost)
Version: 1.0
Based on:
https://github.com/pupunzi/jquery.mb.YTPlayer
neoYouTube sample 1 (video into a Container)
https://visualneo.com/tutorials/neoyoutube
neoYouTube sample 2 (full screen background video)
https://visualneo.com/tutorials/neoyoutube2
Description
The neoYouTube plugin for VisualNEO Web integrates YouTube video playback as a background or within specific containers, with advanced features like auto-play, looping, and customizable playback controls. This plugin is ideal for applications that use video for backgrounds, interactive displays, or enhanced visual appeal. Here’s a comprehensive guide based on its functionalities:
Initializing a YouTube Video as Background
The neoYouTubeInitialize command sets up a YouTube video in a container, allowing it to play as a background with optional controls.
Example:
neoYouTubeInitialize "videoContainer" "https://youtu.be/dQw4w9WgXcQ" true true true 0 0 1 true true
This command starts the YouTube video as a muted, looping background in videoContainer.
Adding Filters to the Video
The neoYouTubeFilterBlur command allows you to add a blur effect to the YouTube video, useful for creating a softened background look.
- Command: neoYouTubeFilterBlur
- Syntax: neoYouTubeFilterBlur "objId" theValue
- theValue: Intensity of the blur effect (1 to 100).
Example:
neoYouTubeFilterBlur "videoContainer" 20
This applies a moderate blur effect to the YouTube video playing in videoContainer.
Event Handling
The neoYouTubeSetEvent command enables developers to specify actions based on video playback events (e.g., start, pause, end).
- Command: neoYouTubeSetEvent
- Syntax: neoYouTubeSetEvent "objId" theEvent theSubroutine
- theEvent: Event type (e.g., onPlay, onPause, onEnd).
- theSubroutine: Subroutine to execute when the event occurs.
Example:
neoYouTubeSetEvent "videoContainer" "onEnd" "videoEnded"
This setup calls the videoEnded subroutine when the video playback ends.
Practical Applications
The neoYouTube plugin is suitable for:
- Background Enhancements: Using videos as dynamic, interactive backgrounds.
- Promotional Content: Embedding product or demo videos that loop or auto-play on load.
- Event-based Interactions: Triggering app functions based on video events for interactive displays.
With options for blur effects, event-driven actions, and customizable video playback, the neoYouTube plugin enhances VisualNEO Web applications by integrating multimedia in engaging and flexible ways.
neoYouTubeInitialize
|
Purpose: |
Play a YouTube video into a Container as a background with advanced features |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeInitialize "objId" "youtubeURL" theShowControls theAutoPlay theMute theStartAt theStopAt theOpacity theFullScreen theLoop
objId Select a Container object (or write 'full' for full size) youtubeURL YouTube video URL (ie: http://youtu.be/BsekcY04xvQ) theShowControls Show controls theAutoPlay Auto play theMute Mute theStartAt Start at (seconds) theStopAt Stop at (seconds) If 0 is ignored theOpacity Opacity (0-1) theFullScreen Full screen (background) theLoop Loop |
neoYouTubePlay
|
Purpose: |
Play the video |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubePlay "objId"
objId Container object |
neoYouTubePause
|
Purpose: |
Pause the video |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubePause "objId"
objId Container object |
neoYouTubeStop
|
Purpose: |
Stop the video |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeStop "objId"
objId Container object |
neoYouTubeSeekTo
|
Purpose: |
seek the video to a specific second |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeSeekTo "objId" theValue
objId Container object theValue Second |
neoYouTubeChangeMovie
|
Purpose: |
Change the video of the specified player |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeChangeMovie "objId" "theVideoURL"
objId Container object theVideoURL YouTube video URL (ie: http://youtu.be/BsekcY04xvQ) |
neoYouTubeSetPlaybackRate
|
Purpose: |
Set the actual video speed (playback rate) |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeSetPlaybackRate "objId" theValue
objId Container object theValue Playback rate |
neoYouTubeGetPlaybackRate
|
Purpose: |
Get the actual video speed (playback rate) |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeGetPlaybackRate "objId" [returnVar]
objId Container object returnVar Variable to store result |
neoYouTubeGetTotalTime
|
Purpose: |
Return the total video time |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeGetTotalTime "objId" [returnVar]
objId Container object returnVar Variable to store result |
neoYouTubeGetTime
|
Purpose: |
Return the actual video time |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeGetTime "objId" [returnVar]
objId Container object returnVar Variable to store result |
neoYouTubeFullScreen
|
Purpose: |
Switch video from background to front full screen |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFullScreen "objId"
objId Container object |
neoYouTubeSetVolume
|
Purpose: |
Change the video volume. |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeSetVolume "objId" theValue
objId Container object theValue Value (1-100) |
neoYouTubeMute
|
Purpose: |
Mute the video audio |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeMute "objId"
objId Container object |
neoYouTubeUnmute
|
Purpose: |
Unmute the video audio |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeUnmute "objId"
objId Container object |
neoYouTubeFilterGrayScale
|
Purpose: |
Apply a grey scale filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterGrayScale "objId" theValue
objId Container object theValue Intensity (1- 100) |
neoYouTubeFilterHueRotate
|
Purpose: |
Apply a hue rotate filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterHueRotate "objId" theValue
objId Container object theValue Intensity (1- 360) |
neoYouTubeFilterInvert
|
Purpose: |
Apply an invert filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterInvert "objId" theValue
objId Container object theValue Intensity (1- 100) |
neoYouTubeFilterOpacity
|
Purpose: |
Apply a opcity filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterOpacity "objId" theValue
objId Container object theValue Intensity (1- 100) |
neoYouTubeFilterSaturate
|
Purpose: |
Apply a saturate filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterSaturate "objId" theValue
objId Container object theValue Intensity (1- 400) |
neoYouTubeFilterSepia
|
Purpose: |
Apply a sepia filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterSepia "objId" theValue
objId Container object theValue Intensity (1- 100) |
neoYouTubeFilterBrightness
|
Purpose: |
Apply a brightness filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterBrightness "objId" theValue
objId Container object theValue Intensity (1- 400) |
neoYouTubeFilterContrast
|
Purpose: |
Apply a contrast filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterContrast "objId" theValue
objId Container object theValue Intensity (1- 400) |
neoYouTubeFilterBlur
|
Purpose: |
Apply a blur filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeFilterBlur "objId" theValue
objId Container object theValue Intensity (1- 100) |
neoYouTubeRemoveFilter
|
Purpose: |
Remove a prevously applied filter |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeRemoveFilter "objId" theFilter
objId Container object theFilter Filter name |
neoYouTubeSetEvent
|
Purpose: |
Execute a subroutine whenever an event occurs |
|
Category: |
neoVideoBg |
|
Syntax: |
neoYouTubeSetEvent "objId" theEvent theSubroutine
objId Container object theEvent Event theSubroutine Subroutine to execute |
Created with the Personal Edition of HelpNDoc: Easily share your documentation with the world through a beautiful website