最新HTML5中的视频和音频讲解

第6章 HTML5中的视频和音频

H5新增video,audio,播放视频和音频,统称为多媒体元素。

6.1 多媒体元素基本属性

video用于电影文件和其他视频流的播放。

audio用于音乐文件和其他音频流的播放。

video的属性

  • src:文件路径,本地或者网络上。
  • autoplay:自动播放,一进页面就自动播放。
  • width和height:媒体元素大小,单位像素,若不设置则播放源文件大小,只设置1个值会等比例控制视频大小。
  • controls:设置为true时,视频底部有控制条工具,包括播放/暂停,进度条,音量开关大小和速度等功能。
  • poster:所选图片的URL,添加后播放前显示当前图片而不是视频第一帧,视频不可用时遮盖空白,美观。
  • networkState:返回视频文件网络状态,当浏览器读取文件时,将触发progress事件,获取不同各阶段的网络状态值,本属性为只读属性。
    • NETWORK_EMPTY,返回值 0,数据加载初始化
    • NETWORK_IDLE,返回值 1,文件加载成功,等待请求播放
    • NETWORK_LOADING,返回值 2,文件正在加载过程中
    • NETWORK_NO_SOURCE,返回值 3,加载出错,一般原因是没有找到支持的编码格式

audio的属性

  • src:文件路径,本地或者网络上。
  • autoplay:设置为true时,可以直接写属性也是一样的,自动播放,一进页面就自动播放。
  • controls:设置为true时,会出现控制组件,包括进度条,声音大小,静音,播放速度等功能。
1.功能描述

创建video和audio,并在元素的src属性中设置播放的视频和音频,页面加载后自动播放。

需提前准备视频和音频各一个。

2.代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用多媒体元素播放文件</title><script>function $$(id) {return document.getElementById(id);}function progress(e) {var intState = e.networkState;var strState = strByNum(intState);var newLi = document.createElement('li');newLi.textContent = strState;$$("ulVideo").appendChild(newLi)}/* - NETWORK_EMPTY,返回值 0,数据加载初始化- NETWORK_IDLE,返回值 1,文件加载成功,等待请求播放- NETWORK_LOADING,返回值 2,文件正在加载过程中- NETWORK_NO_SOURCE,返回值 3,加载出错,一般原因是没有找到支持的编码格式*/function strByNum(n) {switch (n) {case 0: return "数据加载初始化!";case 1: return "文件加载成功,等待请求播放!";case 2: return "文件正在加载过程中...";case 3: return "加载出错,一般原因是没有找到支持的编码格式!";}}function vdoerror(e) {var intState = e.error.code;var strState = strByErrorNum(intState);var newLi = document.createElement('li');newLi.textContent = strState;$$("ulError").appendChild(newLi)}/* - MEDIA_ERR_ABORTED,返回值 1,被中止- MEDIA_ERR_NETWORK,返回值 2,出现网络错误,获取资源出错- MEDIA_ERR_DECODE,返回值 3,媒体资源可用,解码出错- MEDIA_ERR_SRC_NOT_SUPPORTED,返回值 4,没找到可以播放的媒体文件格式*/function strByErrorNum(n) {switch (n) {case 1: return "被中止!";case 2: return "出现网络错误,获取资源出错!";case 3: return "返回值 3,媒体资源可用,解码出错!";case 4: return "没找到可以播放的媒体文件格式!";}}</script>
</head><body><!--./static/黑悟空.mp4 --><video id="vdo" src="./static/黑悟空.mp4" autoplay="true" poster="./img/moon.jpg" onprogress="progress(this)"onerror="vdoerror(this)" controls width="800px">您的浏览器不支持视频</video><ul id="ulVideo"><li>progress事件:</li></ul><ul id="ulError"><li>error事件:</li></ul><audio id="ado" src="./static/黄风起兮.mp3" controls="true"></audio>
</body></html>
3.页面效果

路径故意写错:

4.源码分析

用两个ul来记录调用progress和error的过程,通过switch来将code转化为对应的意思。

其他属性,了解为主

  • readyState:只读属性,返回当前播放文件的各种状态,属性返回值省略,有需要去查资料。
  • currentTime,startTime,duration:当前播放时间,开始播放时间,总体播放时间。
  • palyed,paused,ended:开始时间和结束时间,是否出于暂停,是否已结束。
  • defaultPlaybackRate,playbackRate:默认播放速率,当前播放速率。
  • volume,muted:播放音量0-1,是否静音。

6.2 多媒体元素常用方法

通过添加“controls”属性显示控制条工具栏。

也可以自定义播放按钮,调用多媒体元素播放文件时的方法。

  • load(),调用时进行文件的加载,将playbackRate设置为默认值,error设置为null。
  • canPlayType(type),检测当前浏览器是否支持媒体文件类型,type=空(不支持),maybe(可能支持),Probably(支持)

6.2 多媒体元素重要事件

除上述networkState和error对应的progress和error事件以外,还有如下事件:

  • playing(),媒体播放事件。
  • timeupdate(),播放位置发生变化,触发该事件。
  • durationchange(),播放总长度改变时触发。
  • volumechange(),改变或启动静音时触发。

其他的事件有需要查资料。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/417560.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搭建大模型知识库流程,以及基于langchain实现大模型知识库案例

“ RAG检索增强生成是为了解决大模型知识不足的问题 ” 大模型主要面临三个问题&#xff1a; 垂直领域内的知识不足‍‍‍‍‍ 大模型知识有时间限制‍ 大模型幻觉问题 第一个问题产生的原因是因为&#xff0c;没有经过垂直领域数据训练的大模型普遍表现不好&#xff1b;其…

2024年全国大学生数学建模比赛思路、题目、代码

竞赛时间及参赛建议 竞赛开始时间&#xff1a;北京时间2024年9月5日18:00 竞赛结束时间&#xff1a;北京时间2024年9月8日20:00 关于今年每道题的思路&#xff0c;可以关注我gzh回复”国赛A/B/C/D/E题“获取 需要帮助的可以关注公众号&#xff0c;在功能栏点击联系我们&…

java发送邮箱如何实现?如何配置Java发信?

java发送邮箱功能怎么集成&#xff1f;Java发送邮件的几种方式&#xff1f; 无论是用于用户注册验证、密码重置&#xff0c;还是营销邮件的发送&#xff0c;"Java发送邮箱"都是一个不可忽视的技术点。那么&#xff0c;如何在Java应用中实现邮件发送呢&#xff1f;Ao…

2025入局自动驾驶的秋招人,应该瞄准哪些技术方向?

2024年已过大半&#xff0c;9月随着开学季的来临&#xff0c;2025届的毕业生也纷纷踏出了秋招的第一步。 无论是在学生期间就深耕许久智驾技术、还是从其他赛道转战至智驾&#xff0c;自2023年末一直到今年上半年来&#xff0c;都一直国内智驾行业层出不穷的各种破圈动态刷屏。…

极市开发平台yolov8训练无人机数据集样例数据流程

先进入vscode&#xff0c;进入src_repo文件夹。 第一步&#xff0c;克隆一个比较好的博主的库&#xff1a; GitHub - Incalos/YOLO-Datasets-And-Training-Methods: This project involves making custom datasets for the YOLO series and model training methods for YOLO.…

基于Qt设计的人脸课堂考勤机系统(219)

文章目录 一、前言1.1 项目介绍【1】开发背景【2】项目实现的功能1.2 设计思路【1】系统架构设计【2】流程设计【3】关键技术实现【2】整体构架1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】摘要【5】项目背景1.4 开发工具的选择1.5 系统框架图1.6 系统功…

网站开发:HTML + CSS - CSS选择器

1. 前言 CSS&#xff08;Cascading Style Sheets&#xff0c;层叠样式表&#xff09;是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能&#xff0c;使开发者能够创建美观且功能丰富的用户界面。 提供了丰富的功能来控制网页的外观和布局&#xff0c;增…

使用Python进行数据可视化:让你的数据“活”起来

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 安装与导入 要使用Matplotlib&#xff0c;首先需要安装。可以使用pip进行安装&#xff1a; pip install matplotlib安装完成后&#xff0c;可以在Python代码中导入Matplotlib库&#xff1a; import matplotlib.py…

ACL22--基于CLIP的非代表性新闻图像的多模态检测

摘要 这项研究调查了假新闻如何使用新闻文章的缩略图&#xff0c;重点关注新闻文章的缩略图是否正确代表了新闻内容。在社交媒体环境中&#xff0c;如果一篇新闻文章与一个不相关的缩略图一起分享&#xff0c;可能会误导读者对问题产生错误的印象&#xff0c;尤其是用户不太可…

027、架构_资源_GTM

系统级GTM:默认的GTM,当创建分片集群时,如果不创建实例级GTM,则会用系统级GTM 本章节主要介绍GTM 集群的新增、删除、配置、绑定等管理操作。 新增GTM集群 摘要新增GTM集群,与租户相绑定,可查看绑定租户与配置集群参数设置,租户可重绑定其他正常可用的GTM集群。 步骤1.…

62、Python之函数高级:装饰器导致函数元数据丢失?三种方法搞定

引言 前面我们通过几篇文章介绍了关于高阶函数中装饰器的内容&#xff0c;我们已经能够实现对函数的动态增强&#xff0c;在遵从开闭原则的基础上&#xff0c;动态提高代码的可复用性。如果对装饰器的基础不太了解&#xff0c;可以回看前面几篇文章。 装饰器的引入带了极大的…

打包macos应用到dmg文件

打包macos应用到dmg文件 由于macos自带的看图软件太麻烦了&#xff0c;还受到沙箱的限制&#xff0c;访问本地文件各种询问&#xff0c;最主要的是不能打开一个图片之后不能直接查看同文件夹下的其他图片&#xff0c;感觉还是挺麻烦的。想看其他图片的时候还要全选才行。 而且…

某云彩SRM2.0任意文件下载漏洞

文章目录 免责申明搜索语法漏洞描述漏洞复现修复建议 免责申明 本文章仅供学习与交流&#xff0c;请勿用于非法用途&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任 搜索语法 fofa icon_hash"1665918155"漏洞描述 某云采 SRM2.0是一款先…

mysql的整理

插入数据&#xff1a; INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); insert into employee(id,workno,name,gender,age,idcard,entrydate) values(1,1,Itcast,男,-1,123456789012345678,2000-01-01); insert into employee values(3,3,韦一笑,男,38,1…

11 Java 方法引用、异常处理、Java接口之函数式编程(接口知识补充Function<T,R>、BiFunction<T, U, R>和自定义泛型接口)

文章目录 前言一、Java接口之函数式编程 --- 接口知识补充1 Function<T,R>泛型接口2 BiFunction<T, U, R>泛型接口3 自定义泛型函数式编程接口4 使用lambda表达式、方法引用进行函数式编程二、方法引用1 方法引用初体验(以Array.sort()方法为例)(1)什么是方法引…

打造温馨家居,全屋智能家居解决方案

智能家居全屋解决方案覆盖全屋照明、温度、娱乐影音等各种常见的日常生活需求、可通过一键设置联动场景来控制自己的家、也可通过语音对话来操控家中的照明、电器及各种场景模式任意切换&#xff0c;一键升级自己的智能家。 1.入户解决方案 通过智能指纹锁穿过玄关、进入大厅、…

Android Studio 加载多个FLutter项目

按顺序操作即可 选择工程 选择Modules, 导入 module 选中创建module 选择要导入的目录&#xff0c;只选择主目录&#xff0c;下面的文件不要选 添加完成&#xff0c;点击ok后&#xff0c;会进行导入 最终导入成功

Java数据结构之ArrayList(如果想知道Java中有关ArrayList的知识点,那么只看这一篇就足够了!)

前言&#xff1a;ArrayList是Java中最常用的动态数组实现之一&#xff0c;它提供了便捷的操作接口和灵活的扩展能力&#xff0c;使得在处理动态数据集合时非常方便。本文将深入探讨Java中ArrayList的实现原理、常用操作以及一些使用场景。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨…

专题一_双指针_算法专题详细总结

目录 双指针 对撞指针&#xff1a;⼀般⽤于顺序结构中&#xff0c;也称左右指针。 快慢指针&#xff1a;⼜称为⻳兔赛跑算法&#xff0c;其基本思想就是使⽤两个移动速度不同的指针在数组或链表等序列 结构上移动。 1. 移动零&#xff08;easy&#xff09; 「数组分两块」…

中间件解析漏洞

一、iis 1、IIS6.X 1.在iis的⽹站根⽬录新建⼀个名为x.asp的⽂件 2.在x.asp中新建⼀个jpg⽂件。内容为 asp代码 3.在外部浏览器中访问windows2003的iis⽹站中的2.jpg 发现asp代码被执⾏ 4.将2.jpg⽂件放到⽹站根⽬录下访问&#xff0c;发现其中的asp代码没有被解析。 由此可…