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小时内与您取得联系。

整合营销服务商