HTML5 Video与Audio 视频与音频
---- 视频Video对象
- 指定视频播放地址
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
你的浏览器不支持视频标签
</video>
- 内嵌元素,若不支持将会显示那些指定的文字
- 视频额外属性
属性 描述
------------------------------------------------------------
poster 在视频加载完成之前,代表视频内容的图片的URL地址
width,heigth 设置显示尺寸
videoWidth,videoHeight 返回视频的固有或自适应的宽度和高度,只读
---- 格式与浏览器匹配
Codec Firefox Opera Chrome Safari IE IOS* Android
--------------------------------------------------------------------
OGG 3.5 10.50 3.0
MP4 3.0 3.0 2.0
WebM 4.0 10.60 6.0 9**
Flash Plug-In Plug-In Plug-In Plug-In Plug-In 2.2
---- 音频Audio对象
- 与视频同享 HTMLMediaElement
- var audio = new Audio(src);
(注意:以前Audio和Vidio都通用)
- 常用的控制函数
函数 动作
------------------------
load() 加载音频/视频文件,为播放做准备.通常情况下不必调用,除非是动态生成的元素,用来在播放前预加载
play() 加载并播放音频/视频文件,除非音频/视频已经暂停在其他位置了,否则默认从开头播放
pause() 暂停处理播放状态的音频/视频文件
canPlayType(type) 测试void元素是否支持给定MIME类型的文件
- 只读的媒体属性
属性 描述
-------------------------
duration 整个媒体文件的播放时长,以s为单位,如果无法获取时,则返回NaN
paused 如果媒体文件当前被暂停,则返回true,如果还未开始播放,默认返回true
ended 如果媒体文件已经播放完毕,则返回true
startTime 返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
error 在发生了错误的情况下返回的错误代码
currentSrc 以字符串形式返回当前正在播放或已加载的文件,对应于浏览器在source元素中选择的文件
- 可脚本控制的值
属性 描述
-------------------------
autoplay 是否自动播放,或者查询是否已设置为autoplay
loop 是否循环播放
currentTime 以s为单位返回从开始播放到现在所用的时间,在播放过程中,设置currentTime来定位媒体快进/快退
controls 显示或隐藏用户控制界面,或者查询用户控制界面是否可见
volume 在0.0到1.0之间设置音频音量的相对值,或者查询当前音量值
muted 设置静音,或检测是否为静音
autobuffer 播放前是否进行缓冲加载,如果媒体已设置autoplay,则忽略此特性
HTML5 Video与Audio 视频与音频的更多相关文章
- html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
- HTML5 video 和 audio
video 用于在HTML或者XHTML文档中嵌入视频内容 使用 video 元素至少要提供两种视频格式的文件:OGG 和 MP4 OGG:采用 Theora 视频格式和 Vorbis 音频解码器 ( ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- Html5学习进阶一 视频和音频
HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持两种视频格式: Internet Explorer Firefox 3.5 Opera 10 ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- html5 video,audio控制播放多次,请求/监测全屏状态
audio 播放 Element.play(); 如果在播放中,调用play,从头播放,则需要先load,同时绑定结束方法,如 Element.addEventListener('ended',f ...
- HTML5 video 连续播放视频
HTML Video标签属性 html页面代码 <video height="2160" id="playVideo" width="3840& ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- HTML5: HTML5 Video(视频)
ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...
随机推荐
- 【转】linux中的cut/tr/join/split/xargs命令
1. cut命令 cut命令用于从文件或者标准输入中读取内容并截取每一行的特定部分并送到标准输出. 截取的方式有三种:一是按照字符位置,二是按照字节位置,三是使用一个分隔符将一行分割成多个field, ...
- 日志文件C++ 时间 文件 行数
#include <stdio.h> #include<windows.h> #include <time.h> #define Line __LINE__ #de ...
- JNI总结(一)
JNI 是 Java平台中的一个强大特性.应用程序能够通过 JNI把 C/C++代码集成进 Java程序中.通过 JNI.开发人员在利用 Java平台强大功能的同一时候,又不必放弃对原有代码的投资.由 ...
- Redis缓存 ava-Jedis操作Redis,基本操作以及 实现对象保存
源代码下载: http://download.csdn.net/detail/jiangtao_st/7623113 1.Maven配置 <dependency> <groupId& ...
- paip.输入法编程---词频顺序order by py
paip.输入法编程---词频顺序order by py 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn ...
- android学习日记27--Dialog使用及其设计模式
1.Dialog概述 对话框一般是一个出现在当前Activity之上的一个小窗口,处于下面的Activity失去焦点, 对话框接受所有的用户交互. 对话框一般用于提示信息和与当前应用程序直接相关的小功 ...
- sql server R2 下载地址收藏
SQL Server 2008 R2 下载地址 32位: http://care.dlservice.microsoft.com/dl/download/1/e/6/1e626796-588a-495 ...
- Java基础知识强化之网络编程笔记15:Android网络通信之 Android异步任务处理(AsyncTask使用)
AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口实现UI进度更新),最后反馈执行的 ...
- MySQL(8):数值类型详细分析
1.日期和时间类型 2.varchar和char 固定长度 (char) 或可变长度 (varchar) 字符数据类型. 例如: a char(10)b varchar(10)都存入'abc'a要求 ...
- Android-Opencv开发(一)配置环境
先去官网下载android-opencv http://opencv.org/.