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 表格的使用

据当前疫情防控情况，广州市明确高中非毕业年级和义务教育阶段学生展开线上教育。自3月9日起，由广州市教育局主办的全市托底课程“广州电视课堂”正式推出初中和小学直播课程，高中课程亦会直播。

作为教育局公布的播放平台之一，

官方指定渠道新花城将同步上线

中小学11个年级的

直播课程及内容回放，

并设多种名师课程。

家长只需打开手机，

孩子就能通过 “新花城”宅家学习啦！目前“新花城”访问量太大导致App服务资源告急别急还有以下两种方式可以直达上课“现场”

方法一：

新花城网站（PC端）：

https://www.gz-cmc.com/

选择：视频——广州电视课堂

选择需要观看的年级，就可以观看课程直播和课程回放

方法二：点击以下的微信分享页链接

小一：

https://huacheng.gz-cmc.com/live/2020/03/05/c1aeae7409704a6dacc55193cbb39652.html

小二：

https://huacheng.gz-cmc.com/live/2020/03/05/88cc689c6a574377a6176b09ae64fbd6.html

小三：

https://huacheng.gz-cmc.com/live/2020/03/05/db71a0feb8f745edbaaa3a5cadb708d8.html

小四：

https://huacheng.gz-cmc.com/live/2020/03/05/e782abc288d643f3aab2d09a9b7937bf.html

小五：

https://huacheng.gz-cmc.com/live/2020/03/05/cc6449dd82f3423895b0d62277957458.html

小六：

https://huacheng.gz-cmc.com/live/2020/03/05/8c96c283090b44d6b55a24d5b8024a12.html

初一：

https://huacheng.gz-cmc.com/live/2020/03/05/e4e0967ab40a4ae19c62feb00ea4889e.html

初二：

https://huacheng.gz-cmc.com/live/2020/03/05/14546decf6aa4ada9d4323e3d65621c6.html

初三：

https://huacheng.gz-cmc.com/live/2020/03/05/0b008cb7acd842b0ba535b32de675a37.html

高一：

https://huacheng.gz-cmc.com/live/2020/03/02/f4cbea356fd44b6e97211f4063c16700.html

高二：

https://huacheng.gz-cmc.com/live/2020/03/02/fcab79ec03f94eb9a6968170e45a79a2.html

广州日报全媒体文字记者：苏俊杰

广州日报全媒体图片记者：苏俊杰、苏韵桦

广州日报全媒体编辑：吴一钒

在线咨询

上一篇：HTML编辑器从WORD复制粘贴图片
下一篇：JavaScript 高级入门对象 (Object) 对象实例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商