如何访问 Angular2 中的 HTML 视频元素

Question

我在 Angular2 组件中有一个 HTML5 <video> 元素。我需要访问它以便在允许用户将其分享到 Twitter 之前检查持续时间。

是否有任何方法可以通过模型绑定或直接访问 DOM，使我可以在组件的支持中获得此信息 class？

我试过使用 ng-model 绑定它，就像在组件模板中这样：

<video controls width="250" [(ng-model)]="videoElement">
    <source [src]="video" type="video/mp4" />
</video>

并且在组件的 class (TypeScript):

videoElement: HTMLVideoElement;

这给了我这个错误：EXCEPTION: No value accessor for '' in [null]

我可以通过给视频元素一个 id 并使用 document.getElementById("videoElementId") 来访问它，但似乎必须有更好的方法。

Answer 1

你可以注入 ElementRef 然后像

一样访问元素

element.nativeElement.shadowRoot.querySelector('video').duration;
// with encapsulation: ViewEncapsulation.Native

和其他视图封装模式可能

element.nativeElement.querySelector('video').duration;

（虽然我自己还没有尝试过）。

这应该也有效

<video (durationchange)="durationChangeEventHandler($event)"></video>

然后使用 $event.target

访问它

使用指令（Dart 代码中的示例）

@Directive(selector: 'video')
class VideoModel {
  ElementRef _element;
  VideoModel(this._element) {
    VideoElement video = _element.nativeElement as VideoElement;
    video.onDurationChange.listen((e) => duration = video.duration);
  }

  num duration;
}

在您的组件中添加

@Component(
    selector: 'my-component',
    viewProviders: const [VideoModel], 
    directives: const [VideoModel],
    templateUrl: 'my_component.html') 
class MyComponent {
    @ViewChild(VideoModel) 
    VideoModel video;
}

现在您可以使用 video.duration

访问持续时间

Answer 2

<html ng-app="VideoLink">    

<body ng-controller="linkvideo">
    <video controls>
        <source src={{video}} type="video.mp4">
    </video>
</body>
</html>

在控制器文件中

var videolink=angular.module('VideoLink',[]);

    videolink.controller('linkvideo',function($scope){      
    $scope.video={'name':'https://www.youtube.com/watch?v=R7GLYhJ51uo'}
    });

试试吧，也许对你有帮助

如何访问 Angular2 中的 HTML 视频元素

How to get access to an HTML video element in Angular2

html

typescript

angular