Stream Engine Player

Stream Engine Player is a versatile video player component built on AngularJS and VideoJS, designed to provide a rich media playback experience with support for ads, analytics, and custom events.

Features

• AngularJS Integration: Seamlessly integrates with AngularJS applications.
• VideoJS Support: Built on top of VideoJS for robust video playback.
• Ad Integration: Supports ad playback using IMA SDK.
• Custom Events: Provides custom event hooks for analytics and tracking.
• Responsive Design: Adapts to different screen sizes and devices.
• Customizable: Offers various options to customize the player appearance and behavior.

Installation

To install the Stream Engine Player, use npm:

npm install stream-engine-player

Basic Usage

To use the Stream Engine Player, include it in your project and initialize it with the desired options:

import 'stream-engine-player';
import 'stream-engine-player/style';

let player = window.streamEnginePlayer('player-container-id', {
    src: "https://example.com/video.m3u8",
    controls: true,
    startTime: 30,
    startBoundry: 120,
    startLevel : 0,
    preview: {
        url: 'https://example.com/preview.jpg',
        padding: 5,
        columns: 1,
        rows: 1,
        width: 160,
        height: 90,
        downlink: 0.5,
        interval: 5,
        offset: 0
    },
    logoSrc: 'https://example.com/logo.png',
    logoPosition: 'top-left',
    logoLink: 'https://example.com',
    skipBack: 10,
    skipForward: 10,
    dvr: true,
    adTagUrl: 'https://example.com/adtag',
    logger: {
        datadog: {
            clientToken: 'your-client-token',
            service: "Your Service Name"
        },
        hls: false
    },
    overlay: {
        data: {
            timelines: [
                {
                    name: "Default Timeline",
                    events: [
                        {
                            type: "external",
                            name: "Start of Race",
                            timestamp: 383.54,
                            duration: 2,
                            description: "Start of Race",
                            thumbnail: "https://example.com/thumbnail.jpg"
                        }
                    ]
                }
            ]
        }
    },
    currentTimeEventInterval: 5,
    videoEndEventPercent: 0.9,
    sectionDuration: 10,
    analytics: {
        muxKey: '',
        playerName: 'Videoflow Player',
        videoId: 'video-123',
        videoTitle: 'Big Buck Bunny',
        videoTags: ['tag1', 'tag2'],
        channelId: 'channel-123',
        channelTitle: 'Channel V3',
        videoState: 'vod',
        videoType: 'custom',
        videoParentId: 'parent123',
        workspaceId: 'workspace123',
        workspaceToken: 'workspace-token-123',
        workspaceName: 'Workspace Name',
        workspaceOwner: 'owner-123',
        isRecording: false,
        isExternal: false,
        viewerId: 'user-123',
    },
    signingURL: "/ch/vfc-123/content/123-345-567/sign",
    tokenization: true,
    style: {
        controls_background: '#00000099',
        controls_mobile_background: '#000000AA',
        progress_bar: '#ff0036',
        progress_bar_background: '#ffffff33',
        progress_bar_loaded: '#ffffff66',
        thumb: '#ff0036',
        button: '#eeeeee',
        button_hover: '#ffffff',
        text: '#ffffff',
        volume_bar: '#ff0036',
        volume_bar_background: '#ffffff33',
        volume_thumb: '#ff0036',
    }
});

Options

• src: URL of the video source.
• controls: Boolean to show or hide player controls.
• startTime: Start time in seconds for the video.
• startBoundry: Minimum allowed seek position in seconds. Prevents seeking before this timestamp, useful for DVR streams where you want to restrict access to older content. Takes precedence over startTime if both are specified.
• startLevel: When set, use this level as the default hls.startLevel. Keep in mind that the startLevel set with the API takes precedence over config.startLevel configuration parameter.
• preview: Object containing preview thumbnail settings.
  • url: URL template for preview images.
  • padding: Padding around the preview.
  • columns: Number of columns in the preview grid.
  • rows: Number of rows in the preview grid.
  • width: Width of each preview image.
  • height: Height of each preview image.
  • downlink: Minimum downlink speed for loading previews.
  • interval: Interval between preview images.
  • offset: Offset for the preview images.
• logoSrc: URL of the logo image to display on the player.
• logoPosition: Position of the logo (e.g., 'top-left', 'bottom-right').
• logoLink: URL to navigate when the logo is clicked.
• skipBack: Number of seconds to skip back.
• skipForward: Number of seconds to skip forward.
• dvr: Boolean to enable or disable DVR functionality.
• adTagUrl: URL for the ad tag to load ads.
• logger: Object for logging configuration.
  • datadog: Configuration for Datadog logging.
    • clientToken: Client token for Datadog.
    • service: Service name for logging.
  • hls: Boolean to enable or disable HLS logging.
• overlay: Object containing overlay data.
  • data: Data for overlay timelines and events.
• currentTimeEventInterval: Interval in seconds for current time events.
• videoEndEventPercent: Percentage of video completion to trigger end event.
• sectionDuration: Duration in seconds for section watched events.
• analytics: Object containing analytics configuration.
  • muxKey: Mux analytics key.
  • playerName: Name of the player for analytics.
  • videoId: Unique identifier for the video.
  • videoTitle: Title of the video.
  • videoTags: Tags associated with the video.
  • channelId: Identifier for the channel.
  • channelTitle: Title of the channel.
  • videoState: State of the video (e.g., 'vod', 'live').
  • videoType: Type of the video (e.g., 'custom', 'upload').
  • videoParentId: Parent identifier for the video.
  • workspaceId: Identifier for the workspace.
  • workspaceToken: Token for the workspace.
  • workspaceName: Name of the workspace.
  • workspaceOwner: Owner of the workspace.
  • isRecording: Boolean indicating if the video is being recorded.
  • isExternal: Boolean indicating if the video is external.
  • viewerId: Identifier for the viewer.
• signingURL: URL for signing requests.
• tokenization: Boolean to enable or disable tokenization.
• style: Object to customize player appearance.
  • controls_background: Background color for controls.
  • controls_mobile_background: Background color for mobile controls.
  • progress_bar: Color of the progress bar.
  • progress_bar_background: Background color of the progress bar.
  • progress_bar_loaded: Color of the loaded portion of the progress bar.
  • thumb: Color of the progress bar thumb.
  • button: Color of the buttons.
  • button_hover: Color of the buttons on hover.
  • text: Color of the text.
  • volume_bar: Color of the volume bar.
  • volume_bar_background: Background color of the volume bar.
  • volume_thumb: Color of the volume thumb.

Events

The player emits several custom events that can be used for tracking and analytics:

• currenttime: Triggered periodically with the current playback time.
• videoend: Triggered when the video playback ends.
• sectionwatched: Triggered when a section of the video is watched.
• adstart: Triggered when an ad starts playing.
• adimpression: Triggered when an ad impression occurs.
• adskip: Triggered when an ad is skipped.
• adcompleted: Triggered when all ads are completed.

Example

player.on('currenttime', (e, data) => {
    console.log('Current time:', data.currentTime);
});

player.on('videoend', (e, data) => {
    console.log('Video ended:', data);
});

License

Stream Engine Player is licensed under the MIT License. See the LICENSE file for more details.