当前位置:首页 > 前端技术 > HTML基础之 HTML5新增视频和音频标签

HTML基础之 HTML5新增视频和音频标签

2022年09月16日 11:13:02前端技术4

HTML5 新增多媒体标签主要包含两个:

  • 音频:audio
  • 视频:video

使用它们可以很方便在页面中嵌入音频和视频,而不再是去使用flash和其它浏览器插件。

视频: video

HTML5在不适用插件的情况,也可以原生的支持视频格式文件的播放,当然支持格是有限的。

在网页中如果看原网页的话,可以发现很多时候引入的视频文件有好几个格式,因为兼容问题,不同的浏览器支持不同的格式而已,目前只支持三个格式,MP4,WebM,Ogg。浏览器支持的格式:

浏览器 MP4 WebM Ogg
IE YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES YES YES

所以为了兼容性更好,一般都使用mp4格式。

具体格式:

<video src="文件地址" controls="controls"></video>

但是为了兼容有些浏览器不兼容,不支持video标签如下写:

<video width='320' height='240' controls>
<source src="文件地址" type="type/mp4">
    <source src="文件地址" type="type/ogg">
</video>

video的属性值:

autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。但是谷歌浏览器需要添加muted来解决自动播放问题。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload auto:预先加载视频。
none:不应加载视频
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

如果只是单独的引入资源,虽然引入但是没有播放效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"   > 2013赛博朋克2077广告 </video>
</body>
</html>

HTML基础之 HTML5新增视频和音频标签 _ JavaClub全栈架构师技术笔记

所以在引入数据的时候,就应该带有其它的属性。

演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"   autoplay="autoplay" muted="muted"> 2013赛博朋克2077广告 </video>
</body>
</html>

HTML基础之 HTML5新增视频和音频标签 _ JavaClub全栈架构师技术笔记

可以看出可以自动播放,但是没有进度条声音等控制的选项,这个就需要controls属性。虽然演示一下,但是一般不会主动写这个属性,因为其在不同的浏览器中比如播放按钮等会有不同的样式,所以一般为了让其样式统一,通过js进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted"> 2013赛博朋克2077广告 </video>
</body>
</html>

HTML基础之 HTML5新增视频和音频标签 _ JavaClub全栈架构师技术笔记

还有很多产品网页视频在不停的循环播放,那个就需要loop属性了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted" loop="loop"> 2013赛博朋克2077广告 </video>
</body>
</html>

还有一个属性,那就是网速不够好,加载视频需要时间,如果单独看一个加载界面很难,所以就需要一个等待图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
 <video src="video/2013.mp4"  controls="controls"  autoplay="autoplay" muted="muted" loop="loop" poster="文件地址"> 2013赛博朋克2077广告 </video>
</body>
</html>

音频 audio

音频也是支持三种格式:mp4,Wav,Ogg.

当然也有支持:

浏览器 MP3 Wav Ogg
IE YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

所以一般的时候音频文件都使用mp3.

格式:

<audio src="文件地址" controls="controls"></audio>

当然为了兼容低版本可以如下写:

<audio width='320' height='240' controls>
<source src="文件地址" type="type/mp3">
    <source src="文件地址" type="type/ogg">
</audio>

当然也有其属性:

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload auto:预先加载视频。
none:不应加载视频
如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
src url 要播放的音频的 URL。

因两者使用很类似,就不在演示了。

需要注意一下:

  • 谷歌浏览器把音频和视频的自动播放禁止了,所以视频需要添加muted属性。但是音频不能通过muted控制,需要js进行控制。
  • 一般网页中视频经常设置为自动播放,所以不适用controls,当然如果有需要也是通过js来实现,毕竟为了显示的ui统一。

作者:小猪弟
来源链接:https://blog.csdn.net/u011863822/article/details/123575647

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/41808.html

标签: HTML
分享给朋友:

“HTML基础之 HTML5新增视频和音频标签” 的相关文章

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

HTML5 自动聚焦autofocus属性

原文:https://davidwalsh.name/autofocus 翻译:http://blog.csdn.net/renfufei/article/details/9797419   HTML5 推出了一大堆精彩的东西给我们。 过去我们要...

HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能,因为我们的项目采用的是HTML的Table方式实现的表格,所以符合javascript中的window.print,了解了下window.print()函数的使用方式。 window.print():用来打印window.documen...

v-html 解析并插入 html 标签

v-html 解析并插入 html 标签

1. 双大括号会将数据解释为普通文本,而非 HTML 代码。 <div id="app"> <p id="a">Using mustaches: { { rawHtml }}</p> <p >Using v-ht...

HTML 5 video 视频标签全属性详解

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面...

HTML-列表标签list与表格标签table

HTML-列表标签list与表格标签table

目录   列表标签 表格标签 列表标签      <ul>无序列表             ...

html的class怎么使用方法,HTML的class属性怎么用?使用方法详细总结!

html的class怎么使用方法,HTML的class属性怎么用?使用方法详细总结!

我们在开发网页时有一个属性经常被用到,那就是 class。这篇文章 w3cschool 小编来为大家介绍下 HTML 的 class 属性怎么用。学习 class 看这篇文章就够了。 class 属性怎么用? class 属性用来规定元素的类名,最常用在...

HTML5 video 视频标签使用介绍

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。 <video width="320" height="240" src="movie.ogg" controls="controls"> 这里是注释文字,如果无法...

HTML5相关标签及标签属性

1、新增语义化标签 <header></header> 头部 <nav></nav> 导航 <section></section> 章节、段落 <arti...

HTML meta 标签

!!<meta> 标签是 HTML 语言头部的一个辅助性标签,我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等!   属性 值 描述...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。