html - Chrome 无法播放 Icecast 流媒体链接

标签 html ssl stream media-player icecast

所以我有这段代码可以打开我自己制作的“播放器”。但是当播放器打开时没有声音出来,以前从未发生过。可能是什么原因。当用 Chrome 打开时,无论播放器如何打开,无论它会弹出,还是链接粘贴到 url 栏,都没有声音。你有什么想法吗?

你可以在这里查看我的播放器: http://newfm.ddns.me:12/m.player.html

弹出窗口的HTML代码:

 <html>
 <head>
 <style>
 <!--Image is used instead of text, to link page-->
   a {
   background: url(https://image.ibb.co/cxnuMU/playbutton.png) center no-    repeat;
display: block;

width: 44px;
height: 45px;
}

</style>
</head>
<!--Link to the page and size page should be opened in-->
<a href="#"     onClick="window.open('http://newfm.ddns.me:12/m.player.html','pagename','resizable,height=640,width=370'); return false;"></a>

在这个播放器中发送声音的是“播放按钮”。难道我需要将 SSL 添加到我的流 url 中吗?

播放按钮的HTML代码:

<div class="ex1">

<a id="play-pause-button" class="fa fa-pause"></a>
<script       src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script>
var audio = new Audio("http://newfmplayer.ddns.net:8000/newfm128.m3u");

$('#play-pause-button').on("click",function(){
if($(this).hasClass('fa-play'))
{
 $(this).removeClass('fa-play');
 $(this).addClass('fa-pause');
 audio.play();
}
else
{
 $(this).removeClass('fa-pause');
 $(this).addClass('fa-play');
 audio.pause();
 }
});

audio.onended = function() {
 $("#play-pause-button").removeClass('fa-pause');
 $("#play-pause-button").addClass('fa-play');
 };

 </script>


 <style media="screen" type="text/css">
 @import url(https://cdnjs.cloudflare.com/ajax/libs/font-     awesome/4.6.3/css/font-awesome.min.css);
 #play-pause-button{
 font-size: 50px;
 cursor: pointer;
 color: black;
 position: relative;
 left: 150px;
 top: 480px;
 }
 </style>


 </div>

</body></html>

我还测试了它是否适用于简单的代码:

  <audio controls>
  <source src="http://newfmplayer.ddns.net:8000/newfm128.m3u"   type="audio/mpeg">
  </audio>

它也没有用。

最佳答案

您的链接指向 m3u 播放列表文件。对于 <audio>元素工作你需要直接指向流,而不是它的播放列表文件。

在这种情况下,这意味着在末尾删除“.m3u”。

关于html - Chrome 无法播放 Icecast 流媒体链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52794260/

相关文章:

javascript - 图像转换为 Canvas , Canvas 再次转换为图像在 Javascript 中是不可能的?

javascript - 使用带有 URL 的 JavaScript 获取 HTML 代码

python - urllib.request SSL 连接 Python 3

amazon-web-services - 如何在 docker 的 keycloak 中添加 SSL

performance - 您应该在哪里启用 SSL?

使用流下载带有身份验证 token 的大文件

c++ - 从读入内存的文件中提取数据

css - 将两个 div 并排放置在另一个更大的居中 div 下方?

javascript - 如何使关闭的 Accordion 选项卡在单击时打开外部 url

node.js - 检测 Node 中 writeStream 的结束