详解HTML5新增的多媒体标签

于 2022-08-09 11:01:00 发布
阅读量381 收藏 1
点赞数
分类专栏： 技术文章 文章标签： 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45809825/article/details/126243515
版权

本篇文章给大家介绍HTML常用的多媒体标签及HTML5新增的多媒体标签，希望对需要的朋友有帮助！

HTML5新增的多媒体标签

一：视频<video>

当前<video>元素支持三种视频格式：尽量使用MP4格式

浏览器MP4WebMOgg
IEYESNONO
ChromeYESYESYES
FirefoxYES 从Firefox21版本开始Linux系统从Firefox 30开始YESYES
SafariYESNONO
OperaYES 从Opera25版本开始YESYES

1

2

3

4

<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">

    <source src="medio/mov_bbb.mp4">

    <source src="medio/mov_bbb.ogg">

    您的浏览器暂不支持<video>标签播放视频</video>

视频<video>——常见属性

属性值描述
autoplayautoplay视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题）
controlscontrols向用户显示播放控件
widthpixels（像素）设置播放器宽度
heightpixels（像素）播放器高度
looploop循环播放
srcurl视频url地址
posterimageurl加载等待的话面图片
mutedmuted静音播放

二：音频<audio>

浏览器MP3WavOgg
IE 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+YESYESYES
Safari 5+YESYESNO
Opera 10+YESYESYES

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>HTML5音频标签</title></head><body>

   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">

   <source src="medio/music.mp3" type="audio/mpeg">

   您的浏览器不支持audio元素</audio>

   </body>

   </html>

谷歌浏览器把音频和视频自动播放禁止了

属性值描述
autoplayautoplay自动播放
controlscontrols向用户显示播放控件
looploop循环播放
srcurl视频url地址
mutedmuted静音播放

多媒体标签总结

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签加muted属性来静音播放视频，音频不可以（可以通过JavaScript来解决）
  • 视频标签是重点，我们经常设置自动播放，不适用conrols控件，循环和设置大小属性
形影相吊.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详解HTML5新增标签
12-13
HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。 HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似和 标签，但有一定含义，例如 （网站导航块）和 。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用
HTML5新增元素及属性
sl105105的博客
05-20 342
我们来了解一下什么HTML5的新增元素与属性 我们之前使用的THTML是老版本，浏览器也是IE,版本老有些新增的元素及属性就打不开. 我们可 以学习一下新的元素 新的语义化标签，比如 header（头部标签）、footer(底部标签)、nav（导航） 新的表单控件，比如 email、url、search 用于绘画的 canvas 元素 用于媒介回放的 video（视频）和 audio（音频）元素 可以帮助我们更有利于搜索引擎的抓取和语义化 如图： vi...
【html5新增多媒体标签】
m0_61478092的博客
04-08 507
html5新增多媒体标签 html5在不使用插件的情况下，也可以原生的支持音频格式文件的播放： 一、video标签 作用：播放视频 格式一： <video src=" " autoplay="autoplay"controls="controls"poster=""> <video> video标签属性： autoplay：视频就绪是否自动播放 controls：是否需要显示控制条 width ：设置播放器宽度 height：设置播放器高度，高度或宽度只推荐其中一种，否则容易变形
H5多媒体标签
ayhg1的博客
06-04 364
H5多媒体标签 在 HTML5 之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是 Flash 。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 和 元素。下面对这两个标签分别讲解。 audio标签（音频播放） 本标签主要在页面中加载音频，进行播放，但是播放格式是有限制的。如下表：
06HTML基础--多媒体标签
weixin_33670786的博客
09-29 208
video标签 作用: 播放视频 格式1: <video src=""> </video> video标签的属性 src: 告诉video标签需要播放的视频地址 autoplay: 告诉video标签是否需要自动播放视频 controls: 告诉video标...
HTML5 新增的多媒体标签
枯寂家博客
03-08 228
新增的多媒体标签主要包含两个: > 音频: <audio> > 视频: <video> 1. 视频<video> 当前<video> 元素支持三种视频格式: mp4,WebM,Ogg 尽量使用mp4格式(因为几乎所有浏览器都兼容). 1.1视频的语法格式: <video src="文件地址" controls="c...
HTML5新增特性——新的多媒体标签
weixin_47481102的博客
06-15 397
新增的多媒体标签主要包含两个：使用他们可以很方便的在页面中嵌入音频和视频，而不是去使用flash和其他浏览器插件。HTML5在不适用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。当前元素支持三种视频格式：尽量使用MP4格式YES从Firefox21版本开始Linux系统从Firefox30开始YES从Opera25版开始语法：preload（预加载）auto（预先加载视频）none（不应加载视频） 2.音频 当前元素支持三种音频...
HTML5不支持标签和新增标签详解
09-27
下面小编就为大家带来一篇HTML5不支持标签和新增标签详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Html5新增元素详解.pptx
11-15
Html5新增元素详解.pptx
html5新增多媒体标签
weixin_52255310的博客
01-31 374
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、html5视频标签二、html5音频标签总结 前言 为增加网页的吸引力学习html5中新增加的两个多媒体标签，分别为视频标签< video >和音频标签< audio > 一、html5视频标签 视频< video >语法 <video src='文件地址' controls='controls'></video> <video controls=
HTML5——HTML5多媒体标签
流楚丶格念的博客
07-15 4845
多媒体标签 embed：标签定义嵌入的内容 audio：播放音频 video：播放视频 多媒体 embed（会使用） embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。 因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。 <embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIw
HTML5新特性-多媒体标签
qq_38435906的博客
10-09 822
1.&lt;video&gt;标签：定义视频，比如电影片段或其他视频流。属性值如下： 2.&lt;audio&gt;标签：定义音频。当前，audio 元素支持三种音频格式： 属性值如下：  注意事项： &lt;audio&gt; 与 &lt;/audio&gt; 之间插入的内容是供不支持 audio 元素的浏览器显示的。 audio 元素允许多个 source 元素。sour...
HTML5新增多媒体标签
qq_43430343的博客
03-31 478
音频标签 视频标签 音频标签 < audio>音频标签常见属性 属性 值 描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上插放。 controls controls 如果出现该属性，则向用户显示控件,比如播放按钮。 loop loop 如果出现该属性，则每当音频秸柬时重新开始播放。 src url 要播放的音频的URL. ...
html5多媒体的标签
yibashou的博客
08-08 315
1、 多媒体         1.音频播放：audio标签的使用: 属性： autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop ...
HTML5 新增语义化标签、多媒体标签
qq_46405281的博客
07-29 156
新增语义化标签、音频标签、视频标签
【HTML5】多媒体标签
一个前端攻城狮的成长之路
03-21 145
【HTML5】多媒体标签 HTML5中新增的多媒体标签主要包括音频（audio）标签和视频（video）标签 音频标签： HTML5在不使用插件的情况下可支持有限数量的原生音频格式文件播放，具体支持情况如下表格： 格式： <audio src = "文件地址" controls="controls" ></audio> 常见属性： 视频标签： 格式： <vedio src = "文件地址" controls="controls" ></vedio>
html5的多媒体标签
baiqiangdoudou的博客
08-18 345
html ☞ 视频 属性：controls 显示控制栏 属性：autoplay 自动播放 属性：loop 设置循环播放 ☞ 音频 属性：controls 显示控制栏 属性：autoplay 自动播放 属性：loop 设置循环播放 ☞ video标签支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp ☞ 多媒体标签在各浏...
3. HTML5媒体标签
m0_37886286的博客
10-29 571
三类多媒体标签： &amp;lt;video&amp;gt;&amp;lt;/video&amp;gt; &amp;lt;!--标签定义一个视频--&amp;gt; &amp;lt;audio&amp;gt;&amp;lt;/audio&amp;gt; &amp;lt;!--标签定义一个音频--&amp;gt; &amp;lt;source&amp;gt;&amp;lt;/source
(学习笔记 Day1) html5新增的多媒体标签
BiuBiuBlu的博客
11-30 521
1.audio标签 因为不同浏览器支持不同格式，我们采取的解决方案是为音频准备多个格式如： <audio controls="controls"> <source src="happy.mp3" type="happy"> <source src="happy.ogg" type="happy"> 常用属性： autoplay：属性值为autoplay 作用是让音频自动播放（火狐及谷歌默认禁用自动播放的属性） control...
html5 canvas 开发详解 pdf
最新发布
07-14
HTML5 Canvas开发详解PDF是一本讲解HTML5 Canvas技术的开发手册，该书内容丰富，涵盖了HTML5 Canvas的方方面面。 首先，该书会介绍HTML5 Canvas的基本概念和原理。HTML5 Canvas是一个用于绘制图形的HTML元素，它...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

形影相吊.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值