Как изменить текущее время в элементе htmlvideoelement на Angular 6

Я не понимаю, как установить текущее время для htmlvideoelement. Я хочу изменить текущее время видео, щелкнув индикатор выполнения. Пожалуйста, помогите мне, как это правильно установить. Могу знать готовые решения.

html 

<video controls
  width = "300"
  height = "200"
  (click) = "onClick()"
>
</video>

typescript

import {AfterContentInit, Component, Input, OnInit} from '@angular/core';


@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.css']
})
export class PlayerComponent implements AfterContentInit {
  value = 100;

  constructor() { }
  videoElement: HTMLVideoElement;
  ngAfterContentInit() {
    this.videoElement = <HTMLVideoElement>document.getElementsByTagName('video')[0];
    this.videoElement.src = 'http://localhost:8090/video/Pre_Int_02_90815.mp4';
    this.videoElement.volume = this.value;
    this.videoElement.currentTime = 10.0;
  }
}

Контроллер на Java-коде:

@RequestMapping(method = RequestMethod.GET, value = "/{video:.+}")
public StreamingResponseBody stream(@PathVariable String video)
			throws FileNotFoundException {
	File videoFile = videos.get(video);
	final InputStream videoFileStream = new FileInputStream(videoFile);
	return (os) -> {
		readAndWrite(videoFileStream, os);
   		};
}

java spring typescript current-time

27.10.2018 09:46

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами

В компьютерном программировании биты играют важнейшую роль в представлении и манипулировании данными на двоичном уровне. Побитовые операции...

Поднятие тревоги для долго выполняющихся методов в Spring Boot

Приходилось ли вам сталкиваться с требованиями, в которых вас могли попросить поднять тревогу или выдать ошибку, когда метод Java занимает больше...

Принятие принципов SOLID в Spring Boot: Создание обслуживаемых и масштабируемых приложений

Коллекции (ArrayList , HashSet , HashMap)

Полный курс Java для разработчиков веб-сайтов и приложений

Получите сертификат Java Web и Application Developer, используя наш курс.

665

Ответы 1

1) Использование getElementByTagName JavaScript

setCurrentTime(seconds) {
    const video = document.getElementsByTagName('video')[0];
    try {
            video.currentTime = seconds;
        } catch (e) {
              console.info(e);
        }
}

2) Использование ElementRef в Angular 6+

// your HTML should be
// <video #target class = "video-js" width = "100%" height = "100%" controls>
//      <source [src] = "yourVideoUrl">
// </video>

import videojs from 'video.js';
export class Yourcomponent implements AfterViewInit {
@ViewChild('target') target: ElementRef;

player: videojs.Player;
 ngAfterViewInit() {
    // instantiate Video.js
    if (this.videoURL) {
      this.player = videojs(this.target.nativeElement, {
        autoplay: true,
        controlls: true
      }, () => {
        console.info('onPlayerReady', this);
      });
    }

  }
setCurrentTime(seconds) {
        try {
              this.target.nativeElement.currentTime = seconds;
        } catch (e) {
              console.info(e);
        }
    }
}

3) Вы должны сделать событие из HTML-страницы нравиться

<button (click) = "setCurrentTime(4)"> // pass the time in seconds 
  change Time
</button>

28.04.2020 14:27

Другие вопросы по теме

Аутентифицировать соединение Websocket при рукопожатии с помощью фильтра аутентификации JWT

Ошибка: ни BindingResult, ни простой целевой объект для bean-компонента "id" не доступны в качестве атрибута запроса

Springboot - базовая аутентификация ActiveDirectory, затем токен JWT

Дублирование сообщений Rabbit mq

Отправка Ajax на контроллер

Как выполнить Autowire LdapRepository весной?

Spring - перенаправление на ссылку после успешного входа в систему после неудачного запроса Ajax

Столбец «DATE_OF_BIRTH» не найден; Оператор SQL:

Запрос клиента SOAP Spring по https и через брандмауэр

Как вызвать службу SOAP из Spring загрузки

Как изменить текущее время в элементе htmlvideoelement на Angular 6

Ответы 1

Другие вопросы по теме

Похожие вопросы