Как воспроизвести только аудио видео на Youtube с использованием HTML 5? - PullRequest
26 голосов
/ 31 декабря 2011

Можно ли воспроизводить только аудио из видео YouTube с использованием HTML 5 и Javascript?

Ответы [ 8 ]

27 голосов
/ 28 июля 2017

Вы можете проанализировать метафайл Youtube для всех потоков, доступных для этого конкретного идентификатора видео, используя эту ссылку: https://www.youtube.com/get_video_info?video_id={VID} и извлечь только аудиопотоки.

Вот пример с общедоступным прокси-сервером Google Image (но вы можетеиспользуйте любой бесплатный или собственный CORS прокси):

var vid = "3r_Z5AYJJd4",
    audio_streams = {},
    audio_tag = document.getElementById('youtube');

fetch("https://"+vid+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid).then(response => {
    if (response.ok) {
        response.text().then(data => {

            var data = parse_str(data),
                streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(',');

            streams.forEach(function(s, n) {
                var stream = parse_str(s),
                    itag = stream.itag * 1,
                    quality = false;
                console.log(stream);
                switch (itag) {
                    case 139:
                        quality = "48kbps";
                        break;
                    case 140:
                        quality = "128kbps";
                        break;
                    case 141:
                        quality = "256kbps";
                        break;
                }
                if (quality) audio_streams[quality] = stream.url;
            });

            console.log(audio_streams);

            audio_tag.src = audio_streams['128kbps'];
            audio_tag.play();
        })
    }
});

function parse_str(str) {
    return str.split('&').reduce(function(params, param) {
        var paramSplit = param.split('=').map(function(value) {
            return decodeURIComponent(value.replace('+', ' '));
        });
        params[paramSplit[0]] = paramSplit[1];
        return params;
    }, {});
}
<audio id="youtube" autoplay controls loop></audio>

Не работает для всех видео, очень зависит от настроек монетизации или чего-то в этом роде.

14 голосов
/ 01 января 2012

Встроить видео плеер и использовать CSS, чтобы скрыть видео. Если вы сделаете это правильно, вы даже сможете скрыть только видео, а не элементы управления под ним.

Однако я бы рекомендовал против этого, потому что это будет нарушение YouTube TOS . Вместо этого используйте свой собственный сервер, если вы действительно хотите воспроизводить только аудио.

7 голосов
/ 17 мая 2013

Это может быть старый пост, но люди все еще могут его искать, вот и все:

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
<div style="position:absolute;top:-276px;left:-5px">
<iframe width="300" height="300" 
  src="https://www.youtube.com/embed/youtubeID?rel=0">
</iframe>
</div>
</div>
4 голосов
/ 09 октября 2012

Ответ прост: Используйте сторонний продукт, такой как jwplayer или аналогичный, затем установите минимальный размер проигрывателя, равный размеру аудиоплеера (отображаются только элементы управления проигрывателем).

Вуаля.

Использую это уже более 8 лет.

1 голос
/ 14 июня 2019

VIDEO_ID с фактическим идентификатором вашего видео на YouTube.

<div data-video="VIDEO_ID"  
        data-autoplay="0"         
        data-loop="1"             
        id="youtube-audio">
 </div>

 <script src="https://www.youtube.com/iframe_api"></script>
 <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
0 голосов
/ 26 октября 2015

В дополнение к упоминаниям о jwplayer и возможных нарушениях TOS я хотел бы сослаться на следующий репозиторий на github: Библиотека создания аудиоплеера YouTube , которая позволяет генерировать следующий вывод:

enter image description here

В библиотеке есть поддержка списков воспроизведения и автоматического рендеринга PHP с учетом URL-адреса видео и параметров конфигурации.

0 голосов
/ 27 июля 2015

Более просто, чем это.

<iframe width="0" height="0" src="https://www.youtube.com/embed/youtubeID?rel=0" ></iframe>
0 голосов
/ 01 января 2012

Я согласен с Томом ван дер Вурдтом.Вы можете использовать CSS, чтобы скрыть видео (видимость: скрытый или переполнение: скрытый в обёртке div, ограниченный высотой), но это может нарушить политику Youtube.Кроме того, как вы можете управлять звуком (пауза, остановка, громкость и т.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...