Youtube 到 HTML5 加载器强制 720p 带音频

问题描述 投票:0回答:1

我想嵌入 YouTube 视频,但作为 HTML5 视频,我找到了解决方案。借助 Levi ColeYouTube 到 HTML5 视频,可以轻松实现此功能。我正在使用以下代码嵌入我的视频...

<script src="https://cdn.jsdelivr.net/npm/@thelevicole/[email protected]/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>

所以,问题是视频自动以 1080p 开始,没有音频(视频滞后很多),而且还有一个质量选择器。我想删除质量选择器,并使视频以“720p 带音频”开始。可以吗?

javascript html youtube youtube-api embedded-video
1个回答
0
投票

现在没有任何解决方案

© www.soinside.com 2019 - 2024. All rights reserved.