详解HTML5新增的多媒体标签-H5教程-PHP中文网

首页

web前端

H5教程

详解HTML5新增的多媒体标签

藏色散人

Aug 05, 2022 pm 04:10 PM

多媒体标签

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

HTML5新增的多媒体标签

一：视频<video>

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

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从Firefox21版本开始Linux系统从Firefox 30开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从Opera25版本开始	YES	YES

<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>——常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	播放器高度
loop	loop	循环播放
src	url	视频url地址
poster	imageurl	加载等待的话面图片
muted	muted	静音播放

二：音频<audio>

浏览器	MP3	Wav	Ogg
IE 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

<!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>

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

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	向用户显示播放控件
loop	loop	循环播放
src	url	视频url地址
muted	muted	静音播放

多媒体标签总结

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签加muted属性来静音播放视频，音频不可以（可以通过JavaScript来解决）
视频标签是重点，我们经常设置自动播放，不适用conrols控件，循环和设置大小属性

【相关推荐：css视频教程】

以上是详解HTML5新增的多媒体标签的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Laravel 教程

1602

PHP教程

1504

276

显示更多

Related knowledge

将CSS和JavaScript与HTML5结构有效整合。 Jul 12, 2025 am 03:01 AM

HTML5、CSS和JavaScript应通过语义化标签、合理加载顺序与解耦设计高效结合。1.使用HTML5语义化标签如、提升结构清晰度与可维护性，利于SEO和无障碍访问；2.CSS应置于中，使用外部文件并按模块拆分，避免内联样式与延迟加载问题；3.JavaScript推荐放在前引入，使用defer或async异步加载以避免阻塞渲染；4.减少三者间强依赖，通过data-*属性驱动行为、类名控制状态，统一命名规范提升协作效率。这些方法能有效优化页面性能与团队协作。

HTML5视频不在Chrome中播放 Jul 10, 2025 am 11:20 AM

HTML5视频在Chrome中不播放的常见原因包括格式兼容性、自动播放策略、路径或MIME类型错误以及浏览器扩展干扰。1.视频应优先使用MP4（H.264）格式，或提供多个标签适配不同浏览器；2.自动播放需添加muted属性或通过用户交互后用JavaScript触发.play()；3.检查文件路径是否正确，并确保服务器配置了正确的MIME类型，本地测试建议使用开发服务器；4.广告拦截插件或隐私模式可能阻止加载，可尝试禁用插件、更换无痕窗口或更新浏览器版本以解决。

解释html5` vs` '元素。 Jul 12, 2025 am 03:09 AM

是块级元素，适合布局；是内联元素，适合包裹文字内容。1.独占一行，可设置宽高和边距，常用于结构布局；2.不换行，大小由内容决定，适用于局部文本样式或动态操作；3.选择时应根据内容是否需独立空间判断；4.不可嵌套在内，不适合做布局；5.优先使用语义化标签以提升结构清晰度与可访问性。

HTML5视频流技术和注意事项 Jul 14, 2025 am 02:41 AM

要让HTML5视频流畅播放需注意三点：1.选择合适视频格式，如MP4、WebM或Ogg，并根据目标用户选择提供多个格式或单一格式；2.使用自适应码率技术如HLS或DASH，结合hls.js或dash.js实现清晰度自动切换；3.合理设置预加载策略与服务器配置，如preload属性、字节范围请求、压缩和缓存，以优化加载速度并减少流量消耗。

HTML5表单中有哪些新输入类型？ Jul 12, 2025 am 03:07 AM

HTML5introducednewinputtypesthatenhanceformfunctionalityanduserexperiencebyimprovingvalidation,UI,andmobilekeyboardlayouts.1.emailvalidatesemailaddressesandsupportsmultipleentries.2.urlchecksforvalidwebaddressesandtriggersURL-optimizedkeyboards.3.num

使用HTML5画布和游戏API开发网络游戏 Jul 14, 2025 am 03:08 AM

HTML5Canvas是一个用于在网页上绘制图形和动画的API，结合GameAPIs可实现功能丰富的网页游戏。1.设置元素并获取2D上下文；2.使用JavaScript绘制对象并实现动画循环；3.处理用户输入控制游戏；4.结合Gamepad、WebAudio、PointerLock和Fullscreen等API提升交互体验；5.优化性能并管理资源加载以确保流畅运行。

如何使用HTML5地理位置API访问用户的当前位置？ Jul 13, 2025 am 02:23 AM

要获取用户当前位置，可使用HTML5的GeolocationAPI。该API在用户授权后提供经纬度等信息，核心方法是getCurrentPosition()，需处理成功与错误回调；同时要注意HTTPS前提、用户授权机制及错误码处理。①调用getCurrentPosition获取一次位置，失败则触发错误回调；②用户必须授权，否则无法获取，且可能不再提示；③错误处理应区分拒绝、超时、位置不可用等情况；④启用高精度、设置超时时间等可通过第三个参数配置；⑤线上环境必须使用HTTPS，否则可能被浏览器限制