video标签的属性和方法总结
最近想做一个弹幕插件,查了很多video标签的属性和方法
error属性
在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,error属性将返回一个MediaError对象,该对象的code返回对应的错误状态,共有4个可能值:
MEDIA_ERR_ABORTED(数字值为1)
,媒体数据的下载过程由于用户的操作原因而被终止。
MEDIA_ERR_NETWORK(数字值为2)
,确认媒体资源可用,但是在下载出现网络错误,媒体数据的下载过程被中止。MEDIA_ERR_DECODE(数字值为3)
,确认媒体资源可用,但是解码时发生错误。MEDIA_ERR_SRC_NOT_SUPPORTED(数字值为4)
,媒体资源不可用或媒体格式不被支持。
代码如下:
<video src="" id="videoElement"></video>
var video = document.getElementById("videoElement");
video.addEventListener("error",function(){
var error = video.error;
swicth(error.code) {
case 1:
alert("视频的下载过程被中止");
break;
case 2:
alert("网络发生故障,视频的下载过程被中止");
break;
case 3:
alert("解码失败");
break;
case 4:
alert("媒体资源不可用或媒体格式不被支持");
break;
}
},false);
networkState属性
在媒体数据加载过程中可以使用video元素或audio元素的networkState属性读取当前网络状态,共有4个可能的值;
1. NETWORK_EMPTY(数字值为0):元素处于初始状态。
2. NETWORK_IDLE(数字值为1),浏览器已选择好用什么编码格式来播放媒体,但是尚未建立网络连接。
3. NETWORK_LOADING(数字值为2):媒体数据加载中
4. NETWORK_NO_SOURCE(数字值为3),没有支持的编码格式,不执行加载。
currentTime属性与duration属性
video元素或audio元素的currentTime属性来读取媒体的当前播放位置(单位是s),也可以通过修改currentTime属性来修改当前播放位置,如果修改的位置上没有可用的媒体数据时,将抛出INVALID_STATE_ERR异常;
video元素或audio元素的duration属性来读取媒体文件总的播放时间。
我们可以来做demo如下:
HTML代码如下:
<video id="video" controls width=640 height=360 autoplay>
<source src="Wildlife/Wildlife.ogv" type="video/ogg; codecs="theora, vorbis""/>
<source src="Wildlife/Wildlife.webm" type="video/webm" >
<source src="Wildlife/Wildlife.mp4" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="getCurTime()" type="button">获得当前时间的位置</button>
<button onclick="setCurTime()" type="button">把时间位置设置为 5 秒</button>
<button onclick="duration()" type="button">读取媒体文件总的播放时间</button>
JS代码如下:
var myVid=document.getElementById("video");
function getCurTime(){
// 获得当前视频或者音频时间的位置
alert(myVid.currentTime);
}
function setCurTime(){
// 给当前的视频或者音频设置5s时间的位置
myVid.currentTime=5;
}
function duration() {
//读取媒体文件总的播放时间 单位为S
alert(myVid.duration);
}
大家可以复制代码,换一张视频地址就可以看到效果了~;
played属性,paused属性与ended属性
played:video元素或audio元素的played属性来返回一个TimeRanges对象,从该对象中可以读取媒体文件的已播放部分的时间段。开始时间为已播放部分的开始时间,结束时间为已播放部分的结束时间。
paused属性:使用video元素或audio元素的paused属性来返回一个布尔值,表示是否处于暂停播放中,true表示媒体暂停播放,false表示媒体正在播放;
ended属性:使用video元素或audio元素的ended属性来返回一个布尔值,表示是否播放完毕,true表示媒体播放完毕,false表示媒体还没有播放完毕。
HTML代码如下:
<video id="video" controls width=640 height=360 autoplay loop>
<source src="Wildlife/Wildlife.ogv" type="video/ogg; codecs="theora, vorbis""/>
<source src="Wildlife/Wildlife.webm" type="video/webm" >
<source src="Wildlife/Wildlife.mp4" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="played()" type="button">读取媒体文件的已播放部分的时间段</button>
<button onclick="paused()" type="button">是否处于暂停播放</button>
<button onclick="ended()" type="button">是否播放完毕</button>
JS代码如下:
var myVid=document.getElementById("video");
function played() {
//读取媒体文件的已播放部分的时间段
console.log(myVid.played);
}
function paused() {
// 是否处于暂停播放
alert(myVid.paused);
}
function ended() {
// 是否播放完毕
alert(myVid.ended);
}
defaultPlaybackRate属性与playbackRate属性
defaultPlaybackRate属性:可以使用video元素或者audio元素的defaultPlaybackRate属性读取或修改媒体默认的播放速率。
playbackRate属性:可以使用video元素或者audio元素的playbackRate属性读取或修改媒体当前的播放速率。
volume属性与muted属性
volume属性:使用video元素或audio元素的volume属性读取或修改媒体的播放音量,范围为0到1,0为静音,1为最大音量。
muted属性:使用video元素或audio元素的muted属性读取或修改媒体的静音状态,该值为布尔值,true表示处于静音状态,false表示处于非静音状态。
HTML代码如下:
<video id="video" controls width=640 height=360 autoplay loop>
<source src="Wildlife/Wildlife.ogv" type="video/ogg; codecs="theora, vorbis""/>
<source src="Wildlife/Wildlife.webm" type="video/webm" >
<source src="Wildlife/Wildlife.mp4" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="volume()" type="button">读取或修改媒体的播放音量</button>
<button onclick="muted()" type="button">读取或修改媒体当前的静音状态</button>
JS代码如下:
var myVid=document.getElementById("video");
function volume(){
// 读取或修改媒体的播放音量
myVid.volume = 0.1;
}
function muted() {
//读取或修改媒体当前的静音状态
myVid.muted = true;
}
大家可以使用下,当我点击”读取或修改媒体的播放音量”按钮时候,声音会变的很小,当我点击”读取或修改媒体当前的静音状态”按钮时候,视频完全就没有声音。
###方法
video元素与audio元素有以下四种方法;
play方法:使用play方法来播放媒体,自动将元素的paused属性的值变为false。
pause方法:使用pause方法来暂停播放,自动将元素的paused属性的值变为true。
load方法,使用load方法来重新载入媒体进行播放,自动将元素的playbackRate属性的值变为defaultPlaybackRate属性的值,自动将元素的error的值变为null。
下面是播放和暂停的demo如下:
<video id="video" controls width=640 height=360>
<source src="Wildlife/Wildlife.ogv" type="video/ogg; codecs="theora, vorbis""/>
<source src="Wildlife/Wildlife.webm" type="video/webm" >
<source src="Wildlife/Wildlife.mp4" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
JS代码如下:
var myVid=document.getElementById("video");
// 监听视频播放结束的事件
myVid.addEventListener("ended",function(){
alert("播放结束");
},true);
// 发生错误
myVid.addEventListener("error",function(){
switch(myVid.error.code) {
case 1:
alert("视频的下载过程被中止");
break;
case 2:
alert("网络发生故障,视频的下载过程被中止");
break;
case 3:
alert("解码失败");
break;
case 4:
alert("不支持播放的视频格式");
break;
default:
alert("发生未知错误");
}
},false);
function play() {
// 播放视频
myVid.play();
}
function pause() {
// 暂停播放
myVid.pause();
}
如上代码,默认的情况下是不自动播放,当我点击播放按钮时候,就播放,当我点击暂停按钮时候就停止当前的播放。
canPlayType方法:
使用canPlayType方法来测试浏览器是否支持指定的媒体类型,该方法定义如下:
var support = videoElement.canPlayType(type);
videoElement表示页面上的video元素或audio元素,该方法使用一个参数type,该参数的指定方法与source元素的type参数的指定方法相同,用播放文件的MIME类型来指定,可以在指定的字符串中加上表示媒体编码格式的codes参数。
该方法可能返回的值如下所示:
空字符串:表示浏览器不支持此种媒体类型。
maybe: 表示浏览器可能支持此种媒体类型。
probably: 表示浏览器确定支持此种媒体类型。
HTML代码如下:
<video id="video" controls width=640 height=360>
<source src="Wildlife/Wildlife.ogv" type="video/ogg; codecs="theora, vorbis""/>
<source src="Wildlife/Wildlife.webm" type="video/webm" >
<source src="Wildlife/Wildlife.mp4" type="video/mp4">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick="canPlayType()">canPlayType方法</button>
JS代码如下:
var myVid=document.getElementById("video");
function canPlayType() {
var support = myVid.canPlayType("video/webm");
console.log(support); // maybe
var support = myVid.canPlayType("video/ogg; codecs="theora, vorbis");
console.log(support); // probably
}
事件
事件处理方式
使用video元素或audio元素的事件方式有2种,第一种是监听的方式,使用video元素或audio元素的addEventListener方法来对事件的发生进行监听,该方法定义如下:
videoElement.addEventListener(type,listener,userCapture);
如上的监听方式和我们的JS的监听的方式一样,不做详细介绍,我们来看看第二种事件监听方式是为javascript脚本中常见的获取事件句柄的方式,如下所示:
<video id=”” src=”” onplay=”begin()”></video>
function begin(){}
事件 | 描述 |
---|---|
loadstart | 浏览器开始在网上寻找媒体数据 |
progress | 浏览器正在获取媒体数据 |
suspend | 浏览器暂停获取媒体数据,但是下载过程中并没有正常结束 |
abort | 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的 |
error | 获取媒体数据过程中出错 |
emptied | 暂不考虑,可以网上看 |
stalled | 浏览器尝试获取媒体数据失败 |
play | 即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay |
pause | 播放暂停,当执行了pause方法触发 |
loadedmetadata | 浏览器获取完媒体的时长和字节数 |
loadeddata | 浏览器已加载完毕当前播放位置的媒体数据,准备播放 |
waiting | 可以暂不看 |
playing | 正在播放 |
canplay | 浏览器能够播放媒体,但估计以当前播放速率不能直接将媒体播完,播放期间需要缓冲 |
canplaythrough | 浏览器能够播放媒体,但估计以当前播放速率能将媒体播完,不再需要缓冲 |
seeking | Seeking变为true,表示浏览器正在请求数据 |
seeked | Seeking属性变为false,表面浏览器停止请求数据 |
timeupdate | 当前播放位置发生改变,可能是播放过程中的自然改变,也可能是人为改变,或由于播放不能连续而发生的跳变。 |
ended | 播放结束后停止播放 |
ratechange | DefaultplaybackRate属性或playbackRate属性发生改变 |
durationchange | 播放时长发生改变 |
volumechange | volume属性或muted属性发生改变 |
video标签的属性和方法总结的更多相关文章
- HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
- video标签常用属性及说明
video标签常用属性(在标签内部使用) video常用API属性及方法(API属性是供JS调用的,不在video标签元素中直接使用)
- H5 video标签的属性
35-video标签 video标签的属性 src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标 ...
- HTML插入音频和视频:audio和video标签及其属性
一.上传到第三方网站,然后引入例如视频上传到优酷网,然后得到代码 <iframe height=498 width=510 src='http://player.youku.com/embed/ ...
- Eclipse中获取html jsp 标签的属性提示信息方法
操作方法: windows------preferences----------搜索 html----------找到 html Source这项---------找到 content assist ...
- Html中video的属性和方法大全
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
- HTML5新增video标签及对应属性、API详解
知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
- 如何禁止 iPhone Safari video标签视频自动全屏?
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...
随机推荐
- 在Android项目中引入MuPdf
由于公司手机App要加入一个附件查看功能,需要查看PDF文件,在网上找了许多第三方工具,最后选择了MuPDF. 更多第三方工具可以查看大神总结的:http://www.cnblogs.com/poke ...
- sql server 分页存储过程
----------------------分页存储过程------------------------------------------------------------------------ ...
- 什么是IO流 \ 以及文件输入输出
一.IO流的分类: 流按照操作数据的类型分为两种:字节流:字符流. 1.什么是字节流:读取的是文件的二进制数据,不会对二进制做处理,不会解析成看得懂的数据. 2.什么是字符流:读取的是文件的二进制数据 ...
- Js制作的文字游戏
自己制作的文字游戏.(: <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- Java广度优先爬虫示例(抓取复旦新闻信息)
一.使用的技术 这个爬虫是近半个月前学习爬虫技术的一个小例子,比较简单,怕时间久了会忘,这里简单总结一下.主要用到的外部Jar包有HttpClient4.3.4,HtmlParser2.1,使用的开发 ...
- (二)catalina.bat
startup.bat在最后调用catalina.bat,并且传递了start参数,设置了CATALINA_HOME和CURRENT_DIR俩个临时环境变量.那么catalina.bat都做了什么? ...
- asp.net程序集冲突解决笔记(未能加载文件或程序集"XXXXXXXXX")
先来看张截图.(未能加载文件或程序集”System.Web.Razor“) 先说一下我的情况.(扯蛋的,解决方法还在下面 —> _ < ) 这是 ASP.NET MVC 的东西.老大写了一 ...
- 统一资源定位符URL类
package j2se.core.net.base; import java.io.BufferedReader;import java.io.IOException;import java.io. ...
- JSP目录
JSP目录 课时1 jsp概述和背后原理31:11 课时2 三种jsp的scriptlet语法27:29 课时3 jsp的注释14:00 课时4 JSP4个域对象的作用域3 ...
- PHP标准注释
"php是一门及其容易入门的语言,刚入门的新手不到几分钟的时间可能就会用echo打印出一个hello world !但是他是真正的程序员吗?怎么来定义程序员呢?如果想真正成为一个程序员,那么 ...