Bootstrap Modal Popuo中的Azure Media Player-Java 学习之路

我试图在模态弹出窗口中从Azure Media Player流式传输文件 .

此弹出窗口的html是在GridView的rowcommand上生成的，用于将相对的.manifest文件绑定到视频源

protected string BuildRecordingPlayback(string videoURL)
    {
        StringBuilder Playback = new StringBuilder();
        //FIRST CLOSE ATTEMPT
        ////Playback.Append("<video id=\"vid1\" class=\"azuremediaplayer amp-flush-skin\" autoplay controls width=\"250\" height=\"100\" data-setup='{\"nativeControlsForTouch\": false}'>");
        //FIRST CLOSEST ATTEMPT
        Playback.Append("<video id=\"vid1\" class=\"azuremediaplayer amp-flush-skin\" width=\"250\" height=\"100\" autoplay controls>");
        Playback.Append("<source src=\"" + videoURL + "\" type=\"audio/mp3\" />");
        Playback.Append("<p class=\"amp-no-js\">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p></video>");

        return Playback.ToString();
    }

这是相关的RowCommand事件

if (e.CommandName == "InvoiceIncident")
   {
        divRecording.InnerHtml = BuildRecordingPlayback(drIncident["StreamingUrl"].ToString());
        upRecording.Update();
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "modalIncidentRec", "$('#modalIncidentRec').modal();", true);
   }

至于aspx页面的标准模态弹出窗口

<div class="modal fade" id="modalIncidentRec" role="dialog" aria-labelledby="modalIncidentRec" aria-hidden="true">
        <div class="modal-dialog">
            <asp:UpdatePanel ID="upRecording" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">
                                <asp:Label ID="Label1" runat="server" Text=""></asp:Label></h4>
                        </div>
                        <div class="modal-body" id="modal-body rec">
                            <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
                            <div id="divRecording" runat="server">
                                <%--video goes here--%>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

我尝试了其他各种方法，包括

根据此示例创建空白视频标记并在javascript中分配源changing source on html5 video tag
我也尝试了Documented版本（填充了语法错误）http://amp.azure.net/libs/amp/latest/docs/index.html#quick-start

下面的代码

<script type="text/javascript">
    function AzureVideoTag(sourceSQL) {
        var myOptions = {
            "nativeControlsForTouch": false,
            controls: true,
            autoplay: true,
            width: "640",
            height: "400",
        }
        myPlayer = amp("azuremediaplayer", myOptions);
        myPlayer.src([
                {
                    "src": sourceSQL,
                    "type": "audio/mp3"
                }
        ]);
    }
</script>
<script type="text/javascript">
    function AssignVideoTag(sourceSQL) {
        var video = document.getElementById('vid3');
        var source = document.createElement('source');

        source.setAttribute('src', sourceSQL);

        video.appendChild(source);
        video.play();

        setTimeout(function () {
            video.pause();

            source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4');

            video.load();
            video.play();
        }, 3000);
    }
</script>
...
<div id="divRecording" runat="server">
    <%--video goes here--%>
    <video id="vid2" autoplay controls width="250" height="200">
         <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
    <p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
    </video>
    <video id="vid3" width="250" height="200"></video>

任何帮助都将受到高度赞赏，我已经坚持了好几天了-_-

Bootstrap Modal Popuo中的Azure Media Player

相关问题