Quantcast
Channel: Active questions tagged youtube-api - Stack Overflow
Viewing all articles
Browse latest Browse all 3638

Youtube to HTML5 Loader forcing 720p with audio

$
0
0

I want to embed a YouTube video but as HTML5 video and I found the solution. It can be easily implemented with the help of YouTube to HTML5 video by Levi Cole. I am using the following code to embed my video...

<script src="https://cdn.jsdelivr.net/npm/@thelevicole/youtube-to-html5-loader@4.0.1/dist/YouTubeToHtml5.min.js"></script><select id="streams" disabled></select><video data-yt2html5="https://www.youtube.com/embed/5EurHP1DCJg" controls></video><script>/** * 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 {string} source The default source used for loading. * @param {object} data The selected stream data. Includes url and label. * @param {HTMLElement} element The video element the source will be added to. * @param {string} format The current format/quality. * @param {array} streams An object of avialable media streams. */player.addFilter('video.source', function(source, data, element, format, streams) {    // 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        const options = streams;        options.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.        for (let index = 0; index < options.length; index++) {            /**             * Get the current iteration stream object.             * @type {object}             */            const stream = options[index];            /**             * 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.label} ${audioLabel} (${stream.type} / ${stream.mime})`;            // If this stream matches the default source, add selected property.            if (stream.url === source) {                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';    }    // Return default source value.    return source;});// Initial load process.player.load();</script>

So, the thing is that the video automatically starts in 1080p with no audio(the video lags a lot) and also there is a quality selector. I want to remove the quality selector and also make the video start in "720p with audio". Is it possible?


Viewing all articles
Browse latest Browse all 3638

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>