How to get access to an HTML video element in Angular2
You can inject the ElementRef and then access the element like
element.nativeElement.shadowRoot.querySelector('video').duration;// with encapsulation: ViewEncapsulation.Nativeand 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
Using a directive (example in Dart code)
@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
<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