Monitor HLS.js

1
// Import HLS.js library for video streaming
2
import Hls from "hls.js";
3
import fastpixMetrix from "@fastpix/video-data-core";
4
5
// Reference to the video element
6
const videoPlayerElement = document.getElementById("video-player");
7
const initializationTime = fastpixMetrix.utilityMethods.now();
8
9
// Create a new HLS instance
10
const hlsPlayerInstance = new Hls();
11
hlsPlayerInstance.loadSource(""); // Load the video stream
12
hlsPlayerInstance.attachMedia(videoPlayerElement);
13
14
// Custom metadata for tracking
15
const trackingData = {
16
  workspace_id: "WORKSPACE_KEY", // Unique key to identify your workspace (replace with your actual workspace key)
17
  player_name: "Main Video Player", // A custom name or identifier for this video player instance
18
  player_init_time: initializationTime, // Timestamp of when the player was initialized (useful for tracking performance metrics)
19
20
  // Add any additional metadata
21
};
22
23
// Pass both `hlsPlayerInstance` and `Hls` to the FastPix tracker for correct tracking
24
fastpixMetrix.tracker(videoPlayerElement, {
25
  debug: false, // Set to true to enable debug logs in the console
26
  hlsjs: hlsPlayerInstance, // Pass the `hlsPlayerInstance` created above
27
  Hls, // Pass the `Hls` constructor (imported)
28
  data: trackingData, // Attach custom metadata for analytics and tracking
29
});
30
31
// To stop monitoring call when destroying the HLS player
32
// videoPlayerElement.fp.destroy();

1
// Import HLS.js library for video streaming
2
import Hls from "hls.js";
3
import fastpixMetrix from "@fastpix/video-data-core";
4
5
// Reference to the video element
6
const videoPlayerElement = document.getElementById("video-player");
7
const initializationTime = fastpixMetrix.utilityMethods.now(); // Get the current timestamp for player initialization
8
9
// Create a new HLS instance
10
const hlsPlayerInstance = new Hls();
11
hlsPlayerInstance.loadSource(""); // Load the video stream
12
hlsPlayerInstance.attachMedia(videoPlayerElement);
13
14
// Custom metadata for tracking
15
const trackingData = {
16
  workspace_id: "WORKSPACE_KEY", // Unique key to identify your workspace (replace with your actual workspace key)
17
  player_name: "Main Video Player", // A custom name or identifier for this video player instance
18
  player_init_time: initializationTime, // Timestamp of when the player was initialized (useful for tracking performance metrics)
19
  video_title: "Test Content", // Title of the video being played (replace with the actual title of your video)
20
  video_id: "f01a98s76t90p88i67x", // A unique identifier for the video (replace with your actual video ID for tracking purposes)
21
  viewer_id: "user12345", // A unique identifier for the viewer (e.g., user ID, session ID, or any other unique value)
22
  video_content_type: "series", // Type of content being played (e.g., series, movie, etc.)
23
  video_stream_type: "on-demand", // Type of streaming (e.g., live, on-demand)
24
  // Custom fields for additional business logic
25
  custom_1: "", // Use this field to pass any additional data needed for your specific business logic
26
  custom_2: "", // Use this field to pass any additional data needed for your specific business logic
27
28
  // Add any additional metadata here if needed
29
};
30
31
// Pass both `hlsPlayerInstance` and `Hls` to the FastPix tracker for correct tracking
32
fastpixMetrix.tracker(videoPlayerElement, {
33
  debug: false, // Set to true to enable debug logs in the console
34
  hlsjs: hlsPlayerInstance, // Pass the `hlsPlayerInstance` created above
35
  Hls, // Pass the `Hls` constructor (imported)
36
  data: trackingData, // Attach custom metadata for analytics and tracking
37
});

1
// Reference to the video element
2
const videoPlayerElement = document.getElementById("video-player");
3
4
// Configuration for FastPix tracker
5
const trackingData = {
6
  debug: true, // Set to true to enable debug logs in the console
7
  hlsjs: hls, // Pass the HLS.js instance
8
  Hls: Hls, // Pass the Hls constructor (imported)
9
  disableCookies: true, // Set to true to disable cookies for tracking sessions and unique viewers
10
  respectDoNotTrack: true, // Set to true to honor users' 'Do Not Track' preferences
11
  automaticErrorTracking: false, // Set to false to disable automatic tracking of fatal errors
12
  data: {
13
    workspace_id: "WORKSPACE_KEY", // Replace with your actual workspace key
14
    // ... add other metadata as needed
15
  },
16
};
17
18
// Initialize the FastPix tracker with the configuration
19
fastpixMetrix.tracker(videoPlayerElement, trackingData);

1
// videoPlayerElement is the HTML5 <video> element representing your video player.
2
const videoPlayerElement = document.getElementById("video-player");
3
4
videoPlayerElement.fp.dispatch("error", {
5
  player_error_code: 1024, // Custom error code
6
  player_error_message: "Description of error", // Generalized error message
7
  player_error_context: "Additional context for the error", // Instance-specific information
8
});

1
// videoPlayerElement is the HTML5 <video> element representing your video player.
2
const videoPlayerElement = document.getElementById("#my-player");
3
4
videoPlayerElement.fp.dispatch("videoChange", {
5
  video_id: "abc345", // Unique identifier for the new video
6
  video_title: "My Other Great Video", // Title of the new video
7
  video_series: "Weekly Great Videos", // Series name if applicable
8
9
  // Additional metadata can be included here
10
});

1
import Hls from "hls.js";
2
import fastpixMetrix from "@fastpix/video-data-core";
3
4
const videoElement = document.getElementById("video-player"); // Video element reference
5
const videoSourceUrl =
6
  "https://stream.fastpix.com/1f3d3b7b-dfc2-4b29-a9ff-9e71c36acc64.m3u88"; // Your HLS stream URL
7
8
// Ensure the video element is available
9
if (videoElement) {
10
  let hlsInstance;
11
12
  const playerInitTime = fastpixMetrix.utilityMethods.now(); // Get player initialization time
13
14
  // Check if the video element can play HLS natively (Safari support)
15
  if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
16
    
17
    // For Safari, which has native HLS support
18
    videoElement.src = videoSourceUrl;
19
  } else if (Hls.isSupported()) {
20
    
21
    // For other browsers, initialize Hls.js
22
    hlsInstance = new Hls();
23
    hlsInstance.loadSource(videoSourceUrl); // Load the video stream
24
    hlsInstance.attachMedia(videoElement); // Attach the stream to the video element
25
26
    // Custom metadata to be passed for tracking
27
    const customData = {
28
      workspace_id: "WORKSPACE_KEY", // Replace with your workspace key
29
      player_name: "Main Player", // Identifier for the player instance
30
      player_init_time: playerInitTime, // Player initialization time
31
32
      // Add any additional metadata here
33
    };
34
35
    // pass both `hlsInstance` and `Hls` to the FastPix tracker for correct tracking
36
    fastpixMetrix.tracker(videoElement, {
37
      debug: false,
38
      hlsjs: hlsInstance, // Pass the `hlsInstance` created above
39
      Hls, // Pass the `Hls` constructor (imported)
40
      data: customData,
41
    });
42
  }
43
}