Làm cách nào để chỉ phát âm thanh của video Youtube bằng HTML 5?

Question

Chỉ có thể phát âm thanh từ video YouTube bằng HTML 5 và Javascript?

Answer 1

Nhúng trình phát video và sử dụng CSS để ẩn video. Nếu bạn làm điều đó đúng cách, bạn thậm chí có thể chỉ ẩn video và không thể điều khiển bên dưới video đó.

Tuy nhiên, tôi khuyên bạn nên chống lại nó, vì đó sẽ là một vi phạm YouTube TOS. Sử dụng máy chủ của riêng bạn thay vào đó nếu bạn thực sự chỉ muốn phát âm thanh.

Answer 2

Tôi đồng ý với Tom van der Woerdt. Bạn có thể sử dụng CSS để ẩn video (hiển thị: ẩn hoặc tràn: ẩn trong trình bao bọc div bị giới hạn theo chiều cao), nhưng điều đó có thể vi phạm chính sách của Youtube. Ngoài ra, làm cách nào bạn có thể kiểm soát âm thanh (tạm dừng, dừng, âm lượng, v.v.)?

Thay vào đó, bạn có thể chuyển sang các tài nguyên như http://www.houndbite.com/ để quản lý âm thanh.

Answer 3

Câu trả lời rất đơn giản: Sử dụng sản phẩm của bên thứ 3 như jwplayer hoặc tương tự, rồi đặt nó thành kích thước trình phát tối thiểu là kích thước trình phát âm thanh (chỉ hiển thị điều khiển trình phát).

Thì đấy.

Đã sử dụng tính năng này trong hơn 8 năm.

Answer 4

Đây có thể là một bài cũ nhưng mọi người vẫn có thể được tìm kiếm này vì vậy ở đây bạn đi:

<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> 

Answer 5

More đơn giản hơn thế.

<iframe width="0" height="0" src="https://www.youtube.com/embed/youtubeID?rel=0" ></iframe> 

Answer 6

Thêm vào đề cập đến jwplayer và TOS có thể vi phạm, Tôi muốn liên kết đến kho sau trên github: YouTube Audio Player Generation Library, cho phép để tạo ra các kết quả sau:

Thư viện có hỗ trợ cho danh sách phát và tự động trả tiền bằng PHP cho URL video và tùy chọn cấu hình.

Answer 7

Bạn có thể phân tích cú pháp tệp meta của YouTube cho tất cả các luồng có sẵn cho id video cụ thể này bằng cách sử dụng liên kết này: https://www.youtube.com/get_video_info?video_id={VID} và trích xuất các luồng âm thanh.

Dưới đây là một ví dụ với công chúng CORS proxy:

var vid = "3r_Z5AYJJd4", 
 
    audio_streams = {}; 
 

 
$.get('https://cors-anywhere.herokuapp.com/https://www.youtube.com/get_video_info?video_id=' + vid, function(data) { 
 
    var data = parse_str(data), 
 
    streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(','); 
 
    console.log(streams); 
 
    $.each(streams, function(n, s) { 
 
    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); 
 
    $("#youtube").attr({ 
 
    src: audio_streams['128kbps'] 
 
    }); 
 
}); 
 

 
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; 
 
    }, {}); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<audio id="youtube" autoplay controls loop></audio>

Không làm việc cho tất cả video, rất phụ thuộc vào cài đặt kiếm tiền hay cái gì như thế.