谈一下使用akamai media on demand no secure 遇到的问题和解决经历

在做一个网站的时候，需要使用客户自己制作的video。

他们选择akamai主要基于两点原因：

1. akamai有很多的netstorage server， 用户使用时会通过edge server提交申请然后寻找最近最优的服务器返回数据。

2. akamai支持多bitrate video，会自动检测用户所处的网速状况，从而提供选择不同的画面质量。

对此，akamai支持HLS和HDS。

akamai luna controller内部设置就不讲了，这是需要akamai内部员工在你交钱后给你开通相关服务的，否则啥都干不了。

在创建好configuration for media on demand后，新建upload account。

然后进行ftp upload。 我选择的是windows自带的add a new network location。

（在computer folder下右键新建）

连接好后就可以上传mp4文件拉。 注意，在此我们要求必须是H.264 mp4 文件。（akamai支持此类文件，详情需要查看文档或咨询akamai客服）

akamai会自动提供上传mp4文件对应的m3u8和f4m 文件，不需要手动转换。

对于需要手动将mp4转换为m3u8的例子，我也找到了个很简单的软件：

http://ffmpeg.org/ffmpeg-formats.html#hls-1

使用例子：ffmpeg -i input.mp4 -hls_time 4 out.m3u8  （4是你想要多久的segment）

回到akamai上。

对于HLS很好解决，HTML5 的video tag就可以使用，具体可行的范围在mac 的safari browser

（HTML5虽然支持safari 5.1， 但是HLS只支持safari 6+。 而safari在5.1之后就不支持windows了）

ipad，iphone的chrome，safari 浏览器，需要IOS 6+，IOS没找到firefox； andriod 手机的chrome，但是firefox不支持。（andriod的firefox hls和hds都不支持）

windows phone和tablet没有试过。。。。公司没有设备。

一个例子：

<video  controls class="hls-player" poster="/Assets/Images/filename.jpg">
             <source src="http://digitalproperties-vh.akamaihd.net/i/path/filename.mp4/master.m3u8">
 </video>  

对于HDS就麻烦很多了。

关于HDS,这是个不错的简介：

http://www.encoding.com/http-dynamic-streaming-hds/

在众多player中我选择了flowplayer，对此akamai有个专门的plugin：

http://mediapm.edgesuite.net/flow/

真心不知道akamai怎么编辑文件管理网站的，太难找了这个

header或者是body的前面添加：

 <link rel="stylesheet" href="//releases.flowplayer.org/5.5.2/skin/minimalist.css">   

 <link rel="stylesheet" href="//flowplayer.org/drive/quality-selector.css">

<script src="~/Scripts/flowplayer-3.2.13.js"></script>
<script src="~/Scripts/flowplayer-controller-config.js"></script>
<script src="~/Scripts/jquery-1.7.min.js"></script>
<script src="~/Scripts/modernizr.js"></script>

body内部：

<div class="hds-player" style="background-image:url(/Assets/Images/filename.png); " >
              <img src="http://flash.flowplayer.org/media/img/player/btn/play_large.png" alt="Play this video" class='player_wrapper' />
              <a href='http://digitalproperties-vh.akamaihd.net/z/path/filename.mp4/manifest.f4m'  class='player-container'>                                    
               </a>
 </div>

在body的end添加js：

 $(document).ready(function () {
            supports_h264_baseline_video();
        });
        function supports_h264_baseline_video() {
            if (!supports_video()) { return false; }
            var v = document.createElement("video");
            var type = v.canPlayType('application/x-mpegURL');
            var type2 = v.canPlayType('vnd.apple.mpegURL');


            if (type === "" && type2 === "") {
            } else {
                $(".hds-player").css("display", "none");
                $(".hls-player").css("display", "block");
            }
            return type;
        }


        function supports_video() {
            return !!document.createElement('video').canPlayType;
        }


        $("img.player_wrapper").click(function () {
            $(this).css("display", "none");
            var element = $(this).siblings("a.player-container")[0];
            flowplayer(element, "/Scripts/flowplayer-3.2.18.swf", {
                debug: true,
                log: 'warn',
                clip:
                {
                    provider: 'akamai',
                    autoPlay: true
                },
                plugins:
                {
                    controls: controlObject,
                    akamai:
                    {
                        url: '/Scripts/AkamaiAdvancedFlowplayerProvider.swf',


                    }
                }
            });
        });

        flowplayer.conf = {
            splash: true
        };

这些js文件和swf文件可以在flowplayer和akamai flowplayer plugin网站上下载。

我使用js实现了splash image，当图片被点击的时候再load flowplayer。

注意 如果两个或者多个flowplayer有同一个id，会导致点击一个的时候另一个停止工作。

基本上就是有多少个视频，需要load多少次flowplayer。