IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/102480060

在HTML5之前,要在网站上展示视频、音频、动画等多媒体信息,除了使用第三方自主开发的播放器,使用最多的工具应该算是Flash了,但是它们都需要在浏览器中安装各种插件才能使用,有时速度很慢。HTML5的出现使这一局面得到了改观。在HTML5中提供了音频的标准接口,多媒体播放再也不需要安装插件了,只需要一个支持HTML5的浏览器就可以了。本节介绍video和audio这两个HTML5新增加的元素,它们分别用来处理视频与音频数据。目前Safari 3以上、Firefox 4以上、Opera 10以上,以及Google Chrome 3.0以上的浏览器都实现了对这两个媒体元素的支持。以audio元素为例,只要把播放音频的URL地址指定给该元素的src属性就可以了。代码如下所示:

将上包含上述代码的html文件在浏览器中打开,如果浏览器支持音频功能则出现音频播放器,否则页面显示“您的浏览器不支持音频audio功能”。效果如图4所示:

图4 音频<audio>标签

视频video元素的使用方法和audio相似,只要设定好元素的长、宽等属性即可。代码如下所示:

图4.5 视频<video>标签

各浏览器对于各种媒体类型及编码格式的支持情况各不相同,可以通过source元素来为同一个媒体数据指定多种播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放。浏览器的选择顺序为代码中的书写顺序,它会从上往下判断自己对该播放格式是否支持,选到为止。各浏览器对于编码格式的支持情况如表3所示。

表3 各浏览器对于编码格式的支持情况

audio和video元素通过一些常用属性的使用,可以定义和扩展一些功能,它们所具有的属性大致相同。两个元素常用的属性如表4所示。

表4 audio和video元素常见属性说明

除了表4中提供的属性,还有一些属性、方法和事件可用,但需要结合JavaScript来实现一些特定的效果。例如,通过error属性可以处理出现的错误;使用networkState属性读取当前网络状态;使用play方法来播放媒体;使用load方法重新载入媒体进行播放;通过timeupdate事件来通知当前播放位置的改变;结合JavaScript来显示当前的播放进度等。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

ABAP Netweaver体内的那些寄生式编程语言

Jerry最近看到朋友圈里一位朋友分享的一张寄居蟹的照片,对于Jerry这种在内地长大的又很宅的人来说,没有机会看到寄居蟹,所以觉得很新鲜:

7900
来自专栏老沙课堂

浅入深出Copy和mutableCopy

由Tagged Pointed 可以知道a b 为Tagged Pointer 对象 想深入了解的的可以看一下我的上一篇文章

8220
来自专栏微信公众号【Java技术江湖】

夯实Java基础系列9:深入理解Class类和Object类

本系列文章将整理到我在GitHub上的《Java面试指南》仓库,更多精彩内容请到我的仓库里查看

7300
来自专栏salesforce零基础学习

Salesforce LWC学习(三) import & export / api & track

我们使用vs code创建lwc 时,文件会默认生成包含 template作为头的html文件,包含了 import LightningElement的 js...

12720
来自专栏安恒网络空间安全讲武堂

[CSAW CTF'18] web writeup

后来才明白原来题目名就已经是hint了, 进去之后就会发现输入括号和没有括号是有差别的, 然后想起来最近的noxCTF刚刚做过一个LDAP注入

6730
来自专栏code秘密花园

【开源推荐】 手绘风格的 JS 图表库

手绘风格的设计给人一种很可爱的感觉,看了这些图表你会发现数据也可以以萌萌哒的形式展示。

10530
来自专栏salesforce零基础学习

Salesforce LWC学习(七) Navigation & Toast

上一篇我们介绍了针对LWC中常用的LDS的适配的wire service以及@salesforce模块提供的相关的service,其实LWC中还提供其他的好用的...

11140
来自专栏不想当开发的产品不是好测试

认识map-reduce

1)MapReduce从HDFS中分割读取Split文件,通过Inputformat交给Mapper来处理。Split是MapReduce中最小的计算单元,一个...

9340
来自专栏窗户

map的实现和柯里化(Currying)

  对于函数式编程来说,map/reduce/filter这几个算子非常重要,其中有的语言不是reduce而是fold,但功能基本一样,不过reduce的迭代一...

11120
来自专栏salesforce零基础学习

Salesforce LWC学习(六) @salesforce & lightning/ui*Api Reference

上一篇中我们在demo中使用了很多的 @salesforce 以及 lightning/ui*Api的方法,但是很多没有细节的展开。其实LWC中针对这些modu...

9830

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励