Angular 中自定義 Video 操作

頭條創作挑戰賽#

本文同步本人掘金平臺的文章：https://juejin.cn/post/7084784818247958535

上一篇文章是 Angular 項目實現權限控制。最近自己在網上看到別人使用 vue 進行自定義 video 的操縱。加上不久前實現了 angular 自定義 video 的相關需求，遂來記錄一下，作為交流思考

實現的功能如下：

播放 / 停止
快退 / 快進 / 倍速
聲音開 / 聲音關
進入全屏 / 退出全屏
進入畫中畫 / 退出畫中畫【安卓平板不支持，不建議使用】
經過時長 / 總時長
播放進度條功能：支持點擊，拖拽進度
聲音進度條功能：支持點擊，拖拽進度

如圖：

下面我們來一一實現：

這里的重點不在布局，我們簡單來定義一下：

<!-- app.component.html -->

<div class="video-page">
  <div class="video-tools">
    <button nz-button nzType="primary" (click)="play('btn')" style="margin-right: 12px;">播放 ?</button>
    <button nz-button nzType="primary" (click)="pause('btn')">暫停 ?</button>
    <ng-container>
      <button nz-button nz-dropdown [nzDropdownMenu]="menuForward" nzPlacement="bottomCenter" style="margin: 0 12px;">快進 ?</button>
        <nz-dropdown-menu #menuForward="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item (click)="forwardSecond(10)">快進 10 s</li>
            <li nz-menu-item (click)="forwardSecond(20)">快進 20 s</li>
          </ul>
        </nz-dropdown-menu>
    </ng-container>
    <ng-container>
      <button nz-button nz-dropdown [nzDropdownMenu]="menuBack" nzPlacement="bottomCenter">快退 ?</button>
        <nz-dropdown-menu #menuBack="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item (click)="retreatSecond(10)">快退 10 s</li>
            <li nz-menu-item (click)="retreatSecond(20)">快退 20 s</li>
          </ul>
        </nz-dropdown-menu>
    </ng-container>
    <ng-container>
      <button nz-button nz-dropdown [nzDropdownMenu]="speedUp" nzPlacement="bottomCenter" style="margin: 0 12px;">倍速 ?</button>
        <nz-dropdown-menu #speedUp="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item (click)="speedUpVideo(1)">正常</li>
            <li nz-menu-item (click)="speedUpVideo(2)">2 倍</li>
            <li nz-menu-item (click)="speedUpVideo(4)">4 倍</li>
          </ul>
        </nz-dropdown-menu>
    </ng-container>
    <button nz-button nzType="primary" (click)="openOrCloseVoice()">聲音開 / 聲音關 ?</button>
    <button nz-button nzType="primary" style="margin: 0 12px;" (click)="toFullScreen()">全屏 ?</button>
    <br />
    <button nz-button nzType="primary" style="margin-top: 12px;" (click)="entryInPicture()">進入畫中畫 ?? 安卓平板不支持</button>
    <button nz-button nzType="primary" style="margin: 12px 12px 0 12px;" (click)="exitInPicture()">退出畫中畫 ?? 安卓平板不支持</button>
    <br />
    <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;">
      經過時長 / 總時長 ： ? {{ currentTime }}  / {{ totalTime }}
    </div>
    <!-- 進度條 -->
    <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;">
      進度條：?
      <div
        class="custom-video_control-bg"
        (mousedown)="handleProgressDown($event)"
        (mousemove)="handleProgressMove($event)"
        (mouseup)="handleProgressUp($event)"
      >
        <div
          class="custom-video_control-bg-outside"
          id="custom-video_control-bg-outside"
        >
          <span
            class="custom-video_control-bg-inside"
            id="custom-video_control-bg-inside"
          ></span>
          <span
            class="custom-video_control-bg-inside-point"
            id="custom-video_control-bg-inside-point"
          ></span>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: flex-start; align-items: center; margin: 12px 0;">
      聲音條：?
      <div class="custom-video_control-voice">
        <span class="custom-video_control-voice-play">
          <i nz-icon nzType="sound" nzTheme="outline"></i>
        </span>
        <div
          class="custom-video_control-voice-bg"
          id="custom-video_control-voice-bg"
          (mousedown)="handleVolProgressDown($event)"
          (mousemove)="handleVolProgressMove($event)"
          (mouseup)="handleVolProgressUp($event)"
        >
          <div 
            class="custom-video_control-voice-bg-outside"
            id="custom-video_control-voice-bg-outside"
          >
            <span 
              class="custom-video_control-voice-bg-inside"
              id="custom-video_control-voice-bg-inside"
            ></span>
            <span 
              class="custom-video_control-voice-bg-point"
              id="custom-video_control-voice-bg-point"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="video-content">
    <video id="video" class="video" style="width: 100%" poster="assets/poster.png">
      <source type="video/mp4" src="assets/demo.mp4">
      Sorry, your browser doesn't support.
    </video>
  </div>
</div>
復制代碼

這里使用了 angular ant design，之前寫了一篇相關文章，還不熟悉的讀者可前往 Angular 結合 NG-ZORRO 快速開發

播放 / 停止

這里直接調用 video 對象的方法 play() 和 pause():

// app.component.ts

// 播放按鈕事件
play(flag: string | undefined) {
  if(flag) this.videoState.playState=true
  this.videoState.play=true
  this.video.play()
}
// 暫停按鈕事件
pause(flag: string | undefined): void {
  if(flag) this.videoState.playState=false
  this.video.pause()
  this.videoState.play=false
}
復制代碼

這里自定義的 play 和 pause 方法加上了一個標志，對下下面要講的進度條的控制有幫助，上面的代碼可以更加簡潔，讀者可以簡寫下。

快退 / 快進 / 倍速

這里的快退，快進和倍速設置了不同的選項，通過參數進行傳遞：

// app.component.ts

// 快進指定的時間
forwardSecond(second: number): void {
  this.video.currentTime +=second; // 定位到當前的播放時間 currentTime
}

// 后退指定的時間
retreatSecond(second: number): void {
  this.video.currentTime -=second
}

// 倍速
speedUpVideo(multiple: number): void {
  this.video.playbackRate=multiple; // 設定當前的倍速 playbackRate
}
復制代碼

聲音開 / 聲音關

聲音的開關使用 video 的 muted 屬性即可：

// app.component.ts

// 開或關聲音
openOrCloseVoice(): void {
  this.video.muted=!this.video.muted;
}
復制代碼

進入全屏 / 退出全屏

全屏的操作也是很簡單，使用 webkitRequestFullScreen

// app.component.ts

// 全屏操作
toFullScreen(): void {
  this.video.webkitRequestFullScreen()
}
復制代碼

全屏后，按 esc 可退出全屏

進入畫中畫 / 退出畫中畫

畫中畫相當于彈窗縮小視頻~

// app.component.ts

// 進入畫中畫
entryInPicture(): void {
  this.video.requestPictureInPicture()
  this.video.style.display="none"
}

// 退出畫中畫
exitInPicture(): void {
  if(this.document.pictureInPictureElement) {
    this.document.exitPictureInPicture()
    this.video.style.display="block"
  }
}
復制代碼

設置 video 的樣式，是為了看起來不突兀...

經過時長 / 總時長

記錄視頻的總時長和視頻當前的播放時長。我們已經來組件的時候就獲取視頻的元信息，得到總時長；在視頻播放的過程中，更新當前時長。

// app.component.ts

// 初始化 video 的相關的事件
initVideoData(): void {
  // 獲取視頻的總時長
  this.video.addEventListener('loadedmetadata', ()=> {
    this.totalTime=this.formatTime(this.video.duration)
  })
  // 監聽時間發生更改
  this.video.addEventListener('timeupdate', ()=> {
    this.currentTime=this.formatTime(this.video.currentTime) // 當前播放的時間
  })
}
復制代碼

formatTime 是格式化函數

播放進度條功能

監聽鼠標的點擊，移動，松開的事件，對視頻的播放時間和總事件進行相除，計算百分比。

// app.component.ts

// 進度條鼠標按下
handleProgressDown(event: any): void {
  this.videoState.downState=true
  this.pause(undefined);
  this.videoState.distance=event.clientX + document.documentElement.scrollLeft - this.videoState.leftInit;
}
// 進度條 滾動條移動
handleProgressMove(event: any): void {
  if(!this.videoState.downState) return
  let distanceX=(event.clientX + document.documentElement.scrollLeft) - this.videoState.leftInit
  if(distanceX > this.processWidth) { // 容錯處理
    distanceX=this.processWidth;
  }
  if(distanceX < 0) { // 容錯處理
    distanceX=0
  }
  this.videoState.distance=distanceX
  this.video.currentTime=this.videoState.distance / this.processWidth * this.video.duration
}
// 進度條 鼠標抬起
handleProgressUp(event: any): void {
  this.videoState.downState=false
  // 視頻播放
  this.video.currentTime=this.videoState.distance / this.processWidth * this.video.duration
  this.currentTime=this.formatTime(this.video.currentTime)
  if(this.videoState.playState) {
    this.play(undefined)
  }
}
復制代碼

這里需要計算進度條的位置，來獲取點擊進度條的百分比，之后更新視頻的當前播放時間。當然，我們還得有容錯處理，比如進度條為負數時候，當前播放時間為0。

聲音進度條

我們實現了播放進度條的操作，對聲音進度條的實現就很容易上手了。聲音進度條也是監聽鼠標的點擊，移動，松開。不過，這次我們處理的是已知聲音 div 的高度。

// app.component.ts

// 聲音條 鼠標按下
handleVolProgressDown(event: any) {
  this.voiceState.topInit=this.getOffset(this.voiceProOut, undefined).top
  this.volProcessHeight=this.voiceProOut.clientHeight
  this.voiceState.downState=true //按下鼠標標志
  this.voiceState.distance=this.volProcessHeight - (event.clientY + document.documentElement.scrollTop - this.voiceState.topInit) 
}
// 聲音 滾動條移動
handleVolProgressMove(event: any) {
  if(!this.voiceState.downState) return
    let disY=this.voiceState.topInit + this.volProcessHeight - (event.clientY + document.documentElement.scrollTop)
    if(disY > this.volProcessHeight - 2) { // 容錯處理
      disY=this.volProcessHeight - 2
    }
    if(disY < 0) { // 容錯處理
      disY=0
    }
    this.voiceState.distance=disY
    this.video.volume=this.voiceState.distance / this.volProcessHeight
    this.videoOption.volume=Math.round(this.video.volume * 100)
}
// 聲音 鼠標抬起
handleVolProgressUp(event: any) {
  this.voiceState.downState=false //按下鼠標標志
  let voiceRate=this.voiceState.distance / this.volProcessHeight
  if(voiceRate > 1) {
    voiceRate=1
  }
  if(voiceRate < 0) {
    voiceRate=0
  }
  this.video.volume=voiceRate
  this.videoOption.volume=Math.round(this.video.volume * 100); // 賦值給視頻聲音
}
復制代碼

如圖：

效果演示

完成了上面的內容，我們以一個 gif 圖來展示效果：

全屏，聲音和畫中畫比較難截圖，Gif 上體現不來

詳細的代碼，請前往 video-ng 獲取。

【完】?

篇介紹了前端入門——html 中如何使用圖片,今天講下如何使用視頻和音頻等多媒體元素，它們能讓你的網頁更加豐富，讀者相對于文字圖片更愿意觀看視頻和音頻或其它多媒體。在本教程中，您將了解到不同的多媒體格式，以及如何在您的網頁中使用它們。

什么是多媒體？

是多種媒體的綜合，一般包括文本，聲音和圖像等多種媒體形式。在計算機系統中，多媒體指組合兩種或兩種以上媒體的一種人機交互式信息交流和傳播媒體。使用的媒體包括文字、圖片、照片、聲音、動畫和影片，以及程式所提供的互動功能。

在因特網上，您會經常發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。

多媒體文件格式

多媒體元素（比如視頻和音頻）存儲于媒體文件中。多媒體元素也擁有帶有不同擴展名字的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。具體有哪些格式可以參考 w3cshool 網站的介紹，https://www.w3cschool.cn/html5/html5-video.html ，https://www.w3cschool.cn/html5/html5-audio.html。

HTML5 Video(視頻)

直到現在，網頁上仍然不存在一項顯示視頻的標準。今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

語法如下：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的瀏覽器不支持Video標簽。
</video>

<video> 元素提供了播放、暫停和音量控件來控制視頻。

同時 <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸。如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道視頻的大小，瀏覽器就不能在加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。

<video> 與 </video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。一個頁面可以使用多個<video> 標簽，<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。

顯示效果：

HTML5Audio(音頻)

和視頻一樣沒有統一的標準，各個瀏覽器都不一樣。HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素。通過使用HTML5中的audio功能，你可以實現與flash相同的功能，即回放、跳轉、緩沖等。

語法如下：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的瀏覽器不支持 audio 元素。
</audio>

control 屬性供添加播放、暫停和音量控件。在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本。允許使用多個 <source> 元素。<source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg。

顯示效果：

HTML 插件——輔助應用程序

插件（Plug-in）是擴展瀏覽器標準功能的計算機程序，插件被設計用于許多不同的目的：

運行 Java 小程序
運行 ActiveX 控件
顯示 Flash 電影
顯示視頻或音頻
顯示地圖
掃描病毒
驗證銀行賬號

1、<object> 元素

它旨在將插件（例如 Java applet、PDF 閱讀器和 Flash 播放器）嵌入網頁中，但也可以用于將 HTML 包含在 HTML 中。

如下：

插入一個網頁片段

<object width="100%" height="500px" data="snippet.html"></object>

或者插入一個圖片

<object data="audi.jpeg"></object>

播放一個視頻

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>

播放一個音頻

<object height="100" width="100" data="song.mp3"></object>

2、<embed> 元素

插入一個flash文件

<embed width="400" height="50" src="bookmark.swf">

插入html片段

<embed width="100%" height="500px" src="snippet.html">

播放一個音頻

<embed height="100" width="100" src="song.mp3" />

插入一個圖片

<embed src="audi.jpeg">

注意：
大多數瀏覽器不再支持 Java 小程序和插件。
大多數現代瀏覽器關閉了對 Flash 的支持。
我們可以使用 <video> 和 <audio> 標簽來顯示視頻和音頻

視頻和音頻如何兼容大多瀏覽器

如下視頻代碼，HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 <embed> 元素。

HTML 5 + <object> + <embed> 是最好的解決辦法。

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

如下音頻代碼，HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

HTML 5 + <embed> 是最好的解決辦法。

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>

到此你以及了解了如何在網頁中使用視頻音頻及其它多媒體控件，趕快自己試試，祝你學習愉快。

參考文獻：https://www.w3school.com.cn/html/html_video.asp

上篇：前端入門——html 中如何使用圖片

下篇：前端入門——html 表格的使用

網頁開發中，跟蹤用戶與多媒體內容（如視頻）的互動是一項常見需求。無論是教育平臺、數據分析，還是用戶參與度統計，監控用戶如何觀看視頻內容都能提供寶貴的見解。這篇文章將探索如何使用JavaScript實現視頻播放時長的跟蹤。

目標

我們的目標是跟蹤用戶觀看視頻的總時長，包括暫停的時間，并將這些信息更新到后臺系統。我們將通過捕獲播放、暫停和結束等事件來計算觀看時間。

實現步驟

讓我們來分解一下實現的關鍵方面：

1. HTML結構

我們將使用HTML5的<video>標簽將視頻嵌入到網頁中。每個視頻元素都將有一個唯一的標識符，以便在JavaScript中輕松訪問。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>視頻播放時長跟蹤</title>
  </head>
  <body>
    <!-- 視頻容器 -->
    <video id="video_content1" width="640" height="360" controls>
      <!-- 視頻源 -->
      <source src="your_video_source.mp4" type="video/mp4" />
    </video>

    <!-- 包含JavaScript代碼 -->
    <script src="your_script.js"></script>
  </body>
</html>

2. JavaScript實現

在JavaScript文件（your_script.js）中，我們將處理視頻事件并計算總的觀看時間。

// 獲取視頻元素
let videoMat="your_video_source.mp4";
let source=document.createElement('source');
let video=document.getElementById('video_content1');

// 設置視頻源
source.src=videoMat;
source.type='video/mp4';

// 將源附加到視頻元素
if (video) {
  video.appendChild(source);

  // 初始化變量
  let startTime=null;
  let lastUpdateTime=null;
  let totalElapsedTime=0;

  // 'play'事件監聽器
  video.addEventListener('play', function () {
    startTime=new Date();
    lastUpdateTime=startTime;
    console.log('視頻正在播放。開始時間:', startTime);
  });

  // 'timeupdate'事件監聽器
  video.addEventListener('timeupdate', function () {
    if (!video.paused && startTime !==null) {
      const currentTime=new Date();
      const elapsedSinceLastUpdate=(currentTime - lastUpdateTime) / 1000;
      totalElapsedTime +=elapsedSinceLastUpdate;
      lastUpdateTime=currentTime;
      console.log("從開始到現在的觀看時間: " + totalElapsedTime + " 秒");
    }
  });

  // 'pause'事件監聽器
  video.addEventListener('pause', function () {
    // 僅當視頻已在播放時存儲暫停時間
    if (startTime !==null) {
      const pausedTime=video.currentTime;
      console.log('視頻已暫停。暫停時刻:', pausedTime);
      checkAndUpdateItem(totalElapsedTime, 1, 'your_video_title');
    }
  });

  // 'ended'事件監聽器
  video.addEventListener('ended', function () {
    // 視頻播放已結束
    checkAndUpdateItem(totalElapsedTime, 1, 'your_video_title');
  });

  // 'play'事件監聽器（從暫停時間繼續播放）
  video.addEventListener('play', function () {
    // 如果視頻之前暫停，繼續從暫停時刻播放
    if (startTime !==null) {
      video.currentTime=video.currentTime;
    }
  });
}

解釋

HTML結構：我們使用<video>標簽嵌入視頻，并提供一個唯一標識符（video_content1）以便在JavaScript中訪問。我們在body末尾包含JavaScript文件，以確保DOM加載完成后再運行腳本。
JavaScript實現：

我們動態設置視頻源。
設置了播放、時間更新、暫停和結束事件的監聽器。
在‘play’事件中，我們捕獲開始時間和最后更新時間。
在‘timeupdate’事件中，我們不斷計算自上次更新以來的觀看時間。
視頻暫停時，我們存儲暫停時間并更新后臺。
‘ended’事件表示視頻播放結束。

結論

實現視頻播放時長的跟蹤可以增強用戶分析，提供有關用戶參與度和內容受歡迎程度的見解。這里提供的JavaScript代碼為您集成視頻跟蹤到網頁應用中提供了基礎。

記得將‘your_video_source.mp4’和‘your_video_title’替換為實際的視頻源和標題。

祝您編碼愉快！

在線咨詢

上一篇：java開發工程師基礎學習一-HTML初識
下一篇：網站單頁面不為人知的優化細節｜干貨分享純原創

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商