媒体播放器模板显示停止时的黑匣子

Question

我有一个动态添加了对象标签的模板，用于显示视频。

这是模板代码（模板名称保存在范围变量'topicArtifactsUrl'中）：

<script type="text/ng-template" id="mediaTemplate">
  <div style="display:none;" id="mediaTemplateDiv" ng-show="modules.showMediaPlayer"></div>
</script>

我在下拉列表中的选择中动态添加控制器中的对象标记。视频正确呈现。问题是当我点击页面中的另一个链接时，我需要加载一些其他内容并删除媒体播放器对象。我使用这段代码来做到这一点：

$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

    }

问题是媒体播放器已停止，但在调用stopMediaPlayer()后屏幕上仍然出现黑框。我究竟做错了什么？

Answer 1

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

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