如何用JavaScript實現(xiàn)視頻觀看時間追蹤

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

目標(biāo)

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

實現(xiàn)步驟

讓我們來分解一下實現(xiàn)的關(guān)鍵方面：

1. HTML結(jié)構(gòu)

我們將使用HTML5的<video>標(biāo)簽將視頻嵌入到網(wǎng)頁中。每個視頻元素都將有一個唯一的標(biāo)識符，以便在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實現(xiàn)

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

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

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

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

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

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

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

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

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

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

解釋

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

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

結(jié)論

實現(xiàn)視頻播放時長的跟蹤可以增強用戶分析，提供有關(guān)用戶參與度和內(nèi)容受歡迎程度的見解。這里提供的JavaScript代碼為您集成視頻跟蹤到網(wǎng)頁應(yīng)用中提供了基礎(chǔ)。

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

祝您編碼愉快！

在很多網(wǎng)站上都會使用到視頻和音頻，HTML5 中提供了展示視頻和音頻的標(biāo)簽。向網(wǎng)頁嵌入視頻可以使用 <video> 標(biāo)簽，而嵌入音頻可以使用 <audio> 標(biāo)簽。這兩個標(biāo)簽都是 HTML 5 中新增的標(biāo)簽，兩個標(biāo)簽中的屬性和方法也很類似，但也有些不同。其中 audio 元素用于定義聲音，比如音樂， video 元素用于定義視頻，如電影等。

向網(wǎng)頁中嵌入視頻

<video> 標(biāo)簽可以用于定義視頻，且提供了播放、暫停、音量控件來控制視頻。舉個例子，像我們俠課島網(wǎng)站上，課程視頻播放，就是通過 <video> 標(biāo)簽來實現(xiàn)的。下面我們來看一下如何向網(wǎng)頁中嵌入一個視頻。

示例：

首先我們準(zhǔn)備一個視頻，例如一個 test.mp4，然后使用 <video> 標(biāo)簽嵌入視頻，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
    </body>
</html>

在瀏覽器中的預(yù)覽效果：

從上圖中可以看到，我們通過 <video> 標(biāo)簽成功向網(wǎng)頁中插入了一個視頻，其中 src 屬性用于引入要播放的視頻的 URL，注意視頻地址一定要正確，如果地址錯誤，視頻是不能顯示的。然后我們通過 width、height 屬性設(shè)置了視頻的寬度為 700px ，高度為 400px。

然后可以看到，視頻上還顯示了播放、調(diào)整音量等控件，當(dāng)我們點擊播放按鈕時，視頻就會開始播放。這是因為我們設(shè)置了 controls 屬性，如果我們沒有設(shè)置這個屬性，視頻將會顯示一個靜止的畫面，并且不管怎么點擊都是沒有反應(yīng)的。大家可以試一下，不設(shè)置 controls 屬性然后在瀏覽器中查看演示效果，這里就不演示給大家看了。

video 元素中的常用屬性如下所示：

有些比較老的瀏覽器可能不支持 <video> 標(biāo)簽，例如 IE8 及以下的瀏覽器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標(biāo)簽。

所以我們可以在 <video> 標(biāo)簽中放置文本內(nèi)容，這樣當(dāng)某個瀏覽器不支持此標(biāo)簽時，就可以顯示提示內(nèi)容：

<video src="./test.mp4" controls="controls" width="700px" height="400px">
    您的瀏覽器不支持 video 標(biāo)簽
</video>

這樣用戶就會知道，是因為瀏覽器不支持所以加載視頻不成功，可以換一個瀏覽器。

視頻的格式

像我們平時看到的視頻格式有很多種，例如常見的有 mp4、AVI、mov、rmvb、Ogg 等等，目前 video 元素支持的視頻格式有下面三種：

這三種視頻格式，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器，Ogg 格式不支持IE、Safari 瀏覽器，WebM 格式不支持IE、Safari 瀏覽器等。

所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標(biāo)簽。

source標(biāo)簽

<source> 標(biāo)簽可以為媒體元素定義媒介資源，例如 video 和 audio 元素。

例如 <video> 標(biāo)簽中可以包含多個 <source> 標(biāo)簽，<source> 標(biāo)簽可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式。

示例：

例如我們插入的視頻播放器，帶有兩個源文件，瀏覽器會根據(jù)需要來選擇源文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video controls="controls" width="700px" height="400px">
            <source src="./test.mp4" type="video/mp4">
            <source src="./test.ogg" type="video/ogg">
            您的瀏覽器不支持 video 標(biāo)簽
        </video>
    </body>
</html>

像上述代碼中，如果是 Safari 瀏覽器就會選擇第一個源文件，如果是 Firefox 瀏覽器則會選擇第二個源文件。

<source> 標(biāo)簽有三個屬性：

向網(wǎng)頁中嵌入音頻

向網(wǎng)頁中嵌入音頻可以使用 <audio> 標(biāo)簽，此標(biāo)簽的使用和 <video> 標(biāo)簽類似。插入視頻是有畫面的，我們也可以調(diào)整視頻的寬和高等，而插入音頻是沒有畫面的。

audio 元素支持的格式和 video 元素也有一點區(qū)別：

示例：

例如我們插入一段音頻，在瀏覽器中可以看到，是沒有畫面的，只有聲音：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <audio controls="controls">
            <source src="./test.mp4" type="audio/mpeg">
            <source src="./test.ogg" type="audio/ogg">
            您的瀏覽器不支持 audio 標(biāo)簽
        </audio>
    </body>
</html>

在瀏覽器中的演示效果：

向網(wǎng)頁中嵌入音頻時，也可以通過 <source> 標(biāo)簽來指定兩個源文件，<source> 標(biāo)簽允許規(guī)定兩個視頻或者音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進(jìn)行選擇。

audio 元素中的常用屬性和 video 元素差不多，但是 audio 元素中沒有 width、height 等屬性。

常用屬性如下所示：

總結(jié)

向網(wǎng)頁中嵌入視頻和音頻其實很簡單，要注意 video 元素和 audio 元素支持的視頻、音頻格式類型，如果插入的視頻格式不支持，則視頻或音頻不會顯示。

更多可以查看鏈接：https://www.9xkd.com/

GV是一種視頻容器格式，通常用于播放帶有HTML標(biāo)簽的網(wǎng)頁視頻。另一方面，MP4是一種壓縮的多媒體文件格式，用于通過網(wǎng)絡(luò)的流式傳輸格式。在某些情況下，您需要將視頻從MP4轉(zhuǎn)換為OGV格式，使文件與HTML更加兼容，因此可以輕松地在不同的瀏覽器（如Google Chrome和火狐）中播放。隨著HTML5的日益普及，OGV文件與HTML5的關(guān)系使其用途更加突出。在本文的以下部分中，我們將討論如何在線將MP4轉(zhuǎn)換為OGV 的方法。

第1部分.3個在線將MP4轉(zhuǎn)換為OGV的轉(zhuǎn)換器

在線轉(zhuǎn)換器是轉(zhuǎn)換文件格式的好方法，因為這些工具簡單易用。在使用大多數(shù)這些在線程序時，您只需添加所需的文件并選擇輸出格式。然后可以從界面本身下載轉(zhuǎn)換后的文件。下面討論的是一些將MP4轉(zhuǎn)換為OGV格式的流行在線工具。

1. Convertio

這是最常用的在線轉(zhuǎn)換器之一，除了 MP4到OGV 之外，還支持所有流行的格式。該轉(zhuǎn)換器允許從PC，Dropbox，Google云端硬盤和URL添加所需的視頻文件。該程序允許一次添加多個文件，最大可以添加100MB的文件大小。轉(zhuǎn)換后，可以將文件添加到PC，Dropbox或Google云端硬盤。

使用Convertio將MP4轉(zhuǎn)換為OGV的步驟：

第1步：在PC瀏覽器上打開。

第2步：從您的PC，Dropbox，Google云端硬盤或URL添加MP4文件。

第3步：點擊“轉(zhuǎn)換”開始轉(zhuǎn)換。

2. FileZigZag

這是另一個流行的在線程序，允許通過幾個簡單的步驟將MP4轉(zhuǎn)換為OGV。該程序可免費使用，無需下載或安裝。轉(zhuǎn)換后的文件可以從程序界面下載，也可以將其鏈接發(fā)送到電子郵件地址。支持一系列圖像，音頻和視頻文件格式進(jìn)行轉(zhuǎn)換。

使用FileZigZag將MP4轉(zhuǎn)換為OGV的步驟：

第1步：在PC瀏覽器上打開。

第2步：點擊“選擇”從您的PC添加MP4文件。

第3步：在“轉(zhuǎn)換為：”部分下，從視頻類別中選擇OGV作為輸出格式。

第4步：輸入您要獲取轉(zhuǎn)換后的文件鏈接的電子郵件地址，然后單擊“轉(zhuǎn)換”開始該過程。

3. FreeFileConvert

FreeFileConvert是另一個在線轉(zhuǎn)換器，支持將視頻轉(zhuǎn)換為多種流行格式。該程序允許通過PC，Google云端硬盤，Dropbox和URL添加文件。最多可以將5個文件的組合大小添加到100MB進(jìn)行轉(zhuǎn)換。該轉(zhuǎn)換器是免費使用的，并且具有簡單的界面。

使用FreeFileConvert將MP4轉(zhuǎn)換為OGV的步驟：

第1步：在PC瀏覽器上，打開。

第2步：點擊“選擇文件”，從計算機，URL或云中添加所需的MP4文件。

第3步：在“輸出格式”下，從視頻類別中選擇OGV作為所需的格式。

第4步：點擊“轉(zhuǎn)換”開始轉(zhuǎn)換過程。

第2部分.在線將MP4轉(zhuǎn)換到OGV的局限性

對于基本的轉(zhuǎn)換需求，在線轉(zhuǎn)換器是不錯的選擇。但是，如果您正在尋找高級選項，那么這些工具就不合適了。下面列出了與在線轉(zhuǎn)換器相關(guān)的許多限制：

1、文件大小是要考慮的重要因素。這些網(wǎng)站的大小受到限制。達(dá)到一定大小的文件后，您的轉(zhuǎn)換將無法實現(xiàn)。

2、視頻播放完畢后，您將不得不重新下載文件。而且，轉(zhuǎn)換速度是另一個問題。這可能需要很長時間。

3、您不能期望從此類轉(zhuǎn)換獲得最佳質(zhì)量。轉(zhuǎn)換完成后，質(zhì)量通常會下降。

4、與專業(yè)的完整工具相比，受支持的格式數(shù)量更少。

5、您需要一個穩(wěn)定且更好的在線轉(zhuǎn)換器網(wǎng)絡(luò)，否則，轉(zhuǎn)換將偶爾停止。

6、可能會要求您付款以享受文件的完整轉(zhuǎn)換。

7、大多數(shù)在線轉(zhuǎn)換器不支持任何其他功能，例如編輯文件和批處理。

第3部分.如何使用轉(zhuǎn)換工具輕松將MP4轉(zhuǎn)換為OGV

考慮到本文上面列出的在線工具的局限性，可以得出結(jié)論，專業(yè)軟件是MP4到OGV在線轉(zhuǎn)換器的替代品。萬興優(yōu)轉(zhuǎn)就是一種可以與所有類型的視頻轉(zhuǎn)換完美配合的軟件。該軟件與Windows以及Mac系統(tǒng)兼容，并能以其他超快速度將MP4轉(zhuǎn)換為OGV以及其他格式。

在Windows/Mac上如何將MP4轉(zhuǎn)換為OGV的步驟

步驟1將MP4視頻文件添加到萬興優(yōu)轉(zhuǎn)

您可以點擊+添加文件按鈕以從計算機文件夾中添加MP4視頻文件，或者只需拖動將您的視頻直接拖放到文件列表中。

步驟2選擇OGV作為視頻文件的輸出格式

從輸出格式列表中選擇MP3作為輸出格式，單擊輸出格式：的下拉圖標(biāo)。然后選擇視頻 > OGV。

步驟3將MP4文件轉(zhuǎn)換為OGV

完成所有操作后單擊轉(zhuǎn)換按鈕，即可將MP4文件轉(zhuǎn)換為OGV。并且所有任務(wù)將以高速度和高質(zhì)量完成。轉(zhuǎn)換速度通常取決于原始視頻大小和您的PC配置。您可以單擊打開文件位置以獲取轉(zhuǎn)換后的視頻。

在線咨詢

上一篇：「快學(xué)springboot」使用springboot實現(xiàn)發(fā)送郵件功能
下一篇：C井調(diào)用Windows API實現(xiàn)自動登錄

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何用JavaScript實現(xiàn)視頻觀看時間追蹤

目標(biāo)

實現(xiàn)步驟

結(jié)論

向網(wǎng)頁中嵌入視頻

視頻的格式

source標(biāo)簽

向網(wǎng)頁中嵌入音頻

總結(jié)

您的項目需求