首页 / HTML / 前端：HTML5学习之路（三）
前端：HTML5学习之路（三）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端：HTML5学习之路（三），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含19686字，纯文字阅读大概需要29分钟。
内容图文
第3章 HTML5图像和多媒体
3.1 网页图像
1）定义图像
在HTML5中，使用<img>标签来把图像插入网页中。用法如下：
1
<!--
img有两个必需的属性：src属性和alt属性
-->
2
<
img
src
="URL"
alt
="替代文本"
/>
其中，src：定义显示图像的URL，alt：设置图像的替代文本（图像无法显示时，显示该文本）。
使用代码示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
<
img
src
="images/book1.jpg"
width
="400"
alt
="书籍1图片"
/>
10
</
body
>
11
</
html
>
2）定义流
流表示图表、照片、图形、插图、代码片段等独立的内容。HTML5使用figure和figcaption引入流，其中figcaption表示流的标题，流标题不是必需的，但有的话，它必须内嵌作为figure元素的第一个或最后一个元素。figure默认从新的一行开始显示流内容，可通过CSS改变该显示方式。使用代码示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
<
body
>
8
<
article
>
9
<
h1
>2017年12月，全球PC浏览器市场份额排行榜</h1>10<p>第1名：Google的Chrome浏览器，其全球市场份额为64.72%； </p>11<p>第2名：Mozilla Firefox，其市场份额为12.21%； </p>12<p>第3名：微软的IE浏览器，其市场份额为7.71%； </p>13<p>第4名：苹果的Safari浏览器，其市场份额为6.29%； </p>14<p>第5名：微软的Edge浏览器，其市场份额为4.18%； </p>15<p>第6名：Opera浏览器，其市场份额为2.31%； </p>16<p>其他浏览器的市场份额合计为2.58%。 </p>17<figure>18<figcaption><b>12月份</b>全球浏览器市场份额</figcaption>19<img src="C:\Users\32282\Pictures\images\111.png" width="300"/>20</figure>21<p>数据来源：StatCounter-Desktop Browsers</p>22</article>23</body>24</html>
3）定义图标
网站图标一般显示在浏览器选项卡、历史记录、书签、收藏夹或地址栏中。图标大小一般为16x16px，透明背景。移动设备图标大小：iPhone图标大小为57x57px或114x114px（Retina屏），iPad图标大小为72x72px或144x144px（Retina屏）。Android支持该尺寸的图标。
使用代码示例步骤：
a.创建大小为16x16px的图像命名为xxx.ico，注意扩展名为.ico。同时为Retina屏创建一个32x32px的图像。
b.为触屏设备至少创建一个图像，并保存为png格式。
c.将图标放到网站根目录。
d.新建HTML5文档命名为test.html，输入代码如下：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
>百度一下</title> 6<link rel="icon" sizes="any" mask href="file:///C:/Users/32282/Pictures/images/icons/baidu_icon.svg"> 7<link rel="icon" href="file:///C:/Users/32282/Pictures/images/icons/favicon.ico" type="image/x-icon"/> 8<link rel="shortcut icon" href="file:///C:/Users/32282/Pictures/images/icons/favicon.ico" type="image/x-icon"/> 9</head>1011<body>12<h1>留意上方地址栏图标</h1>13<p></p>14</body>15</html>
效果示例：
3.2 响应式图像
1)响应视图大小
HTML5.1新增了picture元素和img元素的srcset、sizes属性，使得响应式图片的实现更为简单便捷，很多主流浏览器的新版本对这些元素支持良好。
<picture>标签仅作为容器，可以包含一个或多个<source>子标签。<source>可以加载多媒体源，它包含srcset（必需）、media（设置媒体查询）、sizes（设置宽度）和type属性（设置MIME类型）。使用代码示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
<
script
src
="images/picturefill.js"
type
="text/javascript"
></
script
>
7
</
head
>
8
9
<
body
>
10
<
picture
>
11
<
source
media
="(min-width: 850px)"
srcset
="images/kitten-large.png"
>
12
<
source
media
="(min-width: 300px)"
srcset
="images/kitten-medium.png"
>
13
<!--
img标签用于不支持picture元素的浏览器
-->
14
<
img
src
="images/kitten-small.png"
alt
="a cute kitten"
id
="picimg"
>
15
</
picture
>
16
</
body
>
17
</
html
>
2）响应屏幕方向
当屏幕方向为横屏方向时加载kitten-large.png的图片，当屏幕方向为竖屏方向时加载kitten-medium.png的图片。使用代码示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
<
script
src
="images/picturefill.js"
type
="text/javascript"
></
script
>
7
</
head
>
8
<
body
>
9
<
picture
>
10
<
source
media
="(orientation: portrait)"
srcset
="images/kitten-medium.png"
>
11
<
source
media
="(orientation: landscape)"
srcset
="images/kitten-large.png"
>
12
<!--
img标签用于不支持picture元素的浏览器
-->
13
<
img
src
="images/kitten-small.png"
alt
="a cute kitten"
id
="picimg"
>
14
</
picture
>
15
</
body
>
16
</
html
>
小结：可以结合多种条件（如屏幕方向和视图大小），分别加载不同的图片。
3）响应像素密度
以屏幕像素密度作为条件，当像素密度为2x时，加载后缀为_retina.png的图片，当像素密度为1x时加载无后缀retina的图片。使用代码示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
<
script
src
="images/picturefill.js"
type
="text/javascript"
></
script
>
7
</
head
>
8
9
<
body
>
10
11
<
picture
>
12
<
source
media
="(min-width: 320px) and (max-width: 640px)"
srcset
="images/minpic_retina.png 2x"
>
13
<
source
media
="(min-width: 640px)"
srcset
="img/middle.png,img/middle_retina.png 1x"
>
14
<
img
src
="img/picture.png,img/picture_retina.png 2x"
alt
="this is a picture"
>
15
</
picture
>
16
17
</
body
>
18
</
html
>
4）响应图像格式
以图片的文件格式作为条件，当支持webp格式图片时加载webp格式图片，不支持时加载png格式的图片。使用代码示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
<
script
src
="images/picturefill.js"
type
="text/javascript"
></
script
>
7
</
head
>
8
9
<
body
>
10
11
<
picture
>
12
<
source
type
="image/webp"
srcset
="images/picture.webp"
>
13
<
img
src
="images/picture.png"
alt
=" this is a picture "
>
14
</
picture
>
15
16
</
body
>
17
</
html
>
5）自适应像素比
自适应像素比主要是用来做屏幕自适应的，根据各种屏幕的显示像素不同，从而显示对应像素的图片，需要以自适应像素比来作为要是图片的一种查询使用参数。使用代码示例步骤：
a.先准备5张图：
500.png：大小等于500x500px。
1000.png：大小等于1000x1000px。
1500.png：大小等于1500x1500px。
2000.png：大小等于2000x2000px。
2500.png：大小等于2500x2500px。
b.新建HTML5文档，输入下面代码，即可在不同屏幕像素比的设备上进行测试。
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
<
body
>
8
<
img
width
="500"
srcset
="
9
images/2500.png 5x,
10
images/1500.png 3x,
11
images/1000.png 2x,
12
images/500.png 1x
13
"
14
src
="images/500.png"
15
/>
16
</
body
>
17
</
html
>
可以把自适应像素比作为条件来挑选要显示的图片，示例代码：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
<
style
type
="text/css"
>
7
/*
默认大小
*/
8
.photo
{
background-image
:
url(images/100.png)
;
}
9
/*
如果设备像素比大于等于2，则用2倍图
*/
10
@media screen and (-webkit-min-device-pixel-ratio: 2),
11
screen and (min--moz-device-pixel-ratio: 2)
{
12
.photo {
13
background-image
:
url(images/1000.png)
;
14
background-size
:
100px 100px
;
15
}
16
}
17
/*
如果设备像素比大于等于3，则用3倍图
*/
18
@media screen and (-webkit-min-device-pixel-ratio: 3),
19
screen and (min--moz-device-pixel-ratio: 3)
{
20
.photo {
21
background-image
:
url(images/1500.png)
;
22
background-size
:
100px 100px
;
23
}
24
}
25
.photo
{
width
:
100px
;
height
:
100px
;
}
26
27
</
style
>
28
</
head
>
29
30
<
body
>
31
32
<
div
class
="photo"
></
div
>
33
34
</
body
>
35
</
html
>
6）自适应视图宽
自适应视图宽主要是在屏幕加载图片时常见到，如果没有设置sizes，加载图片时一般按照100vm加载图片。使用示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
<!--
视口宽在500px及以下时，使用500w的图片；在1000px及以下时，使用1000w的图片，以此类推。最后设置如果媒体查询都满足的情况下，使用2000w的图片
-->
10
<
img
width
="500"
srcset
="
11
images/2000.png 2000w,
12
images/1500.png 1500w,
13
images/1000.png 1000w,
14
images/500.png 500w
15
"
16
sizes
="
17
(max-width: 500px) 500px,
18
(max-width: 1000px) 1000px,
19
(max-width: 1500px) 1500px,
20
2000px "
21
src
="images/500.png"
22
/>
23
24
</
body
>
25
</
html
>
尝试使用百分比来设置视口宽度，设计图片显示选择的方法：视口宽度乘以1、0.8或0.5，根据得到的像素来选择不同的w。举个例子：当视口viewport为900px，对应80vm，即为：900x0.8=720px,对应选择第一个大于720w的源图（即1000w）进行显示。使用示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
10
<
img
width
="500"
srcset
="
11
images/2000.png 2000w,
12
images/1500.png 1500w,
13
images/1000.png 1000w,
14
images/500.png 500w
15
"
16
sizes
="
17
(max-width: 500px) 100vm,
18
(max-width: 1000px) 80vm,
19
(max-width: 1500px) 50vm,
20
2000px "
21
src
="images/500.png"
22
/>
23
24
</
body
>
25
</
html
>
3.3 音频和视频
1）使用embed
使用<embed>标签可以定义嵌入插件，以便播放多媒体信息。用法如下：
1
<
embed
src
="url"
/>
src属性必须设置，用来指定媒体源。<embed>标签还包含height、width、type属性。前二者用来设置内嵌内容的高度和宽度，type则是用来定义嵌入内容的类型。使用代码示例：（提示：目前IE浏览器由于存在相应mp3音频播放插件故对embed支持良好，而谷歌没有）
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
<
style
type
="text/css"
>
7
body
{
8
background-image
:
url(images/bg.jpg)
;
9
}
10
</
style
>
11
</
head
>
12
13
<
body
>
14
15
<
embed
src
="images/bg.mp3"
width
="307"
height
="32"
autostart
="true"
loop
="infinite"
hidden
="true"
></
embed
>
16
17
</
body
>
18
</
html
>
embed也可以播放视频。示例：（提示：目前IE浏览器由于存在相应avi视频播放插件故对embed支持良好，而谷歌没有）
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
10
<
embed
src
="images/vid2.avi"
width
="413"
height
="292"
></
embed
>
11
</
body
>
12
</
html
>
2）使用object
使用<object>标签可以定义一个嵌入对象，主要用于在网页中插入多媒体信息，如图像、音频、视频、Java applets、ActiveX、PDF和Flash。<object>标签包含大量属性，用属性（值）表示如data（URL）、form(form_id)、height（px）、width（px）、name（unique_name）、type（MIME_type）、usemap（URL）。
可以使用<object>标签在页面中嵌入图片。示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
10
<
object
width
="100%"
11
type
="image/jpeg"
data
="images/1.jpg"
>
12
</
object
>
13
14
</
body
>
15
</
html
>
可以使用<object>标签在页面中嵌入网页。示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
<
style
type
="text/css"
>
7
html, body
{
8
height
:
100%
;
9
}
10
</
style
>
11
</
head
>
12
13
<
body
>
14
15
<
object
type
="text/html"
height
="100%"
width
="100%"
data
="https://www.baidu.com/"
></
object
>
16
17
</
body
>
18
</
html
>
可以使用<object>标签在页面中嵌入音频。示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
10
<
object
width
="100%"
classid
="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
>
11
<
param
name
="AutoStart"
value
="1"
/>
12
<
param
name
="FileName"
value
="images/bg.mp3"
/>
13
</
object
>
14
15
</
body
>
16
</
html
>
也可以使用<object>在页面中嵌入视频。示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
<
object
classid
="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width
="980"
height
="750"
id
="FlashID"
accesskey
="h"
tabindex
="1"
title
="网站首页"
>
10
<
param
name
="movie"
value
="flash/index.swf"
>
11
<
param
name
="quality"
value
="high"
>
12
<
param
name
="wmode"
value
="opaque"
>
13
<!--
此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。
-->
14
<
param
name
="swfversion"
value
="9.0.115.0"
>
15
<!--
下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。
-->
16
<!--
[if !IE]>
-->
17
<
object
type
="application/x-shockwave-flash"
data
="flash/index.swf"
width
="980"
height
="750"
>
18
<!--
<![endif]
-->
19
<
param
name
="quality"
value
="high"
>
20
<
param
name
="wmode"
value
="opaque"
>
21
<
param
name
="swfversion"
value
="9.0.115.0"
>
22
<
param
name
="expressinstall"
value
="Scripts/expressInstall.swf"
>
23
<!--
浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。
-->
24
<
div
>
25
<
h4
>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>26<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" width="112" height="33"/></a></p>27</div>28<!--[if !IE]>-->29</object>30<!--<![endif]-->31</object>3233</body>34</html>
3）使用audio
HTML5新增的<audio>标签可以播放声音文件或音频流，支持OggVorbis、MP3、WAV等音频格式。使用示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
<
audio
controls
="controls"
>
10
<
source
src
="medias/test.ogg"
type
="audio/ogg"
>
11
<
source
src
="medias/test.mp3"
type
="audio/mpeg"
>
12
您的浏览器不支持audio标签。
13
</
audio
>
14
</
body
>
15
</
html
>
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
<
audio
autoplay loop
>
10
<
source
src
="medias/test.ogg"
type
="audio/ogg"
>
11
<
source
src
="medias/test.mp3"
type
="audio/mpeg"
>
12
您的浏览器不支持audio标签。
13
</
audio
>
14
</
body
>
15
</
html
>
4）使用video
HTML5新增<video>标签可以播放视频文件或视频流，支持Ogg、MPEG4、WebM等视频格式。使用示例：
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
<
video
controls
>
10
<
source
src
="medias/trailer.ogg"
type
="video/ogg"
>
11
<
source
src
="medias/trailer.mp4"
type
="video/mp4"
>
12
您的浏览器不支持video标签。
13
</
video
>
14
</
body
>
15
</
html
>
1
<!
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="utf-8"
>
5
<
title
></
title
>
6
</
head
>
7
8
<
body
>
9
<
video
id
="movies"
onmouseover
="this.play()"
onmouseout
="this.pause()"
autobuffer
="true"
10
width
="400px"
height
="300px"
>
11
<
source
src
="medias/trailer.ogv"
type
=‘video/ogg;
codecs
="theora, vorbis"
‘
>
12
<
source
src
="medias/trailer.mp4"
type
=‘video/mp4‘
>
13
</
video
>
14
</
body
>
15
</
html
>
<video>标签支持的属性中src属性用于指定要播放的视频文件，controls属性用于提供播放、暂停和音量控件，autoplay属性设置视频就绪后自动播放，width、height属性分别用于设置视频播放器的宽和高，loop设置视频循环播放。以上是常用的一些属性，还有一些属性请自行到W3C官网的HTML5教程部分去查看。
3.4 项目实战
1）设计MP3播放器
设计一个网页音乐播放器。原理：获取要播放的音频文件路径，然后传给audio元素的src属性，再调用HTML5多媒体API中相关属性、方法或事件，通过各种逻辑设计来控制音频播放、暂停状态和音量大小。
设计步骤：
第1步：设计播放器页面主体结构：（1）顶部：分布多个播放控制按钮；（2）中部：音乐列表；（3）底部：播放模式切换控制按钮。
第2步：在界面中插入一个<audio id="musicbox">标签，在main.css样式表中隐藏音频控件。
第3步：在脚本文件player.js中设计各种播放控制逻辑。如单击播放按钮时，让<audio id="musicbox">播放指定音频文件。
设计的HTML5文件源代码如下：
1
<!
DOCTYPE html
>
2
<
html
dir
="ltr"
lang
="zh-CN"
>
3
<
head
>
4
<
title
>HTML5 音乐播放器</title> 5<link href="css/main.css" rel="stylesheet" type="text/css"media=""/> 6<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> 7<script src="js/player.js" type="text/javascript"></script> 8<meta name="viewport" content="width=device-width, initial-scale=1"> 9</head>10<body>11<div id="player">12<audio id="musicbox"></audio>13<div id="controls" class="clearfix controls">14<div id="play" class="playing"></div>15<div id="next"></div>16<div id="progress">17<div></div>18<p id="time">00:00 / 00:00</p>19</div>20<div id="volume">21<div></div>22</div>23</div>24<div class="bar">25<button>重置列表</button>26<button>随机打乱</button>27<button>清空列表</button>28</div>29<ul id="musiclist">30</ul>31<div class="bar bottom"><span>播放模式：</span><span id="mode">全部</span></div>32</div>33</body>34</html>
注意*：不放完整可运行源代码仅仅因为本人有点懒，如需要可以留言找我，我会直接私发，在此保证免费！
2）设计视频播放器
用HTML5提供的video元素以及HTML5提供的多媒体API的扩展设计一个视频播放器。使用JavaScript控制播放控件的行为，如视频加载、播放、暂停、总时长和当前播放时长显示、全屏显示等。
设计步骤：
第1步：设计播放控件。
第2步：设计视频加载loading效果。
第3步：设计播放功能。在JavaScript脚本中，先获取要用到的DOM元素，当视频就绪时，显示视频。
第4步：设计播放、暂停按钮。点击播放后，显示暂停图标，在两者间进行切换。
第5步：获取并显示总时长和当前播放时长。
第6步：设计播放进度条。
第7步：设计全屏显示。
设计的HTML5源代码如下：
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
lang
="en"
>
4
<
meta
charset
="UTF-8"
>
5
<
title
></
title
>
6
<
link
rel
="stylesheet"
href
="css/font-awesome.css"
>
7
<
link
rel
="stylesheet"
href
="css/player.css"
>
8
</
head
>
9
<
body
>
10
<
figure
>
11
<
figcaption
>视频播放器</figcaption> 12<div class="player"> 13<video id="myVideo" src="video/trailer.mp4"></video> 14<div class="controls"> 15<!-- 播放/暂停 --> 16<a href="javascript:;" class="switch fa fa-play"></a> 17<!-- 全屏 --> 18<a href="javascript:;" class="expand fa fa-expand"></a> 19<!-- 进度条 --> 20<div class="progress"> 21<div class="loaded"></div> 22<div class="line"></div> 23<div class="bar"></div> 24</div> 25<!-- 时间 --> 26<div class="timer"><span class="current">00:00:00</span> / <span class="total">00:00:00</span></div> 27<!-- 声音 --> 28</div> 29</div> 30</figure> 31<script type="text/javascript"> 32var video = document.querySelector("video");
33var isPlay = document.querySelector(".switch");
34var expand = document.querySelector(".expand");
35var progress = document.querySelector(".progress");
36var loaded = document.querySelector(".progress > .loaded");
37var currPlayTime = document.querySelector(".timer > .current");
38var totalTime = document.querySelector(".timer > .total");
39 40//当视频可播放的时候 41video.oncanplay =function(){
42//显示视频 43this.style.display ="block";
44//显示视频总时长 45 totalTime.innerHTML = getFormatTime(this.duration);
46};
47 48//播放按钮控制 49isPlay.onclick =function(){
50if(video.paused) {
51 video.play();
52 } else {
53 video.pause();
54 }
55this.classList.toggle("fa-pause");
56};
57 58//全屏 59expand.onclick =function(){
60 video.webkitRequestFullScreen();
61};
62 63//播放进度 64video.ontimeupdate =function(){
65var currTime =this.currentTime, //当前播放时间 66 duration =this.duration; // 视频总时长 67//百分比 68var pre = currTime / duration *100+"%";
69//显示进度条 70 loaded.style.width = pre;
71 72//显示当前播放进度时间 73 currPlayTime.innerHTML = getFormatTime(currTime);
74};
75 76//跳跃播放 77progress.onclick =function(e){
78var event = e || window.event;
79 video.currentTime = (event.offsetX /this.offsetWidth) * video.duration;
80};
81//全屏 82expand.onclick =function(){ video.webkitRequestFullScreen(); };
83 84//播放完毕还原设置 85video.onended =function(){
86var that =this;
87//切换播放按钮状态 88 isPlay.classList.remove("fa-pause");
89 isPlay.classList.add("fa-play");
90//进度条为0 91 loaded.style.width =0;
92//还原当前播放时间 93 currPlayTime.innerHTML = getFormatTime();
94//视频恢复到播放开始状态 95 that.currentTime =0;
96};
97 98function getFormatTime(time) {
99var time = time ||0;
100101var h = parseInt(time/3600),102 m = parseInt(time%3600/60),103 s = parseInt(time%60);
104 h = h <10?"0"+h : h;
105 m = m <10?"0"+m : m;
106 s = s <10?"0"+s : s;
107108return h+":"+m+":"+s;
109}
110</script>111</body>112</html>
注意*：不放完整可运行源代码仅仅因为本人有点懒，如需要可以留言找我，我会直接私发，在此保证免费！
总结：以上内容是个人根据一些HTML5教程总结的，关于HTML5图像和多媒体这一部分内容，本人学习得比较浅，其中遗漏内容请自行到W3C官网去看HTML5对应的这一部分内容。
原文：https://www.cnblogs.com/tft191009/p/11890640.html
内容总结
以上是互联网集市为您收集整理的前端：HTML5学习之路（三）全部内容，希望文章能够帮你解决前端：HTML5学习之路（三）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。