零基础HTML教程(31)--HTML5多媒体

文章目录

  • [1. 背景](#1. 背景)
  • [2. audio音频](#2. audio音频)
  • [3. video视频](#3. video视频)
  • [4. audio与video常用属性](#4. audio与video常用属性)
  • [5. 小结](#5. 小结)

1. 背景

在H5之前,我们要在网页上播放音频、视频,需要借助第三方插件。

这些插件里面最火的就是Flash了,使用它有几个问题:

  • 首先要单独安装Flash,操作比较繁琐。
  • 其次Flash是一个独立软件,而且是一个商业公司的软件,那我们不得不考虑它的安全性问题。
  • 最后Flash只支持电脑,手机端你们就自求多福了。

随着时代的发展,这种方法显然跟不上潮流了。

所以到了H5时代,HTML原生就支持音频、视频等多媒体。

2. audio音频

可以使用audio元素来播放音频文件,写法:

html 复制代码
<audio controls>
  <source src="hello.ogg" type="audio/ogg">
  <source src="hello.mp3" type="audio/mpeg">
  您的浏览器不支持播放音频
</audio>

controls表示显示播放控件,就是播放按钮啥的,效果如下:

上述代码,浏览器如果支持ogg音频文件,则会播放hello.ogg。

如果ogg不支持的话,就继续看是否支持mp3音频文件,支持则播放。

如果mp3也不支持,则会显示"您的浏览器不支持播放音频"。

建议尽量多放几种格式的音频文件,因为不同浏览器对音频文件的支持不同。

3. video视频

video用法跟audio基本一样:

html 复制代码
<video controls>
  <source src="hello.mp4" type="hello/mp4" />
  <source src="hello.ogg" type="video/ogg" />
  您的浏览器不支持播放视频
</video>

浏览器也是先尝试播放hello.mp4,然后尝试播放hello.ogg,如果都不行则显示文字。

效果如下:

4. audio与video常用属性

autoplay属性如果存在,则打开网页会自动播放。

controls属性如果存在,则显示控制按钮,如播放键。

loop属性如果存在,则循环播放。

5. 小结

有了H5播放音视频成为了一种很简单的事情。

相关推荐
153578738982 小时前
MS7127 高性能立体音频ADC
视频·半导体
java水泥工5 小时前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
CoderYanger10 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio10 小时前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking1111 小时前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI11 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI11 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
JAVA学习通11 小时前
开源 | MeiGen-MultiTalk:基于单张照片实现多人互动演绎
大数据·音视频·视频
月光技术杂谈12 小时前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
我有一棵树13 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex