Javascript 如何使用HTML5仅播放Youtube视频的音频？

是否可以使用HTML 5和Javascript仅播放YouTube视频中的音频？

嵌入视频播放器并使用CSS隐藏视频。如果操作得当，您甚至可以仅隐藏视频，而不隐藏其下方的控件

---

但是，我建议不要这样做，因为这将违反。如果您真的只想播放音频，请使用您自己的服务器。

我同意汤姆·范德·沃尔德的观点。您可以使用CSS隐藏视频（可见性：隐藏或溢出：隐藏在受高度限制的div包装中），但这可能违反Youtube的策略。此外，您如何控制音频（暂停、停止、音量等）

您可以转而使用诸如管理音频之类的资源。

答案很简单： 使用第三方产品，如jwplayer或类似产品， 然后将其设置为最小播放器大小，即音频播放器大小（仅显示播放器控件）

瞧

---

这篇文章已经用了8年多了。

这可能是一篇老文章，但人们可能仍然在搜索它，所以你可以这样做：

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

---

除了提到jwplayer和可能违反TOS之外，我还想链接到github上的以下存储库：，该存储库允许生成以下输出：

---

在给定视频URL和配置选项的情况下，库支持播放列表和PHP自动渲染。

您可以使用以下链接解析Youtube元文件，以获取此特定视频id可用的所有流：

https://www.youtube.com/get_video_info?video_id={VID}

并提取仅音频流

下面是一个使用公共谷歌图像代理的示例（但您可以使用任何免费或您自己的

CORS

proxy）：

var vid=“3r_Z5AYJJd4”，
音频流={}，
audio_tag=document.getElementById（'youtube'）；
获取（“https://“+vid+”-focus opensocial.googleusercontent.com/gadgets/proxy？container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget\u video\u info%3Fvideo\u id%3D”+vid）。然后（响应=>{
if（response.ok）{
response.text（）.then（数据=>{
var data=parse_str（数据），
streams=（data.url_encoded_fmt_stream_map+，'+data.adaptive_fmts）.split（'，'）；
streams.forEach（函数（s，n）{
var stream=parse_str（s），
itag=stream.itag*1，
质量=假；
console.log（流）；
开关（itag）{
案例139：
质量=“48kbps”；
打破
案例140：
质量=“128kbps”；
打破
案例141：
质量=“256kbps”；
打破
}
if（quality）audio_streams[quality]=stream.url；
});
控制台日志（音频流）；
audio_tag.src=音频流['128kbps'；
音频标签。播放（）；
})
}
});
函数parse_str（str）{
返回str.split（'&'）.reduce（函数（params，param）{
var paramspilt=param.split（'='）.map（函数（值）{
返回组件（value.replace（'+'，''）；
});
params[paramspilt[0]]=paramspilt[1]；
返回参数；
}, {});
}

---

视频ID与YouTube视频的实际ID

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

var vid=“bpt84ceWAY0”，
音频流={}，
audio_tag=document.getElementById（'youtube'）；
获取（“https://“+vid+”-focus opensocial.googleusercontent.com/gadgets/proxy？container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget\u video\u info%3Fvideo\u id%3D”+vid）。然后（响应=>{
if（response.ok）{
response.text（）.then（数据=>{
var data=parse_str（数据），
streams=（data.url_encoded_fmt_stream_map+，'+data.adaptive_fmts）.split（'，'）；
streams.forEach（函数（s，n）{
var stream=parse_str（s），
itag=stream.itag*1，
质量=假；
console.log（流）；
开关（itag）{
案例139：
质量=“48kbps”；
打破
案例140：
质量=“128kbps”；
打破
案例141：
质量=“256kbps”；
打破
}
if（quality）audio_streams[quality]=stream.url；
});
控制台日志（音频流）；
audio_tag.src=音频流['128kbps'；
音频标签。播放（）；
})
}
});
函数parse_str（str）{
返回str.split（'&'）.reduce（函数（params，param）{
var paramspilt=param.split（'='）.map（函数（值）{
返回组件（value.replace（'+'，''）；
});
params[paramspilt[0]]=paramspilt[1]；
返回参数；
}, {});
}

为2020年更新 似乎在2019年9月，由

get\u video\u info

返回

而不是

data.url\u encoded\u fmt\u stream\u map

和

data.adaptive\u fmts

（在其他旧示例中使用）现在我们正在寻找

data.formats

和

data.adaptiveFormats

无论如何，这就是你们在这里的目的一些将YouTube视频加载到

//YouTube视频ID
var videoID=“CMNry4PE93Y”；
//获取视频信息（使用代理以避免CORS错误）
取（'https://cors-anywhere.herokuapp.com/' + "https://www.youtube.com/get_video_info?video_id=“+videoID）。然后（响应=>{
if（response.ok）{
response.text（）.then（ytData=>{
//解析响应以查找音频信息
var ytData=parse_str（ytData）；
var getAdaptiveFormats=JSON.parse（ytData.playe