Question

我正在尝试创建一个指令作为自定义视频控件。我将一个html文件加载到该指令的templateUrl。问题是当有多个控件时，他们将相同的src文件设置为所有控件，并且它们也共享视频状态。当我从另一个控件暂停时，它会暂停在第一个控件上播放的视频。这是我正在使用的指令模板：

dApp.directive('myVideoControl', function(){
return {
    scope: {
        cameraUrl: '=vcCameraUrl'
    },
   restrict: 'E',
   templateUrl: './../../js/directives/myVideoControl.html',
   link: function (scope, element, attrs) {
      scope.playVideo = function(){
          var v = document.getElementsByTagName("video")[0];
          v.play();
      }
      scope.pauseVideo = function(){
          var v = document.getElementsByTagName("video")[0];
          v.pause();
      }
   }
}
});

如果有人能指出我在这里做错了什么，会非常有用。

感谢。

Answer 1

看起来您遇到的问题是您正在按标签名称查找元素。基本上，你的dom中带有标签<video>的每个元素都将受到你的指令使用的影响。

带有指令的想法是，它们提供对指定指令的元素的直接访问。在你的情况下element里面的链接函数参数。因此，您需要引用各个相关元素，如下所示：

var v = element[0];
v.play();

如果您已在父元素上分配了该指令，并且想要所有子元素，那么请在指令元素上使用find() jqLite函数：

var v = element.find('video')[0];
v.play();

Answer 2

      var v = document.getElementsByTagName("video")[0];

您正在整个页面中选择第一个视频标记。

而是在模板中获取元素，例如

element.find('video')[0]

指令定制控制

2 个答案: