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

1. 背景

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

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

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

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

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

2. audio音频

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

<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基本一样:

<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播放音视频成为了一种很简单的事情。

相关推荐

  1. HTML5 基础总结

    2024-04-27 07:36:01       68 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-27 07:36:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-27 07:36:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-27 07:36:01       82 阅读
  4. Python语言-面向对象

    2024-04-27 07:36:01       91 阅读

热门阅读

  1. Spark 为什么比 Hive 快

    2024-04-27 07:36:01       36 阅读
  2. C#面:ASP.NET 与 ASP 相比,主要有哪些进步

    2024-04-27 07:36:01       37 阅读
  3. 怎么理解Fiber,Fiber解决了什么问题

    2024-04-27 07:36:01       34 阅读
  4. 【2024.04.27_晴】

    2024-04-27 07:36:01       31 阅读
  5. R语言 数据框的长、宽格式转换

    2024-04-27 07:36:01       82 阅读
  6. 应用回归分析,R语音,逐步回归法,第5章

    2024-04-27 07:36:01       87 阅读
  7. 从npm到yarn,再到pnpm

    2024-04-27 07:36:01       36 阅读
  8. docker部署前端项目(四)

    2024-04-27 07:36:01       32 阅读
  9. NPM简介

    2024-04-27 07:36:01       33 阅读
  10. Mac运行npm run serve报错opensslErrorStack

    2024-04-27 07:36:01       32 阅读
  11. B站秒杀项目学习心得

    2024-04-27 07:36:01       36 阅读