CyberVideoPlayer

A clean and functional embeddable HTML video player, hosted with Github Pages.

CyberVideoPlayer Social Image

Features

Usage

Try out the embed generator to get a feel for CyberVideoPlayer with your own videos.

Example working URL:
https://cybergen49.github.io/CyberVideoPlayer/player/?src=aHR0cDovL2NvbW1vbmRhdGFzdG9yYWdlLmdvb2dsZWFwaXMuY29tL2d0di12aWRlb3MtYnVja2V0L3NhbXBsZS9CaWdCdWNrQnVubnkubXA0&autoplay

Embedding the player on your site:

<!-- `width` and `height` can be changed here to suit your needs, or removed entirely to style with CSS -->
<!-- Be sure to replace `src` with your own link -->
<iframe src="https://cybergen49.github.io/CyberVideoPlayer/player/?src=aHR0cDovL2NvbW1vbmRhdGFzdG9yYWdlLmdvb2dsZWFwaXMuY29tL2d0di12aWRlb3MtYnVja2V0L3NhbXBsZS9CaWdCdWNrQnVubnkubXA0&autoplay"
        allow="autoplay; fullscreen"
        frameborder=0
        width=384
        height=216
        id="videoPlayer"
>

Without allowing autoplay, the player might have trouble autoplaying the video if the user doesn’t interact with it first. Without allowing fullscreen, all fullscreen functionality will cease to function.

cybergen49.github.io/CyberVideoPlayer can be replaced with vid.simplecyber.org for a shorter URL, but only in this specific repository (meaning it won’t work if you clone, download, etc.)

This repository is a template, so it’s easy to clone it for yourself if you want to make changes or use your own domain.

Query string parameters

These parameters control various aspects of the player. Pass them after the main URL and a question mark (?), and separate each parameter with an ampersand (&). Parameters without an equal sign don’t need a value.

Required

Optional

Error icons

Reading data from the player

CyberVideoPlayer allows for its parent site to access some video information. Use the following Javascript on your site to read and save data sent from the player:

// Save messages from the player
var videoData = {};
window.onmessage = function(e) {
    // Update the videoData object
    Object.assign(window.videoData, e.data);
    // Log the most up to date data to the console
    console.log(videoData); 
};

Properties

Note that the player only sends data as it changes, so you shouldn’t rely on a property existing at any given time. The use of Object.assign() allows us to update the videoData object with the most up-to-date data and use it elsewhere.

Sending commands to the player

In addition to reading data from the player, you can also send it commands to control it. Use the following Javascript to send a command to the player.

// Replace 'videoPlayer' with the ID of your <iframe>
var player = document.getElementById("videoPlayer");
// Build the command
var msg = {'cmd': 'pause'};
// Send the message
player.contentWindow.postMessage(msg, '*');

Commands

Changelog

Hotfix commits to the repo aren’t mentioned here.

1.7.1 - 2021-11-16

1.7.0 - 2021-11-08

1.6.0 - 2021-11-06

1.5.0 - 2021-11-05

1.4.0 - 2021-11-04

1.3.1 - 2021-11-03

1.3.0 - 2021-11-02

1.2.0 - 2021-10-31

1.1.0 - 2021-10-30

1.0.0 - 2021-10-27