Question

这是我的完整代码。

当我点击＆＃34;显示＆＃34;按钮，它动态显示视频。但是当我再次点击它时，它并没有显示出来。如何避免此类错误？

<!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>

Answer 1

我从MS论坛得到了答案。我必须在重新使用之前处理旧播放器。

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

Answer 2

我认为带有id的动态添加元素存在问题。我做了一些修改，以避免具有相同ID的动态元素并且正在工作。这对你好吗？

<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();

Answer 3

<!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>

天蓝色媒体播放器中的动态视频源更改问题

3 个答案: