HTML 5 web and ASF

Topics: HTML5 web
Sep 25, 2014 at 9:49 AM

The javascript demo sample works fine with the given mp4 file. However, I am attempting to write an mvc 5 application that can display a grid of 4 asf files on the located on localhost. When I attempt to play the videos, I get the 4 black boxes each with a rotating circle in the middle. If I run the cursor over each circle, the tool tip reads "Buffering". The video never plays. No errors are reported.

I use the following javascript (media-player.js) to play the video:

var mediaPlayer =
initFunction: function (window, sourceUrl) {
    var myPlayer = new PlayerFramework.Player(window,
        mediaPluginFallbackOrder: ["VideoElementMediaPlugin", "SilverlightMediaPlugin"],
        width: "480px",
        height: "320px",
             src: sourceUrl,
             type: 'video/asf; codecs="avc1.42E01E, mp4a.40.2"'

My page looks like this:

@model Golf.Models.TokenModels
ViewBag.Title = "Game";
<link href="@Url.Content("~/Content/playerframework.min.css")" rel="stylesheet" type="text/css" />
<table> <tr><td><div id="videoPlayer1" class="pf-container"> </div></td><td><div id="videoPlayer2" class="pf-container"> </div></td></tr> <tr><td><div id="videoPlayer3" class="pf-container"> </div></td><td><div id="videoPlayer4" class="pf-container"> </div></td></tr> </table> <div> @Html.ActionLink("Back to Main", "Index") </div> @section Scripts {
<script src="~/Scripts/playerframework.min.js"></script>
<script src="~/Scripts/media-player.js"></script>
<script type="text/javascript">
function GetFilePath(cameraNumber) {
    return 'http://localhost/' + '@Model.JobId' + '_' + cameraNumber + '/' + '@Model.Token' + '.asf';
mediaPlayer.initFunction("videoPlayer1", GetFilePath('1'));
mediaPlayer.initFunction("videoPlayer2", GetFilePath('2'));
mediaPlayer.initFunction("videoPlayer3", GetFilePath('3'));
mediaPlayer.initFunction("videoPlayer4", GetFilePath('4'));