typescript 如何访问 Angular2 中的 HTML 视频元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34229139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get access to an HTML video element in Angular2
提问by Sam
I have an HTML5 <video>element in an Angular2 component. I need access to it in order to check the duration before allowing the user to share it to Twitter.
我<video>在 Angular2 组件中有一个 HTML5元素。我需要访问它以在允许用户将其共享到 Twitter 之前检查持续时间。
Is there any way through model binding, or direct access to the DOM, that I can get this information in the component's backing class?
有什么方法可以通过模型绑定或直接访问 DOM 来在组件的支持类中获取此信息？
I've tried binding it using ng-model, like this in the component's template:
我试过使用 ng-model 绑定它，就像在组件的模板中这样：
<video controls width="250" [(ng-model)]="videoElement">
<source [src]="video" type="video/mp4" />
</video>
and in the component's class (TypeScript):
在组件的类（TypeScript）中：
videoElement: HTMLVideoElement;
That gives me this error: EXCEPTION: No value accessor for '' in [null]
这给了我这个错误： EXCEPTION: No value accessor for '' in [null]
I was able to access it by just giving the video element an id and using document.getElementById("videoElementId")but it seems like there must be a better way.
我可以通过给视频元素一个 id 并使用来访问它，document.getElementById("videoElementId")但似乎必须有更好的方法。
回答by Günter Z?chbauer
You can inject the ElementRefand then access the element like
您可以注入ElementRef然后访问元素，如
element.nativeElement.shadowRoot.querySelector('video').duration;
// with encapsulation: ViewEncapsulation.Native
and with other view encapsulation modes probably
和其他视图封装模式可能
element.nativeElement.querySelector('video').duration;
(not yet tried myself though).
（虽然还没有尝试过自己）。
This should work as well
这也应该有效
<video (durationchange)="durationChangeEventHandler($event)"></video>
and then access it using $event.target
然后使用访问它 $event.target
Using a directive (example in Dart code)
使用指令（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;
}
In your component add
在您的组件中添加
@Component(
selector: 'my-component',
viewProviders: const [VideoModel],
directives: const [VideoModel],
templateUrl: 'my_component.html')
class MyComponent {
@ViewChild(VideoModel)
VideoModel video;
}
now you can access the duration with video.duration
现在您可以访问持续时间 video.duration
回答by Pankaj Gupta
<html ng-app="VideoLink">
<body ng-controller="linkvideo">
<video controls>
<source src={{video}} type="video.mp4">
</video>
</body>
</html>
in the controller file
在控制器文件中
var videolink=angular.module('VideoLink',[]);
videolink.controller('linkvideo',function($scope){
$scope.video={'name':'https://www.youtube.com/watch?v=R7GLYhJ51uo'}
});
Try it may be it will helpful for you
试试看可能对你有帮助
