Question

我有一个AngularJS应用程序，它提供了一些顺序视频，如果我转到另一个URL（通过使用另一个HTML引用，href），旧控制器保持活动状态，两个视频仍在播放。对于每个具有相同控制器的新页面，我都会打开这种情况，创建多个视频实例。

控制器接收视频SRC并使用 ng-src 进行设置。

修改

我按ID获取视频元素：

var video = document.getElementById("video");

初始化控制器时设置相应的源：

if (video) {
   video.src = Modernizr.video.ogg ? $scope.mainVideoUrlogv :
   Modernizr.video.webm ? $scope.mainVideoUrlwebm :
   $scope.mainVideoUrlmp;   

   $scope.playVideo();
}

HTML

<video id="video" ng-mouseup="pauseOrPlayVideo()">
   <source ng-src="{{mainVideoUrlwebm}}" type="video/webm">
   <source ng-src="{{mainVideoUrlogv}}" type="video/ogv">
   <source ng-src="{{mainVideoUrlmp}}" type="video/mp4">
</video>

Answer 1

解决方案是从页面中删除视频元素。

var video = document.getElementById("video");

Mozila documentation about ChildNode.remove()帮助执行了删除操作。

 video.remove(); //javascript way

但是，我已经意识到它不适用于IE，正如您在上一篇文章中所注意到的那样。

解决方案是在jQuery中执行此操作。

 $('video').remove(); //jQuery way

它适用于我测试的浏览器，即Chrome，Firefox Dev Edition和IE9，IE10。

AngularJS - HTML5视频正在加载多次

1 个答案: