1.互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

2.插入音乐 <audio> 标签

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

(1)基本使用

<!-- 添加controls属性才会显示控制面板，默认不会显示 -->

<audio controls>

    <source src="./mp3/卡农慢摇版.mp3"></source>

</audio>

如图（每个浏览器效果都不一样）

(2)设置自动播放和播放次数

autoplay：如果出现该属性，则音频在就绪后马上播放。

loop：如果出现该属性，则每当音频结束时重新开始播放。

注意：Chrome在2018年10月份更新后关闭了audio、video媒体autoplay自动播放，新版的火狐也不支持。据说只是不支持mp3格式的自动播放，但是能够支持ogg格式的音频自动播放

<audio controls autoplay loop>

    <source src="./mp3/卡农慢摇版.mp3"></source>

</audio>

(3)其他属性：

preload：auto|metadata|none 规定是否在页面加载后载入音频

muted：如果出现该属性，则音频输出为静音。

3.插入视频 <video> 标签

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

常用属性有：

controls：显示控制面板，默认不会显示

autoplay：如果出现该属性，则视频在就绪后马上播放。

loop：如果出现该属性，则当媒介文件完成播放后再次开始播放

width：宽度，默认为原媒体文件的宽度

height：高度，默认为原媒体文件的高度

poster：封面图片 默认为视频的第一帧

muted：如果出现该属性，视频的音频输出为静音。

reload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

<video controls>

    <source src="./source/最终幻想神罗三巨头乱斗.mp4"></source>

</video>

4.<source> 标签

该标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源，允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

source标签只能二选一

注释：IE 8 或更早版本的 IE 浏览器都不支持\ <source> 标签。

常用属性：

src：规定媒体资源的地址

type：规定媒体资源的 MIME 类型

<audio controls autoplay loop>

    <source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>

    <source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>

    您的浏览器不支持 audio 元素。

</audio>

5.切换媒体文件

可以操作audio或者video的src属性来切换要播放的文件

<body>

    <audio controls autoplay loop>

        <source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>

        <source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>

        您的浏览器不支持 audio 元素。

    </audio>

</body>

<script>

    var audio = document.getElementsByTagName("audio")[0]

    // 8秒钟后会切换到另一首歌

    setTimeout(function(){

        audio.src="./source/再见警察.mp3"

        console.log(audio.src)

    },8000)

</script>

6.自定义视频播放器

原生的播放控制面板在不同浏览器下的样式都不一样，所以一般使用的都是自定义的视频播放器。自定义视频播放器依然使用video标签，并隐藏原生的播放控制面板，使用自定义的控制面板，通过事件监听调用相关的API来操作视频的播放。

例如使用js来监听上一曲/下一曲，音量控制，进度条拖放控制等等。

注意：因为最新的浏览器已经屏蔽自动播放，而且直接调用js代码控制播放也是无效的，必须设置点击监听，在回调中才能控制播放

常用方法：

load() 加载视频

play() 播放视频

pause() 暂停视频

常用属性：

paused 视频是否是暂停状态

duration 视频长度（以秒计）

currentTime 可获取视频当前进度，也可以通过它控制播放进度（以秒计）

volume：音量（0到1，0就是静音，1就是100%）

src: 设置或返回音频/视频元素的当前来源

常用事件

oncanplay 用户可以开始播放视频时触发

ontimeupdate 播放进度更新时触发

onended 播放完毕时触发

onpause 当音频/视频已暂停时触发。

onplay 当音频/视频开始播放时触发。

HTML 音频/视频 DOM 参考手册

https://www.runoob.com/tags/ref-av-dom.html

HTML5 多媒体的更多相关文章

  1. Html5多媒体相关的API---video

    Html5多媒体相关的API---video 在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的 ...

  2. HTML5 多媒体音视频处理

    HTML5 多媒体音视频处理 版权声明:未经博主授权,内容严禁转载 ! 音频处理 - audio HTML5 Audio 音频 目前大多数音频是通过哦插件的形式来播放的. 不同浏览器在网页上播放音频的 ...

  3. 三天学会HTML5 ——多媒体元素的使用

    目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...

  4. HTML5 多媒体标签

    一.多媒体 embed 标签 embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等.url为音频或视频文件及其路径,可以是相对路径或绝对路径. 语法格式: < ...

  5. html5多媒体Video/Audio

    video:    1.常见的视频格式 视频的组成部分:画面.音频.编码格式 视频编码:H.264.theora.VP8(google开源)      2.常见的音频格式     编码:AAC.MP3 ...

  6. css总结16:HTML5 多媒体音频(Audio)视频(video )

    1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

  7. html5——多媒体（四）

    全屏兼容 box.requestFullscreen(); box.webkitRequestFullScreen(); box.mozRequestFullScreen(); <!DOCTYP ...

  8. html5——多媒体（三）

    自定义进度条 1.video标签是内联块,可以设置宽高,但是需要用大盒子将其包裹起来进行定位 2.小盒子设计成进度条样式,并进行定位 3.进度条样式中的特殊按钮可以用web字体 4.通过点击实现视频的 ...

  9. html5——多媒体（二）

    基本方法 load() //重新加载视频 play() //播放 pause() //暂停 基本属性 currentTime //视频播放的当前进度. duration //视频的总时间 paused ...

  10. html5——多媒体（一）

    <audio> 1.autoplay 自动播放 2.controls 是否显不默认播放控件 3.loop 循环播放 4.preload 预加载 同时设置autoplay时些属性失效 5.由 ...

随机推荐

  1. k8s 操作命令(合集List)

    k8s 操作命令 合集List 一.K8S最常用命令如下: 1.获取pod信息:kubectl get pod 2.查看指定pod的日志信息:kubectl logs -f --tail(最后多少行) ...

  2. JSON——简介

    JSON--简介    JSON--基础语法    JSON--json数据与java对象的转换       // 将java对象转为json字符串 User user = new User(1,&q ...

  3. 解锁Java线程池：实战技巧与陷阱规避

    专业在线打字练习网站-巧手打字通,只输出有价值的知识. 一 前言 线程池作为初学者常感困惑的一个领域,本次"巧手打字通课堂"将深入剖析其中几个最为普遍的误区.为了更清晰地阐述这些知 ...

  4. SpringBoot注解大全（详细）

    1. @ActiveProfiles 用来声明活动的profile–@ActiveProfiles("prod"(这个prod定义在配置类中)) @RunWith(SpringRu ...

  5. HEOI2024 题目转存

    赛时测试数据下载 wind xor wormhole maze timeline sleep 题解参考 [省选联考 2024] 季风 题目背景 生活在二维平面的小 X 准备拜访小 Y,但由于气候的变化 ...

  6. 云原生的 WebAssembly 能取代 Docker 吗？

    WebAssembly 是一个可移植.体积小.加载快并且兼容 Web 的全新格式.由于 WebAssembly 具有很高的安全性,可移植性,效率和轻量级功能,因此它是应用程序安全沙箱方案的理想选择.现 ...

  7. nginx配置tomcat的反向代理记录

    tomcat环境安装 (1)在 liunx 系统安装 tomcat,使用默认端口 8080 * tomcat 安装文件放到 liunx 系统中,解压, tar -xzvf tomcat.xxx * 进 ...

  8. 使用MySQL Workbench进行数据库备份

    1.打开MySQL Workbench 2.进行数据库连接配置 如果之前连过,会有历史记录,直接点击需要备份的连接即可 3.进入主界面后,选择左侧的Administration选项卡,然后点击Data ...

  9. Dbeaver24.2.2安装和使用教程（免费的数据库管理工具）

    前言 DBeaver是免费和开源(GPL)为开发人员和数据库管理员通用数据库工具. DBeaver 通过 JDBC 连接到数据库,可以支持几乎所有的数据库产品,包括:MySQL.PostgreSQL. ...

  10. 强化学习算法——TPG算法（遗传编程GP算法）代码

    tpg算法是一个使用模块涌现和复用机制的遗传编程(GP)算法,该算法在一些强化学习问题上有着不错的表现,本文给出该算法的项目地址. tpg算法的C++实现代码大概有1万的逻辑代码,如果这个比例换做使用 ...