HTML基礎篇-17HTML之視頻播放

頻是網頁承載內容很重要的一個元素，也是必不可少的網頁表現形式（圖、文、表、視、音）之一。曾經網頁要想播放視頻、制作游戲，必須得用第三方插件flash。不僅編寫代碼要使用額外的語言，瀏覽器也必須得裝第三方插件，非常不方便。隨著html5標準逐漸普及，移動端、pc端開始拋棄flash，如今幾乎所有的瀏覽器都使用html5來制作視頻。

目標

了解Flash為何會被淘汰？
如何設置視頻播放？
視頻播放支持哪幾種視頻格式？

flash崛起--網頁標準的恥辱

flash是Adobe公司其中之一的產品。它發起于W3C與WHATWG的第五代web標準之爭，它撿了個大便宜，乘機定義網頁媒體標準。

W3C與WHATWG的第五代web標準之爭

flash填補了當時網頁只有文字和圖片的單調世界，將媒體（視頻、音頻、游戲）引入了網頁，將網頁帶進多彩的世界。

Flash能夠用僅僅十幾K到幾百K的體積，呈現出放大也不會失真的矢量彩色動圖，甚至還能夠做出足以令人沉迷一整天的Flash小游戲。

火柴人

Flash用第三方插件的身份，幾乎制霸了網頁媒體的標準，讓W3C尷尬不已，甚至從某種程度上說，讓真正的網頁標準推廣受阻。

flash衰敗--HTML5崛起并全面普及

2010年4月，蘋果CEO公開表示從此蘋果所有產品不再支持flash。flash從此慢慢喪失移動端的市場和地位。

喬布斯支持html5

2012年，安卓宣布不再支持Flash，從此flash徹底失去了移動端市場和地位。

2012年html5標準確立，html5在逐漸制霸移動端的地位時，也直接沖擊了flash僅剩的桌面市場，flash桌面市場的份額在逐步下降。

各大瀏覽器逐步默認禁用Flash，現2019年幾乎都全部禁用。

默認禁用Flash

Adobe將在2020年停止開發和更新flash。

2020年停止開發和更新flash

flash興起衰敗皆因自己

Flash以第三方插件的身份，做著平臺該做的事情，但沒有推動行業標準統一化，反而企圖私立標準。

隨著功能的增多，能解碼編碼H.264，能進行3D渲染，能播放7.1聲道環繞聲等，功能集于一身變得臃腫，效率變得低下。

Flash非常不安全。Flash能夠運行相當復雜的代碼，這讓Flash非常容易被滲透。加上Adobe在安全方面的不上心，這令Flash安全問題頻發。

Flash很不穩定。作為一個插件，它自身頻頻崩潰也就罷了，還經常拉著瀏覽器乃至操作系統一起殉情。

Flash加劇了手機的耗電量。

html5媒體新標準--Video標簽

作用是在 HTML 頁面中嵌入視頻元素。Video定義視頻，比如電影片段或其他視頻流。

視頻播放

Video標簽的屬性

src 視頻的播放源
controls 瀏覽器自帶的控制條
width 視頻寬度
height 視頻高度
poster 視頻封面
autoplay 自動播放
preload 預加載

有四個是必須的屬性：src、controls、width、height屬性。

視頻播放代碼

source標簽

<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。

<source> 元素可以鏈接不同格式的視頻文件。瀏覽器將使用第一個可識別的格式。

src 視頻的播放源
Type 視頻格式 MP4, WebM, 和 Ogg

支持多格式的視頻

總結

video標簽體系

篇介紹了前端入門——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’替換為實際的視頻源和標題。

祝您編碼愉快！

在線咨詢

上一篇：AI加持的另類大屏之華為智慧屏V65上手體驗
下一篇：干貨：HTML中“input”背景提示文字美化

您的項目需求

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

整合營銷服務商