全心致力于ICT实战型人才培养和输送
扫码试听
扫码试听
027-87532688
首页 > 常见问答 > 公司动态 > > 【Web前端HTML篇】HTML音频/视频标签
企业资讯 热门问答 干货分享

【Web前端HTML篇】HTML音频/视频标签

发布时间:2022-11-05 栏目:公司动态 浏览:

小伙伴们大家好呀,又到了每周技术分享的栏目了,上周小天给大家讲了 HTML 表单标签,今天这篇文章给大家带来的是HTML 音频/视频标签。

 
 
 
 
音/视频元素
视频标签 video
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<!doctype html><html><head><meta charset="utf-8"><title>在HTML5中嵌入视频</title></head><body><!-- src属性是引用资源路径 controls:布尔值,也可以直接添加。会显示音视频的进度条。--><video src="video/runtime.mp4" controls>浏览器不支持video标签</video></body></html>

 

音频标签audio

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<!doctype html><html><head><meta charset="utf-8"><title>在HTML5中嵌入音频</title></head><body><!-- src属性是引用资源路径 controls:布尔值,也可以直接添加。会显示音视频的进度条。--><audio src="music/runtime.mp3" controls="controls">浏览器不支持audio标签</audio></body></html>

 

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

 

属性

src:引用资源的路径

autoplay:布尔值,设置为true后音视频会自动播放(新版浏览器大多禁止自动播放,实测没用)。

controls:布尔值,也可以直接添加。会显示音视频的进度条。

loop:布尔值,也可直接添加。设置为true后会循环播放。

preload:指定是否预加载音视频。有三个值:

 1. auto:预加载音视频。

 2. metadata:只预加载音视频元数据。如媒体字节数、第一帧、播放列表、持续时间等。

 3. none:不执行预加载。

 (指定了autoplay属性后preload会被自动忽略)poster:只对<video>元素有效,该属性指定一张图片的URL地址。在视频下载完成、开始播放之前,该元素将会显示该属性指定的图片。视频不可用时同样显示它。

width、height:只对<video>元素有效,指定视频播放器的宽高。

 

addTextTrack()

向音频/视频添加新的文本轨道。

canPlayType()

检测浏览器是否能播放指定的音频/视频类型。

load()

重新加载音频/视频元素。

play()

开始播放音频/视频。

pause()

暂停当前播放的音频/视频。

 
事件

abort

当音频/视频的加载已放弃时触发。

canplay

当浏览器可以开始播放音频/视频时触发。

canplaythrough

当浏览器可在不因缓冲而停顿的情况下进行播放时触发。

durationchange

当音频/视频的时长已更改时触发。

emptied

当目前的播放列表为空时触发。

ended

当目前的播放列表已结束时触发。

error

当在音频/视频加载期间发生错误时触发。

loadeddata

当浏览器已加载音频/视频的当前帧时触发。

loadedmetadata

当浏览器已加载音频/视频的元数据时触发。

loadstart

当浏览器开始查找音频/视频时触发。

pause

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

play

当音频/视频已开始或不再暂停时触发。

playing

当音频/视频在因缓冲而暂停或停止后已就绪时触发。

progress

当浏览器正在下载音频/视频时触发。

ratechange

当音频/视频的播放速度已更改时触发。

seeked

当用户已移动/跳跃到音频/视频中的新位置时触发。

seeking

当用户开始移动/跳跃到音频/视频中的新位置时触发。

stalled

当浏览器尝试获取媒体数据,但数据不可用时触发。

suspend

当浏览器刻意不获取媒体数据时触发。

timeupdate

当目前的播放位置已更改时触发。

volumechange

当音量已更改时触发。

waiting

当视频由于需要缓冲下一帧而停止时触发。


以上就是这期文章讲到的常用Web 前端开发工具,熟练的使用这些工具是学好 Web 前端的基础条件,各位同学可以自行尝试安装和使用。我们下期再见!

上一篇:邓老师荣获深信服2020年度“金牌讲师”
技术干货
  • it培训班有用吗?学费多少?
    it培训班有用吗?学费多少?
    IT行业是一个快速发展的行业,技术更新换代也非常快,因此IT培训班在市场上非常受欢迎。那么,IT培训班有用吗?学费多少?下面就来详细介绍一下。一、IT培训班有用吗?IT培训班的...
    2023-03-26
  • 路由器怎样重新设置wifi密码?
    路由器怎样重新设置wifi密码?
    路由器是我们家庭网络的核心设备,它不仅可以连接多个设备,还可以设置WiFi密码来保护我们的网络安全。但是,有时候我们需要重新设置WiFi密码,比如忘记了密码或者需要更改密码等...
    2023-03-26
  • <strong>交换器有辐射吗对人身体有害吗</strong>
    交换器有辐射吗对人身体有害吗
    交换机是一种网络设备,它可以将数据包从一个端口传输到另一个端口,以便在局域网中连接多个设备。由于交换机使用电磁波传输数据,因此有人担心它会产生辐射,对人体健康造成...
    2023-03-26
  • 路由器哪个牌子最好信号最稳定?
    路由器哪个牌子最好信号最稳定?
    路由器是现代家庭和办公室中必不可少的设备,它可以将互联网信号转换为无线信号,使得我们可以在家中或办公室中无线上网。但是,市场上有很多不同品牌和型号的路由器,如何选...
    2023-03-26
10年以上业内强师集结,手把手带你锐变精英
  • 岳同学180****1241刚刚成功领取
  • 胡同学134****6431刚刚成功领取
  • 李同学150****6122刚刚成功领取
  • 张同学136****2231刚刚成功领取
  • 孙同学178****5521刚刚成功领取
  • 齐同学156****7788刚刚成功领取
猜你喜欢
查看更多
相关推荐
查看更多
现在学习,我的薪资能达到多少?
立即报名

联系我们:

027-87532688

公众号

公众号

课程老师

课程老师

微信客服 微信客服

企业微信客服

扫码咨询
扫码联系客服
电话客服 电话客服

电话

15271882667
返回首页 返回首页

返回首页

免费领取学习资料包