H5学习系列之Audio和Video
1、视频文件:音频轨道、视频轨道和一些元数据(视频封面、标题、子标题、字幕等相关信息)。
2、目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件)、H5的媒体收到跨域资源共享的限制、全屏无法通过脚本控制。
3、检测浏览器是否具有播放视频的功能
var canPlay = document.createElement("video").canPlayType;
if (canPlay) {alert("ok");}
else {alert('error');} //其实就是检测浏览器是否具有canplaytype函数
4、audio
<audio controls src="/张含韵 - 问别.mp3">
An audio clip from johann sebastian bach
</audio>
代码中controls 特性告诉浏览器显示通过的用户控制(开始、停止、跳播、以及音量控制),她之间的内容是为不支持audio元素的浏览器准备的替换内容
<audio controls >
<source
src="" />
<source
src="" />
An audio clip from johann sebastian bach
</audio>
浏览器根据自身播放能力自动选择,挑选最贱的来源进行播放
autoplay属性:加载完成后自动播放(ios不支持)
5、var
docu = document.getElementById("audio");//同时适用于video这些属性他们两个相同
var duration = docu.duration;//整个媒体的播放时常 以s为单位
var paused = docu.paused;//如果媒体文件当前被暂停(或者未播放),返回true
var ended = docu.ended;//如果文件已经播放完毕了返回true
var currentSrc = docu.currentSrc;//以字符串形式返回当前正在播放文件对应于浏览器在source元素中选择的文件
//以上都是只读属性
docu.autoplay = true;//查询或者设置自动播放
docu.loop = true;//查询或者设置循环播放
docu.currentTime = "30";//查询或者只当前播放的位置
docu.controls = true;//查询或者设置用户与控制界面
docu.volume = 0.5;//查询或者设置音量0.0到1.0
docu.muted = false;//查询或者设置是否静音
docu.autobuffer
= true;//通知播放器在媒体文件开始播放前,是否进行缓冲加载。(如果媒体文件已设置为autoplay,则忽略此属性)
6、video特有的属性
poster
:在视频加载完成之前 图片得url;
width、height:读取或设置显示尺寸。如果设置的宽度与视频本身不匹配,可能导致居中显示,上下或者左右可能出现黑色条状区域。
videowidth、videoHeight:返回视频的固有或者自适应的宽度和高度(只读)
onloadstart //客户端开始请求数据
onprogress //客户端正在请求数据
onsuspend //延迟下载
onabort //客户端主动终止下载(不是因为错误引起)
onerror //请求数据时遇到错误
onstalled //网速失速
onplay //play()和autoplay开始播放时触发
onpause //pause()触发
onloadedmetadata //成功获取资源长度
onloadeddata //
onwaiting //等待数据,并非错误
onplaying //开始回放
oncanplay //可以播放,但中途可能因为加载而暂停
oncanplaythrough //可以播放,歌曲全部加载完毕
onseeking //寻找中
onseeked //寻找完毕
ontimeupdate //播放时间改变
onended //播放结束
onratechange //播放速率改变
ondurationchange //资源长度改变
onvolumechange //音量改变
以上所有事件都是可以捕捉到的
H5学习系列之Audio和Video的更多相关文章
- H5学习系列之Geolocation API
获取位置信息途径: 1.IP地址地理定位数据 2.GPS地理定位数据 3.WI-FI地理定位数据 4.手机地理定位数据 无废话直接上重点:navigator.geolocation对象就是获取地理位置 ...
- H5学习系列之文件读取API--本文转自http://blog.csdn.net/jackfrued/article/details/8967667
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- H5学习系列之Communication API
1 .postMessage API 首先介绍一下什么是iframe? 百度百科里这样写道:IFRAME,HTML标签,作用是文档中的文档,或者浮动的框架(FRAME). 我的理解就是网页中的网页. ...
- H5学习笔记1
H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...
- Html5学习系列
Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.26 ...
- 深度学习系列 Part(3)
这是<GPU学习深度学习>系列文章的第三篇,主要是接着上一讲提到的如何自己构建深度神经网络框架中的功能模块,进一步详细介绍 Tensorflow 中 Keras 工具包提供的几种深度神经网 ...
- Wechat 微信端正确播放audio、video的姿势
在开发微信项目时,有在项目中播放音频(audio)和视频(video)的需求: 在开发中,我们会遇到的问题 audio.video在Android和IOS系统上的兼容性: video播放完成后,跳出浏 ...
- DocX开源WORD操作组件的学习系列二
DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...
- Android+Jquery Mobile学习系列(6)-个人信息设置
本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...
随机推荐
- 解决linux yum无法安装mysql
yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源 wget http://repo.mysql.com/mysql-com ...
- 解决ASP.Net第一次访问慢的处理(IIS8)
本篇经验以IIS8,Windows Server 2012R2做为案例. IIS8 运行在 Windows Server 2012 and Windows 8 版本以上的平台上. IIS中应用程序池和 ...
- Excel实用技巧
情景:有时候,我们写了一个公式,然后想在其他行也套用这个公式,一般人都是把鼠标放在那个公式所在的单元格的右下角,然后往下拉,数据量少的时候还好,数据量大的时候就不太好操作了,此时,我们需要一个好方法. ...
- IPv6测试环境
1.准备机器 三台PC机器,通过1个hub连接,1台windows,安装成双网卡,1个网卡连接外网,1个网卡连接IPv6环网.系统版本:xp sp3 for japan 2台linux机器.操作系统版 ...
- MySQL事件 Events
MySQL事件 Events 一.关键字: EVENT 二.语法: CREATE EVENT? [IF NOT EXISTS ] //如果不存在则创建 event_name? ON SCHED ...
- 磁盘阵列(RAID)实例
raid技术分类可以分为基于软件raid技术和基于硬件raid技术 raid又分为raid-0.raid-1.raid-5和raid-10 Raid有”廉价磁盘冗余阵列”的意思,就是利用多块廉价的硬盘 ...
- 安装mysql 5.7+版本缺少data文件夹
打开cmd命令窗口,并且进入到mysql安装目录的bin目录下.然后输入命令: mysqld --initialize-insecure --user=mysql 然后回车:去目录下查看,已经自动创建 ...
- ASP.NET泛型List的各种用法Skip、Take等
List在.NET里面使用得非常频繁,但有好多人不了解它各种小用法.我就一直记不大住... asp.net中List的简单用法,例如: 1 2 3 4 5 6 7 List<int> li ...
- 《全唐诗》的sqlite3数据库
下载地址: http://pan.baidu.com/s/1b2mE54quantangshi.db是sqlite3数据库,包括2张表.index表:volume 列(整数,主键) 表示卷号,从1到9 ...
- [Qt系列] 何处下载,如何安装!
时间:2016.07.29 -------------------------------------------- 其实方法有很多! 我的思路是想独立使用它,不想联合VS. 下载地址:http:// ...