一、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-026-二叉搜索树与双向链表

    二叉搜索树与双向链表 题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 题目链接: 二叉搜索树与双向链表 代码 /** * ...

  2. LeetCode-020-有效的括号

    有效的括号 题目描述:给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺 ...

  3. SQL Server的Linked Servers

    文章搬运自:SQL Server的Linked Servers(链接) 参考引用一下,感谢作者~ 我们在使用SQL Server时,有时会有这种需求,需要从一个SQL Server服务器A中,查询另一 ...

  4. ansible二进制部署kubernetes集群

    kubernetes版本1.21.5 需要的资源文件请自行到我的阿里云盘下载 https://www.aliyundrive.com/s/zVegF78ATDV 修改主机信息 #根据自己的主机信息自行 ...

  5. OSPF协议原理及配置3-邻居关系的建立

    OSPF协议原理及配置3-邻居关系的建立   OSPF协议的邻居关系是通过交换Hello报文建立的,所以我们先对OSPF的报文的种类,及Hello报文的结构做一了解. 1 OSPF协议有5种协议报文( ...

  6. elasticsearch高亮之highlight原理

    一.highlight简介 highlight是提升用户体验的重要手段,搜索引擎通过高亮突出命中关键字等方式,方便用户通过关键字周围的信息快速的确认是否是自己希望的结果: highlight功能通常包 ...

  7. 2022年官网下安装DBever最全版与官网查阅方法

    目录 安装部署DBeaver 一.官网下载安装 1.百度搜索DBeaver. 2.进入主页,点击DownLoad下载. 3.查看列表,选择windows的exe版本下载. 4.找到位置,双击打开,弹出 ...

  8. ## [湖南省赛2019]Findme ###

    [湖南省赛2019]Findme 1.题目概述 2.解题过程 010打开这几张图片 先简单分析一下这几张图片 简单分析 1.png 从外观上,1.png明显高度太低,需要更改 2.png 2.png末 ...

  9. Docker——部署常用镜像

    部署nginx:暴露端口 #下载nginx docker pull nginx #运行nginx docker run -d --name nginx2 -p 8081:80 nginx -d #后台 ...

  10. 放在initramfs的ko会先加载,还是/lib/modules/下面的ko会先加载?

    如果是在switchroot时加载,用的是initramfs,在switchroot后,用的是硬盘上的,有些ko放到initramfs中,但是switchroot前不加载的话,用的还是硬盘上的,关键看 ...