• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5多媒体audio和video详细介绍(二)

HTML5多媒体audio和video详细介绍(二)

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,audio,video等相关知识,匿名希望在学习及工作中可以帮助到您

前面我们学习了audio和video最基本的用法,为了更加灵活的控制音视频的播放,我们就需要学习HTML5为我们提供的相关属性、方法和事件了。

audio和video相关属性

属性描述
src用于指定媒体资源的URL地址
autoplay资源加载后自动播放
buffered用于返回一个TimeRanges对象,确认浏览器已经缓存媒体文件。
controls提供用于播放的控制条
currentSrc返回媒体数据的URL地址
currentTime获取或设置当前的播放位置,单位为秒
defaultPlaybackRate返回默认播放速度
duration获取当前媒体的持续时间
loop设置或返回是否循环播放
muted设置或返回是否静音
networkState返回音频视频当前网络状态
paused检查视频是否已暂停
playbackRate设置或返回音频视频的当前播放速度
played返回TimeRanges对象。TimeRanges表示用户已经播放的音频视频范围
preload设置或返回是否自动加载音视频资源
readyState返回音频视频当前就绪状态
seekable返回TimeRanges对象,表明可以对当前媒体资源进行请求
seeking返回是否正在请求数据
valume设置或返回音量,值为0到1.0

audio和video相关方法

方法描述
canPlayType()检测浏览器是否能播放指定的音频、视频
load()重新加载音频、视频元素
pause()停止当前播放的音频、视频
play()开始播放当前音频、视频

audio和video相关事件

事件描述
canplay当浏览器能够开始播放指定的音视频时,发生此事件
canplaythrough当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频视频时,发生此事件
durationchange当音频、视频的时长数据发生变化时,发生此事件
loadeddata当当前帧数据已加载,但没有足够的数据来播放指定音频视频的下一帧时,会发生此事件
loadedmatadata当指定的音频视频的元数据已加载时,会发生此事件。元数据包括时长、尺寸(仅视频)以及文本轨道
loadstart当浏览器开始寻找指定的音频视频时,发生此事件
progress正在下载指定的音频视频时,发生此事件
abort音频视频终止加载时,发生此事件
ended音频视频播放完成后,发生此事件
error音频、视频加载错误时,发生此事件
pause音频视频暂停时,发生此事件
play开始播放时,发生此事件
playing因缓冲而暂停或停止后已就绪时触发此事件
ratechange音频视频播放速度发生改变时,发生此事件
seeked用户已移动、跳跃到音频视频中的新位置时,发生此事件
seeking用户开始移动、跳跃到新的音频视频播放位置时,发生此事件
stalled浏览器尝试获取媒体数据,但数据不可用时触发此事件
suspend浏览器刻意不加载媒体数据时触发此事件
timeupdate播放位置发生改变时触发此事件
volumechange音量发生改变时触发此事件
waiting视频由于需要缓冲而停止时触发此事件

【相关推荐】

1. 详解html5的video标签测试应用

2. html 5中使用video元素制作一个影片播放器

3. 分享一个video标签无法播放mp4的问题以及解决方案

4. H5 video标签只能放声音不能放视频的解决办法

5. IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法

以上就是HTML5多媒体audio和video详细介绍(二)的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5的classList属性操作CSS类的使用详解
  • 2018-12-03element-ui如何操作table滚动效果
  • 2018-12-03HTML5实践-如何使用css3丰富图片样式的详解(二)
  • 2018-12-03HTML5通讯录获取指定多个人的信息
  • 2018-12-03[HTML5游戏开发]挑战横版ACT(三):遇红颜英雄亦多情
  • 2018-12-03HTML5 组件Canvas实现电子钟的图文代码详情介绍
  • 2018-12-03请问这样的界面是如何实现的?
  • 2018-12-03HTML5样式控制示例代码_html5教程技巧
  • 2017-08-06使用phonegap获取位置信息的实现方法
  • 2018-12-03H5本地存储实例详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 几种关于HTML 5 的动态效果制作方法
    • HTML5实践-使用CSS实现弹性视频的代码分享
    • HTML5标签与HTML4标签的区别示例介绍
    • HTML5 解决苹果手机不能自动播放音乐问题的相关技巧
    • HTML5中的nav标签学习笔记
    • phonegap实现进行本地存储的方法介绍
    • 22个HTML5 技巧三
    • HTML5使用DOM进行自定义控制示例代码_html5教程技巧
    • 用H5的canvas做出弹幕效果
    • HTML5地理定位实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有