dynamic video source change issue in azure media player

Question

dynamic video source change issue in azure media player

2.4k views Asked by Albert Shin At 05 June 2015 at 05:13

Here is my full code.

When I click "Show" button, it shows the video dynamically. But when I click it again, it doesn't show. How can I avoid this type of error?

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta http-equiv="Pragma" content="no-cache" />

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <!-- for Azure Media Player -->
    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
    <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
    <script>
        amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
        amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
        amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
    </script>

<title>
eConnect eLearning
</title></head>
<body>
    <a href="javascript:sv1()">Show</a>
<div id="content_html" style="height: 100%; "></div>
    <script>
function sv1() {
$('#content_html').html('<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>');

var myOptions = {
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
}
    </script>

</body>
</html>

Original Q&A

There are 4 answers

**Mahesh Jasti** · Answer 1 · 2015-06-08 08:54:06

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta http-equiv="Pragma" content="no-cache" />

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- for Azure Media Player -->
    <link href="http://amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
    <script src="http://amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
    <script>
        amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
        amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
        amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
    </script>

<title>
eConnect eLearning
</title></head>
<body>
    <a href="javascript:sv1()">Show</a>
<div id="content_html" style="height: 100%; ">
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
</div>
    <script>
$('#content_html').hide();
    function sv1() {

$('#content_html').show();

var myOptions = {
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
}
    </script>

</body>
</html>

**Albert Shin** · Answer 2 · 2015-06-09 14:06:41

Albert Shin On 09 June 2015 at 14:06

I got the answer from MS forum. I have to dispose the old player before reuse it.

if (!!myPlayer) {
    myPlayer.dispose();
}

**Mahesh Jasti** · Answer 3 · 2015-06-05 08:17:47

I think it is problem with the dynamically added element with id. I have done some modifications to avoid dynamic elements with same id and is working. Is this OK for you?

<div id="content_html" style="height: 100%; ">
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-    big-play-centered" tabindex="0"> </video>
</div>
<script>
$('#content_html').hide();
function sv1() {
$('#content_html').show();

**Rahul Uttarkar** · Answer 4 · 2021-11-19 17:35:54

Rahul Uttarkar On 19 November 2021 at 17:35

myPlayer.src({src: "http://www.example.com/path/to/video.mp4" });

TechQA.

dynamic video source change issue in azure media player

There are 4 answers

Related Questions in HTML

Related Questions in AZURE

Related Questions in VIDEO

Related Questions in MEDIA

Popular Questions

Popular Tags

Trending Questions