时间戳

首页 > 解决方案 > 如何以角度实现html5视频自定义视频进度条？

html - 如何以角度实现html5视频自定义视频进度条？

问题描述

有人熟悉 html5 视频自定义进度条吗？

我想实现一个视频进度条，它将显示用户观看的视频百分比与 Instagram 卷轴相同，并编写了一个示例代码，您可以运行代码片段并检查，但我不知道如何用打字稿和角度编写.

任何帮助，将不胜感激。

这是我的代码供参考：

 let  video    = document.getElementsByTagName("video")[0],
      playBtn  = document.getElementsByTagName("button")[0],
      icon     = document.getElementsByTagName("i")[0],
      progress = document.getElementById("progress"),
      videoPlaying =false,
      percentage;
       function togglevideo(){
        if(!videoPlaying){
            video.play();
            icon.className="fa fa-pause";
            videoPlaying = true;
        }else{
            video.pause();
            icon.className="fa fa-play";
            videoPlaying = false;
        }
       }

       function onTimeUpdate(){
           percentage = (video.currentTime / video.duration) * 100;
           progress.style.width = percentage + "%";
       }

       video.ontimeupdate = onTimeUpdate;

playBtn.addEventListener("click",()=>{
    togglevideo();
})
#container {
  margin-top: 15px;
}

#container button{
  padding: 15px;
  background: black;
  color: white;
}
#container .progress-bar {
  margin-top: 15px;
  width: 100%;
  border: 2px solid black;
}
#container .progress-bar span{
    height: 5px;
    display:block;
    background: red;
    width: 0%;
    transition: width 0.25s ease;
}

#container button:active, #container button:focus{
    outline: none;
}
<!doctype html>
<html lang="en">

<head>
    <title>video</title>
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

<body>
    <video width="50%" height="50%">
           <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    </video>
    <div id="container">
        <button>
            <i class="fa fa-play" aria-hidden="true"></i>
        </button>
        <div class="progress-bar">
            <span id="progress">

            </span>
        </div>

    </div>
    
</body>


</html>

标签： htmlangulartypescript

解决方案

我想你已经有一个角度应用程序？

如果是这样：

  1. 创建你的组件
ng g c video
  1. video.component.ts 内部
@Component({
    selector: 'app-video',
    templateUrl: './video.component.html',
    styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {

  video;
  videoPlaying:boolean;
  percentage;

  ngOnInit() {
    this.video    = document.getElementsByTagName("video")[0];
  }

  togglevideo(){
    if(!this.videoPlaying){
      this.video.play();
      this.videoPlaying = true;
    }else{
      this.video.pause();
      this.videoPlaying = false;
    }
  }

  onTimeUpdate(){
    this.percentage = (this.video.currentTime / this.video.duration) * 100;
  }
  1. 在 video.component.css（或 .scss）内
#container {
  margin-top: 15px;
}

#container button{
  padding: 15px;
  background: black;
  color: white;
}
#container .progress-bar {
  margin-top: 15px;
  width: 100%;
  border: 2px solid black;
}
#container .progress-bar span{
    height: 5px;
    display:block;
    background: red;
    width: 0%;
    transition: width 0.25s ease;
}

#container button:active, #container button:focus{
    outline: none;
}
  1. video.component.html 内部
<video (timeupdate)="onTimeUpdate()" width="50%" height="50%">
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<div id="container">
 <button (click)="this.togglevideo()">
     <i [className]="videoPlaying ? 'fa fa-pause' : 'fa fa-play'" aria-hidden="true"></i>
 </button>
 <div class="progress-bar">
     <span [style.width]="percentage + '%'">

     </span>
 </div>

</div>
  1. 在要使用组件的地方，在 html 文件中：
<app-video></app-video>

推荐阅读