YouTube to HTML5 loader

HTML:

<video data-yt2html5="https://www.youtube.com/embed/SVdcj6zsch0" controls></video>

Javascript:

new YouTubeToHtml5({
    withAudio: true // Filter streams to those with audio channels
});

HTML:

<video class="yt-video" data-url="https://www.youtube.com/watch?v=SVdcj6zsch0" controls></video>

Javascript:

new YouTubeToHtml5({
    selector: '.yt-video',
    attribute: 'data-url'
});

CSS:

video.is-loading {
    opacity: 0.4;
    pointer-events: none;
    border: 2px solid red;
}

HTML:

<video data-yt2html5="https://www.youtube.com/embed/SVdcj6zsch0" controls></video>

Javascript:

var player = new YouTubeToHtml5({
    autoload: false // Disable loading videos on init, `.load()` method is required.
});

// Add loading class to video element
player.addAction('load.before', function(element) {
    element.classList.add('is-loading');
});

// Remove loading class after API HTTP request completes.
player.addAction('load.after', function(element) {
    // Wait for video to be playable before removing the loading class
    element.addEventListener('loadeddata', function() {
        element.classList.remove('is-loading');
    });
});

// Now we can load videos.
player.load();

HTML:

<select id="streams" disabled></select>
<video data-yt2html5="https://www.youtube.com/embed/SVdcj6zsch0" controls></video>

Javascript:

/**
 * Get the stream quality select field.
 * @type {HTMLElement}
 */
const select = document.getElementById('streams');

/**
 * Create a new instance of the yt2html5 loader.
 * @type {YouTubeToHtml5}
 */
const player = new YouTubeToHtml5({
    autoload: false
});

/**
 * Run when the video source has been chosen, after the API call.
 * @param {YouTubeToHtml5} context The default source used for loading.
 * @param {Element} element The video element the source will be added to.
 * @param {object} response The api response data.
 */
player.addAction('load.success', function(element, response) {

    const streams = context.getStreamData(response);

    // Check if we have more than one quality/format available. Else hide select field.
    if (Array.isArray(streams) && streams.length > 1) {

        // Sort streams by quality
        streams.sort(function(a, b) {
            const aLabel = parseInt(a.label);
            const bLabel = parseInt(b.label);

            if (aLabel < bLabel) {
                return -1;
            }

            if (aLabel > bLabel) {
                return 1;
            }

            return 0;
        });

        // Loop through each stream values available.
        streams.forEach(stream => {
            /**
             * Create a new blank <option> for appending to our select field.
             * @type {HTMLElement}
             */
            const option = document.createElement('option');

            // Set the value as the stream url.
            option.value = stream.url;

            // Audio label
            const audioLabel = stream.hasAudio ? 'with audio' : 'without audio';

            // Create a human readable label.
            option.text = `${stream.format} ${audioLabel} (${stream.type} / ${stream.mime})`;

            // If this stream matches the default source, add selected property.
            if (stream.url === element.src) {
                option.setAttribute('selected', 'selected');
            }

            // Append option to select field.
            select.appendChild(option);
        });

        // Enable select field.
        select.disabled = false;

        // When select field changes, change the video elements source value.
        select.addEventListener('change', function() {
            element.src = this.value;
        });
    } else {
        select.style.display = 'none';
    }
});

// Initial load process.
player.load();

HTML:

<video data-yt2html5="https://www.youtube.com/watch?v=SVdcj6zsch0" controls></video>

Javascript:

$('video[data-yt2html5]').youtubeToHtml5();