Jak uzyskać dostęp do elementu wideo HTML w Angular2

Mam element HTML5 <video> w składniku Angular2. Potrzebuję do niego dostępu, aby sprawdzić czas przed udostępnieniem go użytkownikowi na Twitterze.Jak uzyskać dostęp do elementu wideo HTML w Angular2

Czy istnieje sposób przez powiązanie modelu lub bezpośredni dostęp do DOM, że mogę uzyskać tę informację w klasie zabezpieczenia komponentu?

Próbowałem wiążący go przy NG-modelu, jak to w szablonie komponentu:

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

aw klasie komponentu (maszynopis):

videoElement: HTMLVideoElement;

który daje mi ten błąd : EXCEPTION: No value accessor for '' in [null]

Udało mi się uzyskać do niego dostęp, podając element video id i używając document.getElementById("videoElementId"), ale wygląda na to, że musi być lepiej droga.

Źródło

2015-12-11 Sam

mogę użyć dokumentu. getElementById, ale nie można używać funkcji takich jak: videoElement.play() lub videoElement.pause(). Czy wiesz, jak z tym zrobić, jeśli chcę odtwarzać/wstrzymać wideo? –

@ J.Fun Właśnie próbowałem w konsoli i obie te funkcje działają dla mnie używając document.getElementById ("videoid"). Play(); - Co masz na myśli, że to nie jest dozwolone? Proponuję zadać nowe pytanie, jeśli masz problemy. – Sam

Mam na myśli, że przypomina mi błąd: TS2339: Właściwość "play" nie istnieje w typie "HTMLElement" podczas kompilowania maszynopisu w PhpStorm. Chociaż faktycznie działa w mojej przeglądarce. Komunikat o błędzie jest nadal bardzo denerwujący, nie wiem, jak się go pozbyć. –

można wstrzyknąć ElementRef a następnie uzyskać dostęp do elementu jak

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

iz innych trybach widoku enkapsulacji prawdopodobnie

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

(jeszcze nie próbowała sobie chociaż).

To powinno działać jak dobrze

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

a następnie do niego dostęp za pomocą $event.target

Korzystanie z dyrektywy (przykładowo w kodzie 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; 
}

w twojej dodać komponent

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

teraz można uzyskać dostęp czas z video.duration

Źródło

2015-12-11 17:46:11

Obie metody zadziałały, dziękuję! Drobne zmiany, to będzie $ event.target w twoim przykładzie. – Sam

-1

<html ng-app="VideoLink">  

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

w pliku sterownika

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

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

Spróbuj może być to będzie pomocne,

Źródło

2015-12-11 18:04:38

Dzięki za odpowiedź, szukałem rozwiązania Angular2 – Sam

Jak uzyskać dostęp do elementu wideo HTML w Angular2

Odpowiedz

Powiązane problemy