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

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

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

参考网易云音乐提供的外链播放器代码，却无法正常显示。 方法极其简单：只要在<iframe>标签的src属性中的//前加上http:或https:就可以了，像这样： <pre><code><!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> </code></pre>本代码auto值取0，关闭了自动播放效果。 生成外链播放器的操作： 1.在网易云音乐的网页版中搜索你想播放的歌曲，例如《星空》。如果是客户端中的某一首歌，可以选择复制链接，粘贴至网页端打开。 <img src="https://img-blog.csdnimg.cn/20200221182440324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70" alt="watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70"> <img src="https://img-blog.csdnimg.cn/20200221182318627.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70" alt="watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 1"> 2.跳转到生成代码页面，按提示操作，并为src属性添加http:或https:前缀即可。 <img src="https://img-blog.csdnimg.cn/20200221182615112.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70" alt="watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 2"> 参考资料： 网页css,html5求助,关于网易云音乐外链的使用