angular播放html5视频,html5 – 如何访问Angular2中的HTML视频元素

您可以注入ElementRef然后访问元素,如

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

// with encapsulation: ViewEncapsulation.Native

和其他视图封装模式可能

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

(虽然还没试过).

这也应该有用

然后使用$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访问持续时间