Tutorial: Basic

Basic

Overview

A Basic video player implementation has a few parts:

  1. wralvideo.js included in the document head
  2. Native HTML5 video element
  3. Script to mount the video element

Implementation

Include Google's IMA SDK loader

The IMA SDK loader is required for the videojs-ima plugin to work.

<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

Include wralvideo in <head>

Load the wralvideo library from our CDN in the <head> of the document.

<script defer="defer" src="https://video-player.cdn.wral.com/wralvideo.js"></script>

Place a native HTML5 video element

Use the native <video> element like in the following example.

    <video id="example" data-title="Example Video">
        <source
        src="https://content.uplynk.com/channel/4f69a64fd31e4e80bf62e31d1d57f9e5.m3u8?ad=desktop&ad.url=https%3A%2F%2Fwral.com&ad.description_url=https%3A%2F%2Fwral.com&euid=desktop&expand=live"
        type="application/x-mpegURL"
        />
    </video>

Mount the video element with a script

The wralvideo function accepts any DOM element. To wait until the DOM has finished loading and mount the #example element from the previous step, use a script like the following:

<script>
window.addEventListener('DOMContentLoaded', () => {
    wralvideo(document.getElementById('example'));
});
</script>