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.
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?
I've tried binding it using ng-model, like this in the component's template:
<video controls width="250" [(ng-model)]="videoElement">
<source [src]="video" type="video/mp4" />
</video>
and in the component's class (TypeScript):
videoElement: HTMLVideoElement;
That gives me this error: 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.
You can inject the ElementRef and then access the element like
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
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
