video相关参数、操作和事件
1.参数
video是h5的新特性(虽然新了很多年了),使得枯燥的页面有了很多生机。html代码示例:
<video
id="kingdom-video"
src=""
preload
controls>
</video>
<video width="320" height="240" controls>
<source src="/example/video/movie.mp4" type="video/mp4">
<source src="/example/video/movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
可见,可以直接通过src指定播放媒体的网络路径,也可以使用source标签来进行指定。
常用参数如下:
2.操作
var myVid=document.getElementById("video1"); //获取video 元素
myVideo.play(); //播放视频
myVideo.pause(); //暂停视频
myVideo.width=560; //设置视频宽度
myVideo.height=560; //设置视频高度
全屏:
chrome
document.getElementById('video1').webkitRequestFullScreen()
document.webkitCancelFullScreen();
Firefox
document.getElementById('video1').mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提议
document.getElementById('video1').requestFullscreen();
document.exitFullscreen();
【css伪类】
:fullscreen – 当前全屏化的元素
:fullscreen-ancestor – 所有全屏化元素的祖先元素
3.完整的常用操作、事件
var myVid=document.getElementById("video1");
//播放的速度
myVid.playbackRate = 1
myVid.onloadstart = function(){
console.log(`onloadstart 客户端开始请求数据 `);
}
myVid.ondurationchange=function(){
console.log(`durationchange 资源长度改变 `);
}
myVid.onratechange=function(){
console.log(`onratechange //播放速率改变 `);
}
myVid.onseeking=function(){
console.log(` //seeking 寻找中 点击一个为(缓存)下载的区域`);
}
myVid.onseeked=function(){
console.log(` //seeked 寻找完毕 `);
}
myVid.onplay=function(){
console.log(`开始播放时触发 `);
}
myVid.onwaiting=function(){
console.log(`播放由于下一帧数据未获取到导致播放停止,但是播放器没有主动预期其停止,仍然在努力的获取数据,简单的说就是在等待下一帧视频数据,暂时还无法播放。 `);
}
myVid.onplaying=function(){
console.log(`真正处于播放的状态,这个时候我们才是真正的在观看视频。 `);
}
myVid.oncanplay=function(){
console.log(`视频播放器已经可以开始播放视频了,但是只是预期可以正常播放,不保证之后的播放不会出现缓冲等待。 `);
}
myVid.onpause=function(){
console.log(`暂停播放时触发 `);
}
myVid.onended=function(){
alert(` //播放结束 loop 的情况下不会触发 `);
}
myVid.onvolumechange=function(){
console.log(`音量改变 `);
}
myVid.onloadedmetadata=function(){
console.log(`获取视频meta信息完毕,这个时候播放器已经获取到了视频时长和视频资源的文件大小。 `);
}
myVid.onloadeddata=function(){
console.log(`"视频播放器第一次完成了当前播放位置的视频渲染。"`);
} myVid.onabort=function(){
console.log(`客户端主动终止下载(不是因为错误引起), `);
} myVid.onerror=function(){
console.log(`请求数据时遇到错误`);
//1.用户终止 2.网络错误 3.解码错误 4.URL无效
alert(myVid.error.code);
} //客户端请求数据
myVid.onprogress=function(){ console.log(`客户端正在请求数据 触发多次,是分段请求的`);
console.log(myVid.buffered);
//0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
console.log(`networkState ${myVid.networkState}`);
// //当前播放的位置,赋值可改变位置 myVid.currentTime = 11 从11秒位置开始播放
console.log(myVid.currentTime);
// //返回当前资源的URL
console.log(myVid.currentSrc); console.log(myVid.videoWidth);
//播放结束 返回true 或 false
console.log(myVid.ended);
//音量大小 为0-1 之间的值
console.log(myVid.volume); //当前资源长度
console.log(myVid.duration);
console.log(myVid.startDate)
// myVid.currentTime = 11
4.监听播放过程
//使用事件监听方式捕捉事件
video.addEventListener("timeupdate",function(){
var timeDisplay;
//用秒数来显示当前播放进度--实测1秒3次
timeDisplay = Math.floor(video.currentTime);
console.log(Math.floor(video.currentTime))
//当视频播放到 4s的时候做处理
if(timeDisplay == 4){
//处理代码
}
},false);
5.扩展(audio)
音频有类似的属性和事件
<audio> 标签属性:
- src:音乐的URL
- preload:预加载
- autoplay:自动播放
- loop:循环播放
- controls:浏览器自带的控制
6.对象获取
//audio可以直接通过new创建对象
Media = new Audio("http://www.abc.com/test.mp3");
//audio和video都可以通过标签获取对象
Media = document.getElementById("media")
7.media方法属性总结
Media方法和属性:HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement
//错误状态
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效 //网络状态
Media.currentSrc; //返回当前资源的URL
Media.src = value; //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
Media.load(); //重新加载src指定的资源
Media.buffered; //返回已缓冲区域,TimeRanges
Media.preload; //none:不预载 metadata:预载资源信息 auto: //准备状态
Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //是否正在seeking //回放状态
Media.currentTime = value; //当前播放的位置,赋值可改变位置
Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
Media.playbackRate = value;//当前播放速度,设置后马上改变
Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停 //控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音 //TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
事件:
eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e);
});
} eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
video相关参数、操作和事件的更多相关文章
- 11g直接路径读、相关参数、10949事件介绍
转载自刘向兵老师:http://www.askmaclean.com/archives/11g-direct-path-read-10949-_small_table_threshold-_seria ...
- 重新想象 Windows 8 Store Apps (70) - 其它: 文件压缩和解压缩, 与 Windows 商店相关的操作, app 与 web, 几个 Core 的应用, 页面的生命周期和程序的生命周期
[源码下载] 重新想象 Windows 8 Store Apps (70) - 其它: 文件压缩和解压缩, 与 Windows 商店相关的操作, app 与 web, 几个 Core 的应用, 页面的 ...
- Oracle buffer cache与相关的latch等待事件
buffer cache与相关的latch等待事件 1.buffer cache 2.latch:cache buffers lru chain 3.latch:cache buffers chain ...
- Monkey相关参数 笔记
Monkey相关参数 笔记 Monkey是Android系统自带的一个命令行工具,可运行在模拟器里或实际设备中. Monkey可以向被测试的应用程序发送伪随机的用户事件流(如按键.触屏.手势等),实 ...
- MySQL复制相关参数详解
MySQL复制相关参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.复制相关系统变量 1>.server_id 是必须设置在master和每个slave上的唯一标 ...
- MySQL8常见客户端和启动相关参数
MySQL8常见客户端和启动相关参数 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL常见的客户端 1>.使用MySQL服务自带的mysql连接工具 2>. ...
- 第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one
jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- MySQL相关参数总结
保留个原文链接,避免被爬虫爬了过去,以便后续更正补充:https://www.cnblogs.com/wy123/p/11273023.html MySQL参数繁多,是一个需要根据具体业务.软硬件环境 ...
随机推荐
- windows创建域共享文件
windows创建域共享文件 windows常见的文件系统: FAT FAT32 NTFS NTFS的特点: 可以对单个文件或文件夹设置权限 支持更大的磁盘容量 支持加密和压缩 活动目录需要NTFS ...
- 织梦5.7sp1最新问题:后台不显示编辑器
1.在后台的“系统基本参数”里修改“站点设置”的“网页主页链接:空”. 2.修改“核心设置”DedeCMS安装目录:空“. 3.试试,问题解决.
- ambari2.6.50 openssl 版本问题:SSLError: Failed to connect. Please check openssl library versions. Openssl error upon host registration
I'm trying to register hostnames in Ambari but getting the error below. We tried to run yum update o ...
- Vault安装、配置、使用
一.环境搭建 官网指导步骤:https://learn.hashicorp.com/vault/#getting-started 1. 下载vault安装文件 2. dev环境启动 ./vault s ...
- JS Bootstrap-DateRangePicker 如何设置默认值为空
DateRangePicker是一款时间范围选择器,界面良好,非常适合短时间范围选择的插件,具体源码可以在http://www.daterangepicker.com/找到 ,但是目前使用中,感觉功能 ...
- ASP.NET的版本?
问题源于这么一本书: <ASP.NET 4 解密(卷1)>,这本书大约是六七年前买的了,根据其名字,它讲述的是ASP.NET 4,那么ASP.NET现在究竟是什么版本?与.NET Fram ...
- 关于.Net mvc 项目在本地vs运行响应时间过长无法访问时,解决方法!
最近可能是刚升级了电脑使用了window10操作系统,总是遇到了一些以前没有遇到过的事情! 今早来到公司本来准备写bug的,但是当我打开vs运行的时候发现今天的电脑响应的时间明显的要比之前打开网页调试 ...
- 网站被k到可以使用关键词搜索到首页优化总结
从今年二月份,刚过完年回到公司,大约一周多过后,网站就被不知名黑客攻击,然后又因为网站标题关键词堆砌导致网站被降权,从此首页不在有我的网站的踪迹,有的只是其他页面的信息,因为刚开始接触SEO,对这一块 ...
- android学习笔记--AlarmManager
AlarmManager称呼为全局定时器,有的称呼为闹钟.其实它的作用和Timer有点相似. 都有两种相似的用法: (1)在指定时长后执行某项操作(2)周期性的执行某项操作 AlarmManager ...
- docker初体验,搭建自用的gitlab服务
一.前言 git在如日中天的版本管理系统,现在如果不是工作在git版本管理系统下,几乎都不好意思给人打招呼.现在就有现成的互联网的git服务器提供给大家使用,例如号称程序的社交网络github. 正好 ...