Browserベースのビデオプレイヤー version 0.7 とAzure Media Services

Web Browserだけで、VoDやLive配信を行いたい、というケースも最近増えています。HTML5とともに、MPEG-DASHが語られるようになり、先日Public PreviewになったAzure Media ServicesのLive機能でも、MPEG-DASHがサポートされています

 

DASH Live Streaming with Azure Media Service:
http://azure.microsoft.com/blog/2014/09/13/dash-live-streaming-with-azure-media-service/

 

1つのWebページで、複数デバイスに対応するためには、以下の2つを行う必要があります。

・映像自身:        Azure Media Servicesがマルチデバイス向けの対応をお手伝いします

・プレイヤー:    Silverlightなど、そのデバイスで動作する適切なプレイヤーを設定する必要があります。例えばHTML5 VIDEOを使うのもその一つです。

フォールバックと呼ばれる手法を使って、例えばHTML5 Videoが動かない環境では、SilverlightやFlash Playerを表示させる、という事を行う事が多々あります。

 

ここでは、Azure Media ServicesのDynamic Packagingを前提にした簡単なビデオプレイヤーのサンプルコードを紹介します。
5月末のde:codeのAzure Media Servicesセッションのデモでも利用したものです。

 

必要なもの:

  • Web Server: ASP.NETが動作する環境にしてください。Azure Web Siteがおすすめです。
  • Azure Media Servicesの配信環境: VoD / Live どちらでも構いません。

 

アプリの構成:

C#で書いています。プロジェクトファイルの内容は以下になっています。

 

以下、2つのファイルは外部のものです。

  • Dash.all.js:                Dash Industry Forumのdash.js ファイルです。

                    https://github.com/Dash-Industry-Forum/dash.js

  • SmoothStreamingPlayer.xap:    Microsoft Media PlatformのSilverlight Playerの「サンプル」プレイヤーです。サンプルですので・・・

                    http://smf.codeplex.com/releases/view/88970

 

作成したのは、Webフォーム1つだけです。Webアプリですと、詳細画面、つまりビデオ再生ページを想定しています。

 

default.aspx

UI部分はこちらです。

——————————————————————————————————————

<%@ Page Language=”C#”

    AutoEventWireup=”true”

    CodeBehind=”default.aspx.cs”

    Inherits=”HTML5_VideoPlayer._default” %>

<!DOCTYPE html>

 

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

<title>Web Browser Video Player</title>

    <script src=”dash.all.js”></script>

    <script>

        function setupVideo(url, videoPlayerName) {

            var context = new Dash.di.DashContext();

            var player = new MediaPlayer(context);

            player.startup();

            player.attachView(document.querySelector(videoPlayerName));

            player.attachSource(url);

        }

    </script>

</head>

<body style=”font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif” font-size: x-large;”>

<form id=”form1″ runat=”server”>

    <h1>Web Browser Video Player</h1>

    <asp:Label ID=”deliveryMethodName” runat=”server” style=”font-size: xx-large; color: #0000FF”></asp:Label>

        <br />

    <asp:Label ID=”videoPlayerLabel” runat=”server”></asp:Label>

        <br />

        <asp:Label ID=”lblDebug” runat=”server”></asp:Label>

</form>

</body>

</html>

——————————————————————————————————————

[解説]

JavaScriptのsetupVideo関数は、MPEG-DASHのプレイヤーを作成する際によく使われているものです。
毎回必要ではないので…

ご参考: DASH.js を使用した HTML5 アプリケーションへの MPEG-DASH アダプティブ ストリーミング ビデオの埋め込み:

http://msdn.microsoft.com/ja-jp/library/dn593606.aspx

 

default.aspx.cs

サーバーサイドの実行ロジックです。

Dynamic Packagingの良い点は、プレイヤーのURLの末尾の文字列を変えるだけで、Smooth Streaming /HLSなどのトランスポートプロトコルを動的に変えてくれることです。ここでは、それを最大限活用しています。

Dynamic Packaging:
http://msdn.microsoft.com/ja-jp/library/jj889436.aspx

 

HTML5においては、ブラウザーのバージョンなどでなく、そのブラウザーが持っている能力で、機能判定をするのがいいのですが・・・ビデオに関してはそういったAPIが提供されていません。ですので、残念ながら、ここでは主にUser-Agentでの判定を使っています。

 

——————————————————————————————————————

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Text;

 

 

 

namespace HTML5_VideoPlayer

{

    public partial class _default : System.Web.UI.Page

    {

 

        // [Action] 再生するURLを設定してください

        private static string playerURL = “http://dahatakemediaeast.origin.mediaservices.windows.net/<xxx>/yyy.ism/Manifest&#8221;;

 

        private enum DeliveryType

        {

            Smooth,

            HLSv3,

            HLSv4,

            DASH

        }

 

        protected void Page_Load(object sender, EventArgs e)

        {

            buildPlayerHTML();

 

        }

 

        private void buildPlayerHTML()

        {

            // 配信方式の判定

            var deliveryType = DetermineDeliveryType(Request.UserAgent);

            deliveryMethodName.Text = deliveryType.ToString();

 

            videoPlayerLabel.Text = MakeHTMLVideoPlayerString(

                playerURL,

                deliveryType);

 

            #region debug

            /// for debug

            System.Text.StringBuilder sb = new System.Text.StringBuilder(1024).AppendFormat(“UAString: {0}<br/>”, Request.UserAgent)

                .AppendFormat(“Browser: {0}<br/>”, Request.Browser.Browser)

                .AppendFormat(“Platform: {0}<br/>”, Request.Browser.Platform)

                                .AppendFormat(“Platform: {0}<br/>”, Request)

                .AppendFormat(“Type: {0}<br/>”, Request.Browser.Type)

                .AppendFormat(“IsMobileDevice: {0}<br/>”, Request.Browser.IsMobileDevice)

                .AppendFormat(“MobileDeviceModel: {0}<br/>”, Request.Browser.MobileDeviceModel)

                .AppendFormat(“MobileDeviceManufacturer: {0}<br/>”, Request.Browser.MobileDeviceManufacturer)

                .AppendFormat(“Version: {0}<br/>”, Request.Browser.Version)

                .AppendLine(“<br />”)

                .AppendFormat(“delivery method: {0}<br/>”, deliveryType.ToString())

                ;

 

            lblDebug.Text = sb.ToString();

 

            #endregion

        }

 

        private string MakePlayerURL(string URL, DeliveryType type)

        {

            var result = URL;

 

 

            switch (type)

            {

                case DeliveryType.Smooth:

                    break;

                case DeliveryType.HLSv3:

                    result = URL + “(format=m3u8-aapl-v3)”;

                    break;

                case DeliveryType.HLSv4:

                    result = URL + “(format=m3u8-aapl)”;

                    break;

                case DeliveryType.DASH:

                    result = URL + “(format=mpd-time-csf)”;

                    break;

                default:

                    break;

            }

 

            return result;

 

        }

        

 

        private DeliveryType DetermineDeliveryType(String UserAgentString)

        {

 

            var result = DeliveryType.Smooth;

 

            if (Request.Browser.MobileDeviceModel.ToUpper().Equals(“IPHONE”)

                || Request.Browser.MobileDeviceModel.ToUpper().Equals(“IPAD”))

            {

                result = DeliveryType.HLSv4;

 

            }

            else if (Request.UserAgent.Contains(“Android”))

            {

                result = DeliveryType.HLSv3;

            }

            else if (Request.Browser.Browser.Equals(“InternetExplorer”)

                && (Request.UserAgent.Contains(“NT 6.2”) || Request.UserAgent.Contains(“NT 6.3”)))

            {

                result = DeliveryType.DASH;

            }

            else if (Request.Browser.Browser.Equals(“Chrome”) &&

                double.Parse(Request.Browser.Version) > 24) {

                result = DeliveryType.DASH;

            }

 

            return result;

 

        }

 

        private string MakeHTMLVideoPlayerString(String URL,

            DeliveryType deliveryType)

        {

 

            var result = new StringBuilder(2048)

                .AppendLine(@”<video autoplay controls”)

                .AppendLine(@” width=””480″” height=””270″” “)

                .Append(@”src=”””).Append(URL).Append(“@@@”).AppendLine(@””””)

                .AppendLine(@”</video>”)

                .ToString();

                ;

 

            switch (deliveryType)

            {

                case DeliveryType.Smooth:

                    result =

                    @”<div id=””silverlightControlHost””>” +

                    @”” +

                    @”” +

                    @”” +

                    @”” +

                    @”” +

                    @”” +

                    @”” +

                        @” ” +

                    @”” +

                    @”” +

                    @”</div>”;

 

                    break;

                case DeliveryType.HLSv3:

                    result = result.Replace(“@@@”, “(format=m3u8-aapl-v3)”);

                    break;

                case DeliveryType.HLSv4:

                    result = result.Replace(“@@@”, “(format=m3u8-aapl)”);

                    break;

                case DeliveryType.DASH:

                    result = new StringBuilder(1024)

                        .AppendLine(@”<video autoplay controls width=””80%”” id=””videoplayer””>”)

                        .AppendLine(@”</video>”)

                        .AppendLine(@”<script>”)

                        .Append(@”setupVideo(“””).Append(URL).Append(@”(format=mpd-time-csf)””, “”#videoplayer””);”)

                        .AppendLine(@”</script>”)

                        .ToString();

                    break;

 

                default:

                    break;

            }

            

            return result;

 

        }

        protected void Button1_Click(object sender, EventArgs e)

        {

            buildPlayerHTML();

        }

    }

}

 

——————————————————————————————————————

[解説]

複雑なことはしていませんので、読んでいただけると大よそご理解いただけると思います。ですので、主なものだけにとどめます。

MakePlayerURL 関数:            ビデオプレイヤーが参照するURL文字列を作成しています。Dynamic Packaging前提です。味気ないですが…

DetermineDeliveryType 関数:         Smooth / HLS / DASHなどのトランスポートプロトコルを判定しています。

MakeHTMLVideoPlayerString関数:    ビデオプレイヤー用のHTML文字列を作成しています。DASHでは、HTML側にsetupVideo関数があることが前提になっています。

 

まとめ

とても簡易的なものではあります。ですが、Azure Media ServicesのLive機能が公開された今、最高のUser Experienceを追及するNative Application作成とは別に、いわゆるWebフレンドリーといいますか、Socialで拡散も容易なHyperLinkの世界も活きていると思います。
なだらかに数年かけてMPEH-DASHへと業界は移行をしていきますが、その過渡期の簡易ビデオプレイヤーとしてご利用いただければと思います。

 

ご参考: MPEG-DASHのサンプル

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中