时间戳

首页 > 解决方案 > 如何在 Angular 6 上更改 htmlvideoelement 元素中的当前时间

java - 如何在 Angular 6 上更改 htmlvideoelement 元素中的当前时间

问题描述

我不明白如何为 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);
   		};
}

标签： javaspringtypescriptcurrent-time

解决方案

1) 使用 getElementByTagName JavaScript

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

2) 在 Angular 6+ 中使用 ElementRef

// 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.log('onPlayerReady', this);
      });
    }

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

3）您必须从 HTML 页面中创建一个事件，例如

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

推荐阅读