[前端] 网易云音乐外链播放器不能正常显示的问题之解决方案

我不是女神ヾ 2023-07-05 13:06 15阅读 0赞

场景：要在页面中插入这样的一个小插件：

![20200214224114902.png][]

参考网易云音乐提供的<iframe>外链播放器代码，却无法正常显示。

方法极其简单：只要在<iframe>标签的src属性中的//前加上http:或https:就可以了，像这样：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>星空</title>
    </head>
    <body>
    	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=34341364&auto=0&height=66"></iframe>
    </body>
    </html>

本代码auto值取0，关闭了自动播放效果。

生成外链播放器的操作：

1.在网易云音乐的网页版中搜索你想播放的歌曲，例如《星空》。如果是客户端中的某一首歌，可以选择复制链接，粘贴至网页端打开。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 1][]

2.跳转到生成代码页面，按提示操作，并为src属性添加http:或https:前缀即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 2][]

参考资料：

[网页css,html5求助,关于网易云音乐外链的使用][css_html5]

[20200214224114902.png]: https://img-blog.csdnimg.cn/20200214224114902.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200221182440324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200221182318627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200221182615112.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[css_html5]: https://www.52pojie.cn/thread-676358-1-1.html