V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
polandeme
V2EX  ›  程序员

请教 WEB 全局音乐播放器解决方案

  •  
  •   polandeme ·
    polandeme · 2015-05-05 15:43:28 +08:00 · 5031 次点击
    这是一个创建于 3476 天前的主题,其中的信息可能已经有所发展或是发生改变。

    要重构一个音乐网站(pc端),要做到打开其他页面时,音乐播放条在底部不变继续播放,类似单页面应用。类似网站 百度音乐人 的左下角播放条
    目前方案有:

    1. 用backbone方式重构(ng兼容不够)
    2. 用Facebook的BigPipe方式 Quickling
    3. 仿照网易云音乐用iframe(总感觉这个不好)
    4. 其他

    有没有谁用过上面的方案,请教一下优缺点,或者有没有其他方案。

    谢谢

    19 条回复    2015-05-13 17:38:02 +08:00
    kokdemo
        1
    kokdemo  
       2015-05-05 15:50:09 +08:00
    你说的这种类似网易云音乐
    learnshare
        2
    learnshare  
       2015-05-05 15:53:28 +08:00
    如果页面是单页面的,可以保证一部分结构不刷新,音乐播放用独立的模块控制就可以了。

    http://y.baidu.com/ 的方式是类似的,实现了页面的局部更新。
    fising
        3
    fising  
       2015-05-05 15:56:23 +08:00
    y.qq.com 也是
    polandeme
        4
    polandeme  
    OP
       2015-05-05 16:02:41 +08:00
    @kokdemo 效果就是那个,但是网易云音乐用的是iframe
    @learnshare 但是如何保证一部分结构不刷线,ajax之类的缺点太多了吧。
    polandeme
        5
    polandeme  
    OP
       2015-05-05 16:08:12 +08:00
    @fising 他们用的ajax
    zythum
        6
    zythum  
       2015-05-05 16:13:39 +08:00
    如果你的网站就是个*音乐网站*。播放器就是*主要功能*的话。
    iframe 是最简单。也是最屌丝。也是最方便的。也是开发量最少的。也是兼容性最好的。

    你知道么。微博那个挂角播放器要常驻不间断播放。我用类似Quickling的方式搞死我了知道么。
    bigredapple
        7
    bigredapple  
       2015-05-05 16:21:09 +08:00
    肯定iframe 别无选择
    polandeme
        8
    polandeme  
    OP
       2015-05-05 16:23:36 +08:00
    @zythum 但是感觉Quickling,除了开发难度之外,要比iframe好吧。

    主要会有什么坑
    zythum
        9
    zythum  
       2015-05-05 16:36:13 +08:00
    @polandeme 我是已一个大站的角度说的。

    1. 首先是实现Quickling的成本。你的javascript对于每个模块的的instance需要销毁重新绑定。可能需要一个管理器。和每个模块需要修改挂在到管理器。那个页面需要加哪个js。哪个css。css和css之间会不会冲突。因为原来再不通的页面。这两个死活不会遇到的。

    2. 在Quickling区域外部的dom结构需要一致。包括样式名className。不然你还需要在跳转页面时用javascript去修改来匹配样式差异。

    3. 用Quickling那么用户在你的页面上基本就不会刷新页面了。那么很多状态的修改都需要用javascript来保持了。这个会在不经意的时候发生。然后很容易手足无措。

    4. 你需要适配你目前的所有页面。
    Anybfans
        10
    Anybfans  
       2015-05-05 18:04:28 +08:00
    感觉iframe很不错啊。体验不输的。。。关键是简单。。。
    polandeme
        11
    polandeme  
    OP
       2015-05-05 18:28:01 +08:00
    @zythum 谢谢,我再研究一下

    @Anybfans 但对于大型网站会比较耗资源
    Jaylee
        12
    Jaylee  
       2015-05-05 19:07:39 +08:00
    看看qq音乐的,做的不错
    polandeme
        13
    polandeme  
    OP
       2015-05-05 22:51:14 +08:00
    @Jaylee 他们是用的ajax请求页面的?
    zythum
        14
    zythum  
       2015-05-07 12:54:54 +08:00
    @polandeme 其实对大型网站来说。多几次请求并没有什么问题。
    qq 也是iframe
    polandeme
        15
    polandeme  
    OP
       2015-05-12 19:13:17 +08:00
    @zythum

    有一个不理解的地方就是quickling和纯ajax加载有哪些不一样,是他用到了pagelet,还是也只是pushstate + ajax ???

    thx
    zythum
        16
    zythum  
       2015-05-13 10:42:56 +08:00   ❤️ 1
    pushstate是不可少的。不然中间的历史就丢了。用户也没法用url回溯到当前浏览的页面了。

    quickling 意思只是不做跳转的方式切换页面。

    中间用什么去做切换呢。很多方式可以。用ajax可以。用一个iframe去请求回调parent的方法也可以,jsonp也可以。只要能拿到数据啥都可以。

    后端吐的数据还是拼好的html呢。都是可以的这个就看你自己怎么处理了。就看怎么和现有架构结合了。

    这种技术选型是很灵活的。没有最好的只有最适合的。

    说facebook怎么做的。
    目前我看facebook已经基本用react了。就是属于模版在前端,后端吐数据的方式。ajax还是ajax,高级浏览器都支持ajax都已经支持Chunked transfer。就没必要去用iframe中间过程的方式来实现了。

    说些有的没的。react在facebook真的用啊。不想某angular是吧。
    polandeme
        17
    polandeme  
    OP
       2015-05-13 14:58:35 +08:00
    @zythum 谢谢,现在是越弄越乱了
    zythum
        18
    zythum  
       2015-05-13 15:08:39 +08:00
    @polandeme 确实。如果需要的话可以邮件我。然后加QQ说。 邮件你可以点我头像找到。
    polandeme
        19
    polandeme  
    OP
       2015-05-13 17:38:02 +08:00
    @zythum 邮件已发,麻烦查收一下,谢谢 -:D
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2680 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 06:08 · PVG 14:08 · LAX 22:08 · JFK 01:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.