HTML5 Audio & Video 属性解析
一、HTML 音频/视频 方法
play()
play()
方法开始播放当前的音频或视频。
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
pause()
pause()
方法暂停播放当前的音频或视频。
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
load()
load()
方法重新加载音频/视频(audio/video)元素。
load()
方法用于在更改来源或其他设置后对音频/视频(audio/video)元素进行更新。
<button onclick="changeSource()" type="button">更改视频来源</button>
<br>
<video id="video1" controls="controls" autoplay="autoplay">
<source id="mp4_src" src="mov_bbb.mp4" type="video/mp4">
<source id="ogg_src" src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<script>
function changeSource()
{
document.getElementById("mp4_src").src="movie.mp4";
document.getElementById("ogg_src").src="movie.ogg";
document.getElementById("video1").load();
}
</script>
canPlayType()
function supportType(e,vidType,codType)
{
myVid=document.createElement('video');
isSupp=myVid.canPlayType(vidType+';codecs="'+codType+'"');
if (isSupp=="")
{
isSupp="No";
}
return isSupp;
}
二、HTML 音频/视频属性
autoplay
【设置】或【返回】是否在加载完成后随即播放音频/视频。
controls
【设置】或【返回】音频/视频是否显示控件(比如播放/暂停等)。
currentTime
【设置】或【返回】音频/视频中的当前播放位置(以秒计)。
defaultMuted
【设置】或【返回】音频/视频默认是否静音。
defaultPlaybackRate
【设置】或【返回】音频/视频的默认播放速度。
duration
【返回】当前音频/视频的长度(以秒计)。
ended
【返回】音频/视频的播放是否已结束
error
【返回】表示音频/视频错误状态的 MediaError 对象。
loop
【设置】或【返回】音频/视频是否应在结束时重新播放。
muted
【设置】或【返回】音频/视频是否静音。
paused
【设置】或【返回】音频/视频是否暂停。
playbackRate
【设置】或【返回】音频/视频播放的速度。
src
【设置】或【返回】音频/视频元素的当前来源。
volume
【设置】或【返回】音频/视频的音量。
二、HTML 音频/视频事件
canplay
当浏览器可以开始播放音频/视频时触发。
ended
当目前的播放列表已结束时触发。
error
当在音频/视频加载期间发生错误时触发。
pause
当音频/视频已暂停时触发。
play
当音频/视频已开始或不再暂停时触发。
playing
当音频/视频在因缓冲而暂停或停止后已就绪时触发。
progress
当浏览器正在下载音频/视频时触发。
ratechange
当音频/视频的播放速度已更改时触发。
seeked
当用户已移动/跳跃到音频/视频中的新位置时触发。
seeking
当用户开始移动/跳跃到音频/视频中的新位置时触发。
timeupdate
当目前的播放位置已更改时触发。
volumechange
当音量已更改时触发。
waiting
当视频由于需要缓冲下一帧而停止时触发。
当音频/视频处于加载过程中时,会依次发生以下事件:
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough
HTML5 Audio & Video 属性解析的更多相关文章
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
- The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)
http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...
- [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...
- 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <au ...
- html5 audio/video 的那些坑
当我最近项目用到audio的时候,我们用到了jPlayer作为三方库. 功能实现了,暂停播放,进度条什么的,都很顺利的搞定了.后来考虑到当网速过慢时需要给播放按钮一个载入动画,然后就一发不可收拾了. ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 http://www.abc.com/test.mp3&quo ...
随机推荐
- git命令合集
##快捷键 ##一. 快捷键 1. 清屏快捷键 control+L 2. vim快捷操作 * control+b 往上翻页 * Control+f 往下翻页 * shift+g 回到末尾 3. oh ...
- 8.Flink实时项目之CEP计算访客跳出
1.访客跳出明细介绍 首先要识别哪些是跳出行为,要把这些跳出的访客最后一个访问的页面识别出来.那么就要抓住几个特征: 该页面是用户近期访问的第一个页面,这个可以通过该页面是否有上一个页面(last_p ...
- java的基本类型和类型转化
1.八种基本数据类型: byte-short--int --long--float--double--char 2.八种基本类型所占字节空间 一.int 整数的直接量为int: 存储范围为:- -21 ...
- 华为HCIA认证零基础入门-网络工程师必备之什么是静态路由?如何配置静态路由?
一.静态路由功能介绍:静态路由就是手工配置的路由,使得数据包能够按照预定的路径传送到指定的目标网络. 当不能通过动态路由协议学到一些目标网络的路由时,配置静态路由就会显得十分重要. 二.静态路由应用场 ...
- Linux命令 之 “救命稻草”
一.前言 虽然Linux操作系统图形界面已经退出,但由于大量的操作在终端操作比较快捷,所以,对linux命令的使用必不可少.在linux系统日常的学习和工作中,常常会出现有些命令忘记了或者该命令的参数 ...
- LGP4141题解
乱 搞 做 法 仅供参考 不会神秘背包技巧怎么办?只会代数爆推怎么办? 发现这个像是一个计数背包然后每次阉割掉一个位置. 考虑做前缀后缀背包然后卷起来,因为考虑成 GF 就是在求 \(\sum_{j= ...
- Python 实现 JWT 生成
Python 实现 JWT 生成 JWT 简介:https://www.jianshu.com/p/576dbf44b2ae Json web token (JWT), 是为了在网络应用环境间传递声明 ...
- k8s 开船记-脚踏两只船:船儿还是旧的好,不翻船才是硬道理
自从上次开始脚踏两只船(2个独立的k8s集群同时运行),园子暂时用奢侈的土豪方式过上了安稳的船上生活. 这种方式除了费钱之外,还带来一个问题,我们的集装箱自动装船系统(基于gitlab-ci的自动化部 ...
- ansible 四常用模块
常用模块 Ansible默认提供了很多模块来供我们使用.在Linux中,我们可以通过 ansible-doc -l 命令查看到当前Ansible支持哪些模块,通过 ansible-doc -s [模块 ...
- ASP.NET Core 6框架揭秘实例演示[28]:自定义一个服务器
作为ASP.NET Core请求处理管道的"龙头"的服务器负责监听和接收请求并最终完成对请求的响应.它将原始的请求上下文描述为相应的特性(Feature),并以此将HttpCont ...