Javascript 媒体播放器模板在停止时显示一个黑框

我有一个模板，它是动态添加的对象标签显示视频

以下是模板代码（模板名称保存在范围变量“topicArtifactsUrl”中）：

---

问题是媒体播放器已停止，但在调用

stopMediaPlayer（）

后，屏幕上仍会出现一个黑框。我做错了什么？

我解决了。我不得不为媒体播放器隐藏div：

$("#mediaTemplateDiv").css('display', 'none'); //Added this line to stopMediaPlayer()

---

请执行JSFIDLE，以便我们可以尝试调试该问题

$scope.stopMediaPlayer = function () {

        $scope.modules.showMediaPlayer = false;
        if (typeof (Player) != 'undefined' && Player.controls) {
            Player.controls.stop();
        }

        $scope.topicArtifactsUrl = ''; //Clear the template in which media player object is loaded

    }

$("#mediaTemplateDiv").css('display', 'none'); //Added this line to stopMediaPlayer()