一、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 属性解析的更多相关文章

  1. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  2. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  3. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  4. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

  5. 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 ...

  6. [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...

  7. 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码  <au ...

  8. html5 audio/video 的那些坑

    当我最近项目用到audio的时候,我们用到了jPlayer作为三方库. 功能实现了,暂停播放,进度条什么的,都很顺利的搞定了.后来考虑到当网速过慢时需要给播放按钮一个载入动画,然后就一发不可收拾了. ...

  9. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 http://www.abc.com/test.mp3&quo ...

随机推荐

  1. JZ-068-打印从 1 到最大的 n 位数

    打印从 1 到最大的 n 位数 题目描述 输入数字 n,按顺序打印出从 1 到最大的 n 位十进制数.比如输入 3,则打印出 1.2.3 一直到最大的 3 位数即 999. 题目链接: 打印从 1 到 ...

  2. JZ-067-剪绳子

    剪绳子 题目描述 给你一根长度为n的绳子,请把绳子剪成整数长的m段(m.n都是整数,n>1并且m>1,m<=n),每段绳子的长度记为k[1],...,k[m]. 请问k[1]x... ...

  3. laravel redis操作大全

    字符串操作 普通得set/get操作,set操作,如果键名存在,则会覆盖原有得值 $redis = app("redis.connection"); $redis->set( ...

  4. 华为交换机配置ACL详细步骤

    ACL 介绍 #2000-2999普通ACL,根据源IP过滤 #3000-3999高级ACL,根据源目的端口和源目的地址等过滤 #4000-4999二层ACL,根据源目的MAC等过滤 配置举例: 拒绝 ...

  5. 命令行安装django以及新建项目及应用

    1:安装django项目,使用pip命令进行安装,默认安装的是最高版本,可以使用pip install django==1.1.11进行指定版本安装 2:新建django项目 2.1:首先切换到创建项 ...

  6. 2022年官网下安装Studio 3T最全版与官网查阅方法(无需注册下载版)

    目录 一.环境 1.构建工具(参考工具部署方式) 2.保持启动 二.下载安装 1.百度搜索,或者访问官网:https://robomongo.org/,选择下载进入下载页. 2.进入下载页,选择如下下 ...

  7. 作为一名Python开发,我谈Linux和mac的使用体验

    我是一名Python开发,在2018.7~2021.6使用的是Linux系统 Deepin OS 作为自己的开发系统:在2022.7-至今使用的是 mac OS 系统作为开发系统. Deepin OS ...

  8. CentOS 7 源码安装 Zabbix 6.0

    Zabbix 主要有以下几个组件组成: Zabbix Server:Zabbix 服务端,是 Zabbix 的核心组件.它负责接收监控数据并触发告警,还负责将监控数据持久化到数据库中. Zabbix ...

  9. Vmware安装Ubuntu16.4的过程及出现问题的解决

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 1.下载Ubuntu镜像文件 Ubuntu16.4镜像文件下载地址:https://mirrors.aliyun.com/ubuntu-relea ...

  10. BZOJ3159: 决战(FHQ Treap)

    传送门: 解题思路: 算是补坑了,这题除了Invert以外就可以树剖线段树解决了. 考虑Invert操作,延续先前树链剖分的做法,考虑先前算法的瓶颈. 最暴力的方法是暴力交换权值,然而这种方法忽略了当 ...