一、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. GeoServer-REST应用:基于Qt网络编程一键同步发布空间数据和样式至GeoServer

    @ 目录 简介 配置 步骤   1.引入Qt网络模块   2.创建网络管理.网络响应.网络请求   3.创建工作空间   4.创建数据存储并上传数据   5.上传样式文件   6.图层发布   6.图 ...

  2. transform方法适配页面大小

    function setCss() {       let App = document.getElementById("app"); // 获取到app节点 最外层的盒子     ...

  3. VirtualBox虚拟机--导入导出系统&主机启用硬件虚拟化

    问题概述:在往新电脑中导入其他电脑中导出的虚拟机后,启动该虚拟机系统时报错说主机不支持硬件虚拟化. 将电脑1中VirtualBox的一个虚拟机系统win7导出成.ova格式的文件, 在电脑2中安装Vi ...

  4. C#实现抢红包算法

    二倍均值法(公平版) 发出一个固定金额的红包,由若干个人来抢,需要满足哪些规则? 1.所有人抢到金额之和等于红包金额,不能超过,也不能少于. 2.每个人至少抢到一分钱. 3.要保证所有人抢到金额的几率 ...

  5. 重磅 | 腾讯云服务网格开源项目 Aeraki Mesh 加入 CNCF 云原生全景图

    作者 赵化冰,腾讯云工程师,Aeraki Mesh 创始人,Istio member,Envoy contributor,目前负责 Tencent Cloud Mesh 研发工作. 摘要 近日,腾讯云 ...

  6. RhaPHP 微信公众号管理系统

    框架网址https://www.rhaphp.com/ 开发手册网址:: https://www.kancloud.cn/langleigelang/rhaphp/588488 git 克隆,如果克隆 ...

  7. think php 公共目录common.php json封装

    <?php function getJsonData($code,$massage,$data){ $result=[ 'code'=>$code, 'massage'=>$mass ...

  8. jsplumbWithVue实现流程编排

    最近业务需求,通过拖拽,实现流程编排,包括编排元素中的各种属性,刚开始拿到这个需求,一头雾水啊,找度娘渡了好久,FQ翻了很久,各种博客CSDN搜索,最终技术选型还是定在了jsplumb,这要感谢@萌级 ...

  9. Java学习笔记:02面向对象-重写_this_super_抽象类

    02面向对象-重写/this/super/抽象类 ****1.this和super 作用: this: 区分本类的成员变量和局部变量同名情况 super:区分父类的成员变量和局部变量同名情况 用法: ...

  10. 这个好玩又实用的jupyter插件我真的爱了

    1 简介 最近在逛github的时候偶然发现一款特别的jupyter插件stickyland,通过它我们可以在jupyter中以一种非常特别的交互操作方式,对我们的的代码单元格进行组织和展示,今天的文 ...