84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
类似QQ音乐、网易云音乐之类的网页播放器怎么实现的? 麻烦把需要用的技术和大致思路说一下。
走同样的路,发现不同的人生
流媒体服务器和客户端,比如:服务器: Adobe Flash Media Server / nginx+nginx-rtmp-module+ffmpeg客户端: Adobe Flash Player / HTML5 video|audio具体可以看下面这篇文章:nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器过程大概是:
Client <-> 协议(RTMP/HTTP(HLS)) <-> Nginx(rtmp-module) <-> FFmpeg <-> 资源文件
至于客户端,可以用ckplayer这个国人开发的免费的网页视频播放器,支持Flash和HTML5,可以用来播放服务器上的MP4等多媒体文件.
有audio标签,js控制
小弟前端初学者,一起讨论讨论.1楼大哥的答案我很赞同
但我在网易云音乐的页面上没有找到<audio>标签.点击下一首的时候,会有两个连接
控制台network监测到一个我第一次见到的状态码 206
不知道这个文件是咋个播放的
这是控制模块的html代码
<p class="m-playbar m-playbar-lock" style="top: -53px; visibility: visible;" id="auto-id-4DUGNOK0WXaEDBAw"> <p class="updn"> <p class="left f-fl"><a href="javascript:;" class="btn" hidefocus="true" data-action="lock"></a></p> <p class="right f-fl"></p> </p> <p class="bg"></p> <p class="hand" title="展开播放条"></p> <p class="wrap" id="g_player"> <p class="btns"> <a href="javascript:;" hidefocus="true" data-action="prev" class="prv" title="上一首(ctrl+←)">上一首</a> <a href="javascript:;" hidefocus="true" data-action="play" class="ply j-flag" title="播放/暂停(p)">播放/暂停</a> <a href="javascript:;" hidefocus="true" data-action="next" class="nxt" title="下一首(ctrl+→)">下一首</a> </p> <p class="head j-flag"><img src="http://p4.music.126.net/r4e63K3wU4uq8mMDYC0QxA==/3387595325946384.jpg?param=34y34"><a href="/song?id=27908565" hidefocus="true" class="mask"></a></p> <p class="play"> <p class="j-flag words"> <a hidefocus="true" href="/song?id=27908565" class="f-thide name fc1 f-fl" title="我好想你">我好想你</a><span class="by f-thide f-fl"><span title="潘广益"><a class="" href="/artist?id=1046460" hidefocus="true">潘广益</a></span></span><a href="/playlist?id=471472171&_hash=songlist-27908565" class="src" title="来自歌单"></a></p> <p class="m-pbar" data-action="noop"> <p class="barbg j-flag" id="auto-id-NhFBE2vfBuUATIrG"> <p class="rdy" style="width: 0%;"></p> <p class="cur" style="width:0%;"><span class="btn f-tdn f-alpha" id="auto-id-f6Z5RnbPXVBFlWIT"><i></i></span></p> </p> <span class="j-flag time"><em>00:00</em> / 00:00</span> </p> </p> <p class="oper f-fl"> <a href="javascript:;" hidefocus="true" data-action="like" class="icn j-flag icn-add" title="收藏">收藏</a> <a href="javascript:;" hidefocus="true" data-action="share" class="icn icn-share" title="分享">分享</a> </p> <p class="ctrl f-fl f-pr j-flag"> <p class="m-vol" style="visibility:hidden;" id="auto-id-64FAueVTWredwSq7"> <p class="barbg"></p> <p class="vbg j-t" id="auto-id-kvlochts6hoUElHw"><p class="curr j-t" style="height: 74.4px;"></p> <span class="btn f-alpha j-t" style="top: 16.2px;"></span></p> </p> <a href="javascript:;" hidefocus="true" data-action="volume" class="icn icn-vol"></a> <a href="javascript:;" hidefocus="true" data-action="mode" class="icn icn-shuffle" title="随机"></a> <span class="add f-pr"> <span class="tip" style="display:none;">已添加到播放列表</span> <a href="javascript:;" title="播放列表" hidefocus="true" data-action="panel" class="icn icn-list s-fc3">34</a> </span> <p class="tip tip-1" style="display:none;">随机</p> </p> </p> </p>
如果你找到了,麻烦告我一声 :)
就是用 audio标签 去实现的,用js去控制播放开始,暂停,音量等等~~我写过一篇文章专门介绍过 https://segmentfault.com/a/11...
视频音频的话。直接使用aduio/vedio/embed 这类的。然后高版本的有API可以直接操作。直播的话。一般都是用flash了。因为这样的是做的推流
流媒体服务器和客户端,比如:
服务器: Adobe Flash Media Server / nginx+nginx-rtmp-module+ffmpeg
客户端: Adobe Flash Player / HTML5 video|audio
具体可以看下面这篇文章:
nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器
过程大概是:
至于客户端,可以用ckplayer这个国人开发的免费的网页视频播放器,支持Flash和HTML5,可以用来播放服务器上的MP4等多媒体文件.
有audio标签,js控制
小弟前端初学者,一起讨论讨论.1楼大哥的答案我很赞同
但我在网易云音乐的页面上没有找到<audio>标签.
点击下一首的时候,会有两个连接
控制台network监测到一个我第一次见到的状态码 206
不知道这个文件是咋个播放的
这是控制模块的html代码
如果你找到了,麻烦告我一声 :)
就是用 audio标签 去实现的,用js去控制播放开始,暂停,音量等等~~
我写过一篇文章专门介绍过
https://segmentfault.com/a/11...
视频音频的话。直接使用aduio/vedio/embed 这类的。然后高版本的有API可以直接操作。
直播的话。一般都是用flash了。因为这样的是做的推流