Aurora Attributes and Properties

<script src="https://fast.wistia.com/embed/abc123.js" async type="module"></script>
<script src="https://fast.wistia.com/player.js" async></script>

<!-- This player is red. -->
<wistia-player media-id="abc123" player-color="#ff0000"></wistia-player>

<!-- This player is green. -->
<wistia-player media-id="abc123" player-color="#00ff00"></wistia-player>

<!-- And this player has a bunch of different options set at once! -->
<wistia-player media-id="abc123" big-play-button="false" muted player-color="#0000ff"></wistia-player>

import { WistiaPlayer } from "@wistia/wistia-player-react";

// This player is red.
<WistiaPlayer mediaId="abc123" playerColor="#ff0000" />

// This player is green.
<WistiaPlayer mediaId="abc123" playerColor="#00ff00" />
    
// And this player has a bunch of different options set at once!
<WistiaPlayer mediaId="abc123" bigPlayButton={false} muted={true} playerColor="#0000ff" />

// This player is red.
const player1 = document.createElement("wistia-player");
player1.mediaId = "abc123";
player1.playerColor = "#ff0000";
document.body.appendChild(player1);

// This player is green.
const player2 = document.createElement("wistia-player");
player2.mediaId = "abc123";
player2.playerColor = "#00ff00";
document.body.appendChild(player2);

// And this player has a bunch of different options set at once!
const player3 = document.createElement("wistia-player");
player3.mediaId = "abc123";
player3.bigPlayButton = false;
player3.muted = true;
player3.playerColor = "#0000ff";
document.body.appendChild(player3);

<wistia-player media-id="abc123"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
  
// Set mediaId option
player.mediaId = "abc123";
player.mediaId; // Returns "abc123"

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" />

<wistia-player media-id="abc123" aspect="1.7"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set aspect option
player.aspect = 1.7;
player.aspect; // Returns 1.7

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" aspect={1.7} />

<wistia-player media-id="abc123" audio-description-control="true"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set audioDescriptionControl option
player.audioDescriptionControl = true;
player.audioDescriptionControl; // Returns true

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" audioDescriptionControl={true} />

<wistia-player media-id="abc123" autoplay></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set autoplay option
player.autoplay = true;
player.autoplay; // Returns true

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" autoplay={true} />

<wistia-player media-id="abc123" big-play-button="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set bigPlayButton option
player.bigPlayButton = false;
player.bigPlayButton; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" bigPlayButton={false} />

<wistia-player media-id="abc123" controls-visible-on-load="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set controlsVisibleOnLoad option
player.controlsVisibleOnLoad = false;
player.controlsVisibleOnLoad; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" controlsVisibleOnLoad={false} />

<wistia-player media-id="abc123" copy-link-and-thumbnail="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set copyLinkAndThumbnail option
player.copyLinkAndThumbnail = false;
player.copyLinkAndThumbnail; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" copyLinkAndThumbnail={false} />

<wistia-player media-id="abc123" current-time="5"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";

// Set currentTime option
player.currentTime = 3.5;
player.currentTime; // Returns `3.5`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" currentTime={5} />

<wistia-player media-id="abc123" do-not-track></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set doNotTrack option
player.doNotTrack = true;
player.doNotTrack; // Returns `true`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" doNotTrack={true} />

<wistia-player media-id="abc123" email="[email protected]"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set email option
player.email = '[email protected]';
player.email; // Returns `[email protected]`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" email="[email protected]" />

<wistia-player media-id="abc123" end-video-behavior="reset"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set endVideoBehavior option
player.endVideoBehavior = 'reset';
player.endVideoBehavior; // Returns `'reset'`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" endVideoBehavior="reset" />

<wistia-player media-id="abc123" fullscreen-control="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set fullscreenControl option
player.fullscreenControl = false;
player.fullscreenControl; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" fullscreenControl={false} />

<wistia-player media-id="abc123" muted></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set muted option
player.muted = true;
player.muted; // Returns `true`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" muted={true} />

<wistia-player media-id="abc123" playback-rate-control="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set playbackRateControl option
player.playbackRateControl = false;
player.playbackRateControl; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" playbackRateControl={false} />

<wistia-player media-id="abc123" play-bar-control="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set playBarControl option
player.playBarControl = false;
player.playBarcontrol; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" playBarControl={false} />

<wistia-player media-id="abc123" player-color="#2949E5"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set player color option
player.playerColor = "1e64f0";
player.playerColor; // Returns "1e64f0"

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" playerColor="#2949E5" />

<wistia-player media-id="abc123" playlist-links="auto"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set playlistLinks option
player.playlistLinks = "auto";
player.playlistLinks; // Returns "auto"

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" playlistLinks="auto" />

<wistia-player media-id="abc123" playlist-links="auto" playlist-loop></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set playlistLinks option
player.playlistLinks = "auto";

// Set playlistLoop option
player.playlistLoop = true; // Returns "true"

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" playlist-links="auto" playlistLoop={true} />

<wistia-player media-id="abc123" play-pause-control="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set playPauseControl option
player.playPauseControl = false; 
player.playPauseControl  // returns `false` 

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" playPauseControl={false} />

<wistia-player media-id="abc123" play-pause-notifier="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set playPauseNotifier option
player.playPauseNotifier = false; 
player.playPauseNotifier  // returns `false` 

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" playPauseNotifier={false} />

<wistia-player media-id="abc123" poster="https://my-image.com/picture.jpg"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set poster option
player.poster = 'https://my-image.com/picture.jpg'; 
player.poster  // returns `https://my-image.com/picture.jpg` 

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" poster="https://my-image.com/picture.jpg" />

<wistia-player media-id="abc123" preload="none"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set preload option
player.preload = false; 
player.preload  // returns `false` 

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" preload="none" />

<wistia-player media-id="abc123" quality-control="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set qualityControl option
player.qualityControl = false; 
player.qualityControl  // returns `false` 

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" qualityControl={false} />

<wistia-player media-id="abc123" quality-max="1080"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set qualityMax option
player.qualityMax = 1080; 
player.qualityMax  // returns `1080` 

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" qualityMax={1080} />

<wistia-player media-id="abc123" quality-min="540"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set qualityMin option
player.qualityMin = 540; 
player.qualityMin  // returns `540` 

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" qualityMin={540} />

<wistia-player media-id="abc123" resumable></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set resumable option
player.resumable = true;
player.resumable; // Returns `true`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" resumable={true} />

<wistia-player media-id="abc123" rounded-player="24"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set rounded player option
player.roundedPlayer = 24;
player.roundedPlayer; // Returns 24

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" roundedPlayer={24} />

<wistia-player media-id="abc123" seo="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set seo option
player.seo = false;
player.seo; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" seo={false} />

<wistia-player media-id="abc123" settings-control="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set settingsControl option
player.settingsControl = false;
player.settingsControl; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" settingsControl={false} />

<wistia-player media-id="abc123" autoplay silent-autoplay="allow"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set silentAutoplay option
player.silentAutoplay = 'allow';
player.siltenAutoplay; // Returns `'allow'`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" silentAutoplay="allow" />

<wistia-player media-id="abc123" swatch="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set settingsControl option
player.swatch = false;
player.swatch; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" swatch={false} />

<wistia-player media-id="abc123" transparent-letterbox="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set transparentLetterbox option
player.transparentLetterbox = false;
player.transparentLetterbox; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" transparentLetterbox={false} />

<wistia-player media-id="abc123" video-quality="360"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";

// Set videoQuality option
player.videoQuality = 720;
player.transparentLetterbox; // Returns `720`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" videoQuality={360} />

<wistia-player media-id="abc123" volume="0.5"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set volume option
player.volume = 0.5;
player.volume; // Returns `0.5`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" volume={0.5} />

<wistia-player media-id="abc123" volume-control="false"></wistia-player>

// Set up a new player
const player = document.createElement("wistia-player");
player.mediaId = "abc123";
  
// Set volumeControl option
player.volumeControl = false;
player.volumeControl; // Returns `false`

// Add player to document
document.body.appendChild(player);

import { WistiaPlayer } from "@wistia/wistia-player-react"; 

<WistiaPlayer mediaId="abc123" volumeControl={false} />

<script src="https://fast.wistia.com/embed/abc123.js" async type="module"></script>
<script src="https://fast.wistia.com/player.js" async></script>

<wistia-player media-id="abc123"></wistia-player>
<button type="button" id="halfway-button">Skip to the halfway point!</button>

<script>
  const player = document.getElementById('my-player');
  const halfwayButton = document.getElementById('halfway-button');

  // When a button is clicked...
  halfwayButton.addEventListener('click', () => {
    // Use the read-only duration property to set the media to its halfway point
    player.currentTime = player.duration / 2;
  });
</script>

const player = document.getElementById('my-player');
console.log(player.buffered);

// Example output: TimeRanges{ end: end(index), length: 1, start: start(index) }

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleApiReady() {
    if (player.current === null) { return; }
    console.log(player.buffered);
    
		// Example output: TimeRanges{ end: end(index), length: 1, start: start(index) }
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onApiReady={handleApiReady} />
  );
}

const player = document.getElementById('my-player');
console.log(`This video is ${player.duration} seconds long.`);

// Example output: "This video is 120 seconds long."

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleLoadedMetadata() {
    if (player.current === null) { return; }
    console.log(`This video is ${player.duration} seconds long.`);

		// Example output: "This video is 120 seconds long."
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onLoadedMetadata={handleLoadedMetadata} />
  );
}

const player = document.getElementById('my-player');
console.log(player.embedOptions);

// Example output: { playerColor: "00ff00", fullscreenControl: false }

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleApiReady() {
    if (player.current === null) { return; }
    console.log(player.embedOptions);

		// Example output: { playerColor: "00ff00", fullscreenControl: false }
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onApiReady={handleApiReady} />
  );
}

const player = document.getElementById('my-player');
console.log(`The media has${player.ended ? "" : " not"} ended.`);

// Example output: "The media has ended."

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleEnded() {
    if (player.current === null) { return; }
    console.log(`The media has${player.ended ? "" : " not"} ended.`);

    // Example output: "The media has ended."
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onEnded={handleEnded} />
  );
}

const player = document.getElementById('my-player');
console.log(player.eventKey);

// Example output: "123-abc-4567-89"

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleApiReady() {
    if (player.current === null) { return; }
    console.log(player.eventKey);

		// Example output: "123-abc-4567-89"
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onApiReady={handleApiReady} />
  );
}

const player = document.getElementById('my-player');
console.log(`The media is${player.inFullscreen ? "" : " not"} currently in fullscreen.`);

// Example output: "The media is not currently in fullscreen."

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleCancelFullscreen() {
    if (player.current === null) { return; }
    console.log(`The media is${player.inFullscreen ? "" : " not"} currently in fullscreen.`);

		// Example output: "The media is not currently in fullscreen."
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onCancelFullscreen={handleCancelFullscreen} />
  );
}

const player = document.getElementById('my-player');
console.log(player.name);

// Example output: "Lenny Delivers Video"

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleLoadedMetadata() {
    if (player.current === null) { return; }
    console.log(player.name);

		// Example output: "Lenny Delivers Video"
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onLoadedMetadata={handleLoadedMetadata} />
  );
}

const player = document.getElementById('my-player');
console.log(`The media is${player.paused ? "" : " not"} paused.`);

// Example output: "The media is paused."

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handlePause() {
    if (player.current === null) { return; }
    console.log(`The media is${player.paused ? "" : " not"} paused.`);

		// Example output: "The media is paused."
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onPause={handlePause} />
  );
}

const player = document.getElementById('my-player');
console.log(`The viewer has watched ${(player.percentWatched * 100)}% of the video.`);

// Example output: "The viewer has watched 75.25% of the video."

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handlePercentWatchedChange() {
    if (player.current === null) { return; }
    console.log(`The viewer has watched ${(player.percentWatched * 100)}% of the video.`);

		// Example output: "The viewer has watched 75.25% of the video."
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onPercentWatchedChange={handlePercentWatchedChange} />
  );
}

const player = document.getElementById('my-player');
console.log(player.readyState)

// Example output: 4

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleApiReady() {
    if (player.current === null) { return; }
    console.log(player.readyState)

		// Example output: 4
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onApiReady={handleApiReady} />
  );
}

const player = document.getElementById('my-player');
console.log(`The viewer has watched ${player.secondsWatched} seconds.`);

// Example output: "The viewer has watched 24 seconds."

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleSecondChange() {
    if (player.current === null) { return; }
    console.log(`The viewer has watched ${player.secondsWatched} seconds.`);

		// Example output: "The viewer has watched 24 seconds."
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onSecondChange={handleSecondChange} />
  );
}

const player = document.getElementById('my-player');

player.addEventListener("ended", () => {
  var watchedVector = player.secondsWatchedVector;
  var watchedImportantSeconds = 0;
  for (var i = 4; i < 9; i++) {
    if (watchedVector[i] > 0) {
      watchedImportantSeconds += 1;
    }
  }
  if (watchedImportantSeconds < 2) {
    console.log("You should really go back and watch seconds 5 through 10. They're important!");
  }
});

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleSecondChange() {
    if (player.current === null) { return; }
    
    var watchedVector = player.secondsWatchedVector;
    var watchedImportantSeconds = 0;
    for (var i = 4; i < 9; i++) {
      if (watchedVector[i] > 0) {
        watchedImportantSeconds += 1;
      }
    }
    if (watchedImportantSeconds < 2) {
      console.log("You should really go back and watch seconds 5 through 10. They're important!");
    }
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onEnded={handleEnded} />
  );
}

const player = document.getElementById('my-player');
const customPlayPauseButton = document.getElementById('play-pause-button');

customPlayPauseButton.addEventListener('click', () => {
  if (player.state === 'playing') {
    player.pause();
  } else {
    player.play();
  }
});

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handleClick() {
    if (player.current === null) { return; }
    
    if (player.state === 'playing') {
      player.pause();
    } else {
      player.play();
    }
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" />
    <button type="button" onClick={handleClick}>Play/Pause</button>
  );
}

const player = document.getElementById('my-player');
console.log(`This viewer's visitor key is ${player.visitorKey}.`);

// Example output: "This viewer's visitor key is 123_abc."

import { useRef } from "react";
import { WistiaPlayer } from "@wistia/wistia-player-react";

export default function App() {
  const player = useRef(null);
  
  function handlePlay() {
    if (player.current === null) { return; }
    console.log(`This viewer's visitor key is ${player.visitorKey}.`);

		// Example output: "This viewer's visitor key is 123_abc."
  }
  
  return (
    <WistiaPlayer ref={player} mediaId="abc123" onPlay={handlePlay} />
  );
}