Spins

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

// Install the spins package from npm
npm install @flowplayer/spins

// Import the package for use
import { createSpins, spinEvents } from "@flowplayer/spins";

yarn add @flowplayer/spins

bun add @flowplayer/spins

<script type="module">
    import {createSpins, spinEvents} from "https://player.wowza.com/spins/stable/index.js"
</script>

import { createSpins, spinEvents } from "@flowplayer/spins";

// Use a playlist ID from Wowza Video
const playlistID = "c30850bc-eeeb-421d-9ed3-158339d0851a";

// Create Spins using playlist ID
const container = createSpins({
    token: "[your-player-token]",
    playlist: playlistID,
    plugins: ["subtitles"]
});

// Listen for the SPIN_IN_VIEWPORT event
container.on(spinEvents.SPIN_IN_VIEWPORT, (ev) => {
    const { config, spin, index } = ev.detail;
    console.log("spin_in_viewport_data: ", config, spin, index);
    // Add your code here
});

// Append the container to the DOM
document.body.append(container);

import { createSpins, spinEvents } from "@flowplayer/spins";

// Manually define an array of spin items
const spinItemArray = [
    {
       // Add media ID for a Wowza Video asset
        url: "38a31588-07a0-49bf-ba55-fa0310e13f15"
    },
    {
        url: "https://cf23f0bd0.lwcdn.com/hls/9eda7730-23e9-4462-9ad4-c53e8004c3e9/playlist.m3u8",
        title: "A title",
        description: "A description",
        poster: "//cf23f0bd0.lwcdn.com/i/v-i-9eda7730-23e9-4462-9ad4-c53e8004c3e9-1.jpg"
    },
    {
        url: "https://stdlwcdn.lwcdn.com/hls/2cd21de6-1586-428b-bf7f-acc3fdcfd697/playlist.m3u8",
        poster: "//stdlwcdn.lwcdn.com/i/v-i-67059b8d-ce1a-457e-9af1-d927ff945826-1.jpg",
        title: "Test - missing mp4 01/09/2025 14:57"
    },
    {
        url: "https://cdn.flowplayer.com/d9cd469f-14fc-4b7b-a7f6-ccbfa755dcb8/hls/383f752a-cbd1-4691-a73f-a4e583391b3d/playlist.m3u8?t=1",
        subtitles: {
            tracks: [
                {
                    src: "https://builds.flowplayer.com/samples/en.vtt",
                    lang: "en",
                    label: "English"
                },
                {
                    src: "https://builds.flowplayer.com/samples/pt.vtt",
                    lang: "pt",
                    label: "Portuguese"
                }
            ]
        }
    }
];

// Create Spins using spin item array
const container = createSpins({
    playlist: spinItemArray,
    plugins: ["subtitles"]
});

// Listen for the SPIN_IN_VIEWPORT event
container.on(spinEvents.SPIN_IN_VIEWPORT, (ev) => {
    const { config, spin, index } = ev.detail;
    console.log("spin_in_viewport_data: ", config, spin, index);
    // Add your code here
});

// Append the container to the DOM
document.body.append(container);

import {
  createSpins,
  spinEvents,
  mediaEvents,
  adEvents
} from "@flowplayer/spins";

const container = createSpins({
  playlist: "[your-playlist-id]",
  token: "[your-player-token]",
  lang: "en",
  adsFrequency: 5,
  ima: {
    ads: [
      { adTag: "https://pubads.g.doubleclick.net/gampad/ads?...", time: 0 }
    ]
  }
});

// Spin lifecycle events
container.on(spinEvents.SPIN_CREATED, (ev) => {
  const { config, spin, index } = ev.detail;
  console.log("New spin created:", spin);
});

container.on(spinEvents.SPIN_IN_VIEWPORT, (ev) => {
  const { config, spin, index } = ev.detail;
  console.log("Spin is now in viewport:", spin);
});

// Media events
container.onPlayerEvent(mediaEvents.TIME_UPDATE, (ev) => {
  const { spinIndex, duration, currentTime } = ev.detail;
  console.log(`Progress: ${currentTime}/${duration}`);
});

// Ad events
container.onPlayerEvent(adEvents.AD_STARTED, (ev) => {
  console.log(`Ad started at spin ${ev.detail.spinIndex}`);
});

document.body.appendChild(container);

import { createSpins } from "@flowplayer/spins";
import { useEffect, useRef } from "react";

function SpinsPlayer({ playlistId }: { playlistId: string }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const spinsContainer = createSpins({
      playlist: playlistId,
      token: "[your-player-token]",
      lang: "en"
    });
    containerRef.current.appendChild(spinsContainer);

    return () => {
      if (containerRef.current.contains(spinsContainer)) {
        containerRef.current.removeChild(spinsContainer);
      }
    };
  }, [playlistId]);

  return <div ref={containerRef} className="spins-container" />;
}

const container = createSpins({
  playlist: [
    {
      url: "https://example.com/video1.mp4",
      title: "Breaking news",
      article_url: "https://example.com/article-1",
    },
    {
      url: "https://example.com/video2.mp4",
      title: "Follow-up story",
      article_url: "https://example.com/article-2",
    },
  ],
  token: "[your-player-token]",
  articleLabel: "Go to article", // default: "Read more"
});

import { createSpins, spinEvents } from "@flowplayer/spins";

const container = createSpins({
  playlist: "[your-playlist-id]",
  token: "[your-player-token]",
  closeButton: true,
});

container.on(spinEvents.CLOSE, () => {
  container.remove();
});

document.body.appendChild(container);

const container = createSpins({
  playlist: "[your-playlist-id]",
  token: "[your-player-token]",
  firstAdIndex: 5,   // first ad on the 5th spin
  adsFrequency: 3,   // then every 3rd spin after: 5, 8, 11, ...
  ima: {
    ads: [{
      adTag: "https://pubads.g.doubleclick.net/gampad/ads?...",
      time: 0
    }]
  }
});

const container = createSpins({
  playlist: "[your-playlist-id]",
  token: "[your-player-token]",
  adPositions: [2, 7, 11],  // ads only on these spins
  ima: {
    ads: [{
      adTag: "https://pubads.g.doubleclick.net/gampad/ads?...",
      time: 0
    }]
  }
});