这是我的完整代码。
当我点击"显示"按钮,它动态显示视频。但是当我再次点击它时,它并没有显示出来。如何避免此类错误?
<!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>
答案 0 :(得分:2)
我从MS论坛得到了答案。我必须在重新使用之前处理旧播放器。
if (!!myPlayer) {
myPlayer.dispose();
}
答案 1 :(得分:0)
我认为带有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();
答案 2 :(得分:0)
<!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>