Blog Documentation

USING SMART VIDEO PLAYER – Adsolutions

USING SMART VIDEO PLAYER

The SmartVideoPlayer permits for auto-initiated delivery of video throughout units to play in-line within your advertisements.
For instance, on desktop environments that supports inline, auto-initiated HTML5 Video playback, it should default to using the standard VideoJS participant, whereas, on cellular and pill units that do not help inline, auto-initiated HTML5 Video playback (comparable to iOS and sure Android units), it should default to delivering a video like expertise through the use of HTML5 Canvas to render frame by body. This solves a serious difficulty on cellular units by circumventing the shortage of auto initiated inline video playback, and offers a constant, system and tag agnostic video experience.

The SmartVideoPlayer API
Current version: 1.zero.0 (4 Nov 2015)

API strategies and configuration options
Constructor

createPlayer(…) –  Initializes the player and masses the primary video. Returns reference to the player. The participant routinely pauses video when the page goes out of view (browser tab change, browser reduce), and resumes video when web page returns into view.

  • mode string [inlineAutoplay] –
    • inlineAutoplay – Default player mode. Chooses player that supports both inline playback and autoplay based mostly on the consumer’s present gadget.
      inline – Chooses participant that supports inline playback based mostly on the consumer’s present system. If autoplay is true, mode switches again to inlineAutoplay.
    • native – Chooses Video.js participant which plays utilizing native HTML5 video tag. For units reminiscent of iPhone, video plays in native full-screen participant. On units reminiscent of iPad, video will play inline. If autoplay is true, mode switches again to inlineAutoplay.
  • container DOMElement – DOMElement reference or ID of the mother or father node of SmartVideoPlayer.
  • width quantity – Pixel width of the participant.
  • peak quantity – Pixel peak of the participant.
  • pores and skin string= – Elective CSS class identify of the VideoJS skin (see Skinning). If empty, uses default VideoJS 5.zero.0 types.
  • autoplay boolean [true] – Performs muted video immediately after creating the player. Set to false to only play after play(auto: true) is known as or after the consumer clicks to play.
  • identify string= – When using a single video, not from a Content Assortment, optionally outline a reputation to include within the video tracking events. No need to incorporate the word “Video” right here since it’s already part of video tracking names. That is also used by the brand new ONE platform asset inspector to pre-define video occasions prefixed with this identify.
  • content material string= – When utilizing a video from a Content Assortment, specify the identify of the gathering. This is additionally used by the new ONE platform asset inspector to pre-define video occasions prefixed with this collection identify and the monitoring ID of every assortment merchandise.
  • contentItem Object= – When utilizing a video from a Content material Collection, embrace a reference to the merchandise in the collection so the Monitoring ID is used within the video tracking events.
  • poster string – URL of the poster body.
  • src Object – Group containing the varied supply information.
    • ogv string – URL of the OGV video that plays inline on iPhones. Observe this URL have to be on the same area as the advert, or on a website with an Entry-Control-Permit-Origin header. Required if player.mode stays the default of inline.
    • mp4 string – URL of the MP4 video that performs when supported.
    • webm string – URL of the WebM video that plays when supported.

Methods

  • on(eventName, handler) – provides an event listener
  • off(eventName, handler) – removes an event listener.
  • load(…) – Re-uses the same participant but masses a new video. If autoplay was set to true in the name to createPlayer(), this autoplays the new video.
    • identify string= – Optionally outline a name to include before every video monitoring occasions. No need to incorporate the phrase “Video” because it’s already a part of video occasions.
    • content string= – When utilizing a video from a Content material Assortment, specify the identify of the collection.
    • contentItem Object= – When utilizing a video from a Content Assortment, embrace a reference to the item within the collection so the Monitoring ID is used within the video tracking events.
    • poster string – URL of the poster body.
    • src Object – Group containing the varied source information.
      • ogv string – URL of the OGV video that plays inline on iPhones. Word this URL have to be on the identical area because the ad. Required if player.mode remains the default of inline.
      • mp4 string – URL of the MP4 video that performs when supported.
      • webm string – URL of the WebM video that performs when supported.
  • play(…)
    • auto boolean= [false] – Set to true if monitoring ought to be bypassed.
    • bigPlayButton boolean= [false] – Set to true to log “Video Play”. (A traditional call to play() logs “Video Start” on first name, or “Video Resume” on subsequent calls.)
  • pause(…)
    • auto boolean [false] – Set to true if monitoring ought to be bypassed.
  • cease()
  • mute(…)
    • auto boolean [false] – Set to true if monitoring must be bypassed
  • unmute(…)
    • auto boolean [false] – Set to true if tracking must be bypassed.
  • toggleFullscreen()
  • remove() – remove from father or mother DOM component.
  • appendTo(DOMElement|string) – transfer new mum or dad DOM component by reference or ID.
  • destroy()– remove() and destroy inner state.

Getter/Setter Strategies
These strategies jive with Video.js.

  • el() – returns the player DOM component containing all “vjs-” prefixed CSS class names.
  • currentTime() – returns the current time in seconds.
  • currentTime(newTime) – sets the new time in seconds and seeks to that place.
  • dimensions(width, peak) – sets the participant measurement to new width and peak.
  • period() – the period in seconds.
  • isFullscreen()
  • muted() – returns true if video is muted, false if not. Use methods mute() and unmute() to mute with elective event blocking.
  • paused()– returns true if video isn’t enjoying, false if video is enjoying.
  • videoWidth() – will get the width of the video supply, after LOADED_METADATA.
  • videoHeight() – gets the peak of the video supply, after LOADED_METADATA, e.g.:

Properties

  • playerType string – which player was used, both:
    • SmartVideoPlayer.playerType.VIDEO_JS, or
    • SmartVideoPlayer.playerType.MOBILE_INLINE_VIDEO_PLAYER
  • participant Object – the instance of either the Video.js player, or MobileInlineVideoPlayer. Use this to make direct technique calls on that participant as soon as it is prepared, e.g.:

Events
These occasions are dispatched by SmartVideoPlayer by way of the on(event, handler) technique:

  • SmartVideoPlayer.occasion.READY – wait to invoke any strategies till this occasion fires, because the gamers are loaded asynchronously (either Video.js, or MobileInlineVideoPlayer).
  • SmartVideoPlayer.event.LOADED_METADATA – as soon as this event fires, the videoWidth() and videoHeight() getter strategies can be found for use.
  • SmartVideoPlayer.occasion.PLAY – video starts enjoying
  • SmartVideoPlayer.event.PLAY_BUTTON_CLICK – huge play button clicked
  • SmartVideoPlayer.event.PAUSE
  • SmartVideoPlayer.occasion.ENDED
  • SmartVideoPlayer.occasion.SEEKED
  • SmartVideoPlayer.event.VOLUME_CHANGE
  • SmartVideoPlayer.event.FULLSCREEN_CHANGE
  • SmartVideoPlayer.event.TIME_UPDATE/li>

See API Events in motion using this check utility: http://onecreative.aol.com/view/174971/c1d8dfd394af4c42b04d1842fb6b389c

Platform Video Tracking Occasions
SmartVideoPlayer uses the VideoTracking module to log all expected video monitoring events within the platform:

  • Video Begin – When a video begins, regardless of consumer initiated or auto-initiated.
  • Video Play – Logged solely when the consumer presses the large play button or when .play(bigPlayButton: true)is known as. Bypassed when.play(auto: true) is known as.
  • Video Pause – Logged when the video is paused. Bypassed when.pause(auto: true) is known as.
  • Video Resume – Logged when video is played after pausing.
  • Video Search – Logged when the consumer strikes the seek bar or when the currentTime(…) setter technique known as.
  • Video Mute – Logged when the consumer presses the mute button. Bypassed when .mute(auto: true) known as.
  • Video Unmute – Logged when the consumer presses the mute button. Bypassed when.mute(auto: true) known as.
  • Video Fullscreen – Logged when the video enters fullscreen state.
  • Video Fullscreen Return – Logged when the video exits fullscreen state. But, the platform at present doesn’t create this occasion within the Occasions panel, so it’s not recorded. That’s depending on https://jira.ops.aol.com/browse/PL-310.
  • Video First Quartile – Logged when the video reaches 1/four of the period.
  • Video First Midpoint – Logged when the video reaches 1/2 of the period.
  • Video Third Quartile – Logged when the video reaches three/4 of the period.
  • Video Full – Logged when the video reaches the top.
  • Video Replay – Logged when the identical video is performed a second time.

See Video Occasions logged utilizing this check utility: http://onecreative.aol.com/view/174971/c1d8dfd394af4c42b04d1842fb6b389c

Primary Inline Autoplay

Inline autoplay a single video, utilizing the default skin, with a reputation used in the video tracking, hooked up to a div referenced by smartPlayerContainer:

Add Custom CSS Pores and skin
Create a custom Video.js pores and skin in CSS using a or

tag then apply it to the participant utilizing the skin property.

Add Video Monitoring Identify
When you have a number of movies on a web page and need a descriptive identify to prefix all the “Video Start”, “Video Pause” and so forth occasions, add it using the identify property. Then comply with it with a commented-out line of code that, when the file is saved/uploaded, tells the ONE Artistic platform to create video occasions within the Events panel prefixed with that identify.

Inline Autoplay from Content Collection
Inline autoplay a video from a content collection by defining the collection, registering video events for the gathering, then using the load(…) technique to reload separate movies into the same participant.

Implement custom in-page visibility logic to auto-pause/auto-resume

The player routinely pauses video when the page as an entire goes out of view (browser tab change, browser reduce), and resumes video when web page returns into view — with out logging any video occasions.

Nevertheless an advert developer might need to define custom logic to find out when the participant itself leaves view inside the similar web page, and pause the video, then resume it when the player enters view on the identical page.

  1. Create a player that does not routinely begin enjoying the primary video:

2. When the player enters view on the web page, name this to play the video and bypass logging:

3. When the participant leaves view on the page, pause the video and bypass logging:

4. When player returns into view, resume the video and bypass the monitoring with:

Resize participant to suit dimensions of video
Set the size of the video participant to exactly fit the dimensions of the video loaded, by waiting for the LOADED_METADATA occasion.

Which units and conditions will use the MobileInlineVideoPlayer module

SmartVideoPlayer defaults to native HTML5 Video playback utilizing Video.js the place attainable, however makes use of the MobileInlineVideoPlayer when needed:

When mode is SmartVideoPlayer.mode.NATIVE, Video.js is utilized in all situations besides when autoplay is about to true – mode is routinely switched again to INLINE_AUTOPLAY. To pressure native playback, also set autoplay to false.

Conduct in MRAID setting is at present the identical. In a future version, SmartVideoPlayer might examine if autoplay is natively supported within the WebView and could use Video.js.

Function limitations.

  • The participant is aware of whether the web page is in view or not, but just isn’t presently conscious of when it’s scrolled into and out of view. The ad developer would must be add such detection, and name strategies .play(auto: true) when scrolled into view, and .pause(auto: true) when scrolled out of view.

  • The MobileInlineVideoPlayer player doesn’t presently help retina display quality (utilizing a that is 4x the full area).

  • In the fork of OGV.js used by MobileInlineVideoPlayer – when un-muting, audio artifacts improve after in search of. This difficulty is resolved in OGV.js 1.zero with its use of Net Staff to decode audio on a separate thread. Nevertheless model 1.zero does not but help autoplay on iOS, which is why we use an older fork. The deliberate OGV.js 1.1 release will help autoplay, so the audio high quality ought to enhance when that’s obtainable. Watch this situation: https://github.com/brion/ogv.js/issues/112

  • When MobileInlineVideoPlayer is used on iOS, the fullscreen button at present expands the video player to fill the dimensions of the iframe, proportionally utilizing letterboxing, since iOS does not help the HTML5 Fullscreen API. This sprint we’ll modify RMLib to increase the container to as giant as it could actually get.

    • If we have to go really full display, we will add a function thatwhere to MP4 video utilizing native HTML5 video playback, starting from the same timecode. We verified this works, but this is able to require a separate video file download.