Constructs a video component which encapsulates a number of compatibility fixes for the HTMLVideoElement implementation across different environments. Do not create the component multiple times, just show and hide it for subsequent viewings.

Jump to API Reference

Autoplay video when running InApp (e.g. In AdMob)

Requirements for autoplay to work when running in-app (not desktop or mobile web) using the RAD Video component

• The webview must be fullscreen at play or autoplay time. This means that the ad at the time of play must be either an interstitial (i.e. 100%x100% not 320x480, in Studio, this is called Flex size) or fully expanded, when studio.Enabler#getContainerState() equals studio.sdk.ContainerState#FS_EXPANDED for fullscreen exandables. For interstials the component will be set as autoplay, for expandables, they are set as not autoplay and call component.getVideoElement().play() on expanded.
• The video component (and hence video element) must be created before the studio.events.StudioEvent#VISIBLE event. To be safe, create it at studio.events.StudioEvent#INIT. This is true even for expandables.
• Any ancestral element in the hierachy must never be "display: none" otherwise the video will not autoplay.
• Only create the video element once. Show and hide it (using visibility) for subsequent showings.

Device Support

• Android 4.0.4+
• iOS 6

Sample usage:

var collapsedViewport;
var expandedViewport;
var videoContainer;
var videoComp;
var isVideoCompCreated = false;

function setUpExpandLifeCycle() {
  Enabler.addEventListener(
    studio.events.StudioEvent.EXPAND_START,
    expandStartHandler);
  Enabler.addEventListener(
    studio.events.StudioEvent.COLLAPSE_START,
    collapseStartHandler);
}

function collapsedViewportClickHandler(e) {
  Enabler.requestExpand();
}

function expandStartHandler() {
  collapsedViewport.style.display = 'none';
  expandedViewport.style.display = 'block';

  Enabler.finishExpand();

  if (!isVideoCompCreated) {
    // Create the video component, only do this once and hide
    // and show it subsequently.
    videoComp = new studio.sdk.rad.Video({
      id: 'YT Comedy Trailer',
      autoplay: true, // Autoplays the first time.
      controls: true,
      sources: ['video.mp4'] // No need for Enabler.getUrl() here.
    });

    // Set the element it will decorate.
    videoComp.setElement(videoContainer);

    // Note: getVideoElement() returns real element now, should you want
    // to set a poster attribute.
  } else {
    videoComp.getVideoElement().style.visibility = 'visible';
    if (videoComp.getVideoElement().paused) {
      videoComp.getVideoElement().play();
    }
  }

  isVideoCompCreated = true;
}

function collapseStartHandler() {
  collapsedViewport.style.display = 'block';
  expandedViewport.style.display = 'none';

  Enabler.finishCollapse();

  videoComp.getVideoElement().style.visibility = 'hidden';
  if (!videoComp.getVideoElement().paused) {
    videoComp.getVideoElement().pause();
  }
}

Enabler.loadModule(studio.module.ModuleId.RAD_VIDEO, function() {
  // Enabler.loadModule waits for the Enabler to initialize so no need
  // for extra isInitialized() check here.
  collapsedViewport = document.querySelector('#collapsed');
  expandedViewport = document.querySelector('#expanded');
  videoContainer = document.querySelector('#video-container');

  setUpExpandLifeCycle();

  collapsedViewport.addEventListener(
    'click',
    collapsedViewportClickHandler,
    false);
});