Skip to content

Latest commit

 

History

History
122 lines (119 loc) · 4.42 KB

AlphaVideoPlayer.md

File metadata and controls

122 lines (119 loc) · 4.42 KB
Raw

AlphaVideoPlayer

Kind: global class

new AlphaVideoPlayer()

This object creates a VideoPlayer instance and attaches HTML Canvas masking. This player has the ability to function exactly the same as a regular VideoPlayer instance. 

import { AlphaVideoPlayer } from 'ad-video'

Note:
If using a dynamic video mask (rather than a static mask from a PNG, JPG, or other bitmap source) then ensure the runtimeIncludes object of your index.html file contains MpegPlugin.min.js:
var runtimeIncludes = { get mpegPluginPath(){ return adParams.corePath + "js/video/MpegPlugin.min.js"; }, };

For more info about building an AlphaVideoPlayer masked video, visit {@link https://confluence.ff0000.com/display/AT/Alpha+Video }

There are two key properties which make AlphaVideoPlayer unique to VideoPlayer:

mask: An object with two parameters:

  • source: the image source to use as the mask
  • alphaMatte: if true, uses the image's natural transparancies to create the masking. If false, will use black and white values to determine masking.


    • By adding a mask, the video will have STATIC MASKING. If The video's mask needs to move, this requires a DYNAMIC MASKING solution.

    videoStacked: If true, the video to render and video's luma matte are stacked within the video source. If false, the two are side by side. Default to false.
    Will be overwritten if a static mask is used.

    WARNING: If you are using a Dynamic Mask, the video format must be MPG and the index's runtimeIncludes must import the MpegPlugin.min.js 
    var runtimeIncludes = {
	get mpegPluginPath(){ return adParams.corePath + "js/video/MpegPlugin.min.js"; },
};

    In addition, if you are using building an inline autoplay unit, Android devices require a video format that must be MPG. The source can either be an MPG or an array.
    Use an array for STATIC, not DYNAMIC, masking so that only Android needs to load the MpegPlugin script: other devices should be able to use MP4 just fine. 
    source: adParams.videosPath + 'myVideo.mpg'
// or
source: [
	adParams.videosPath + 'myVideo.mp4',
	adParams.videosPath + 'myVideo.mpg',
],



    Sample Player - Uses a video with a stacked masking source. (NOTE THE MPG VIDEO FORMAT)
    View.main.AlphaVideoPlayer = new AlphaVideoPlayer ({
	id: 'myAlphaVideoPlayer',
	target: View.main,
	css: {
		width: 970,
		height: 650,
	},
	source: adParams.videosPath + 'alpha_intro_vid_v2_withAlpha.mpg',
	videoStacked: true,
	preload: true,
	autoPlay: false,
	muted: true,
} );
View.main.AlphaVideoPlayer.play();


    Sample - Uses a PNG - named 'red_png' - as a mask. The native alpha channel defines the visible area. (NOTE THE MP4 VIDEO FORMAT)
    View.main.AlphaVideoPlayer = new AlphaVideoPlayer ({
	id: 'myAlphaVideoPlayer',
	target: View.main,
	css: {
		width: 970,
		height: 650,
	},
	source: adParams.videosPath + 'alpha_intro_vid_v2_noAlpha.mp4',
	mask: {
		source: 'red_png',
		alphaMatte: true
	},
	preload: true,
	autoPlay: false,
	muted: true,
});
View.main.AlphaVideoPlayer.play();





    Sample - Uses a JPG - named 'red_jpg' - as a mask. The image's blacks and whites define the visible area. (NOTE THE MP4 VIDEO FORMAT)
    View.main.AlphaVideoPlayer = new AlphaVideoPlayer ({
	id: 'myAlphaVideoPlayer',
	target: View.main,
	css: {
		width: 970,
		height: 650,
	},
	source: adParams.videosPath + 'alpha_intro_vid_v2_noAlpha.mp4',
	mask: {
		source: 'red_jpg',
	},
	preload: true,
	autoPlay: false,
	muted: true,
} );
View.main.AlphaVideoPlayer.play();