HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性
- src :视频的属性
- poster:视频封面,没有播放时显示的图片
- preload:预加载
- autoplay:自动播放
- loop:循环播放
- controls:浏览器自带的控制条
- width:视频宽度
- height:视频高度
html 代码
<video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"></video> //audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象
获取video对象
Media = document.getElementById("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段区域的结束位置
//相关事件
var eventTester = function(e){Media.addEventListener(e,function(){console.log((new Date()).getTime(),e)},false);}
- eventTester("loadstart"); //客户端开始请求数据
- eventTester("progress"); //客户端正在请求数据
- eventTester("suspend"); //延迟下载
- eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
- 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"); //音量改变
原文链接:http://www.jianshu.com/p/404d01b8e713/
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
HTML5的Video标签的属性,方法和事件汇总相关推荐
- html5的vidoe标签,HTML5的Video标签的属性,方法和事件
大多数的视频通过插件(例如flash)来播放,然而并非所有的浏览器都支持此类插件.HTML5规定了一种通过video来包含视频的标准方法.但是IE8及以下版本不支持video. HTML5的video ...
- vue3-video-play视频组件的使用(一)——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
- HTML5新增的video标签,HTML5中video标签的使用方法
HTML5中video标签的使用方法 发布时间:2020-08-27 11:33:56 来源:亿速云 阅读:100 作者:小新 这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...
- php video标签使用方法,HTML_HTML5 video标签(播放器)学习笔记(一):使用入门,近有在学习html5中video标签(播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
- 如何使用html5的video标签,关于html5 video标签的使用方法
关于html5 video标签的使用方法 发布时间:2020-07-23 16:39:31 来源:亿速云 阅读:92 作者:清晨 小编给大家分享一下关于html5 video标签的使用方法,希望大家阅 ...
- 关于html5的video标签不能播放视频的问题及解决方法
最近实习过程中遇到了音频视频流的格式问题,进行了一些学习和总结. 问题背景 使用html5中的 video 标签去播放视频,但是发现有的flv/mp4格式的视频可以播放,有的flv/mp4格式的视频不 ...
- h5禁用浏览器下载视频_【HTML5】video 标签禁用自带的下载按钮
h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 video::-internal-media-controls-download-button { display:n ...
- 直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: HTML5-Video-Player .videoPlayer{ border: ...
- HTML5废弃的标签和属性
HTML5废弃的标签和属性 一.废弃的标签和属性 1.表现性元素 a) basefontb) bigc) centerd) fonte) strikef) tt 2.框架类元素 a) frameb) ...
最新文章
- sphinx+coreseek+php扩展--用php程序实现中文拆词
- 云效云栖大会首发应用交付和项目协作新品,助力企业DevOps到BizDevOps
- 怎么把文件导入python_如何导入其他Python文件?
- Web框架——Flask系列之Flask-SQLAlchemy安装与使用 定义数据模型(八)
- Linux学习笔记第八周七次课(4月3日)
- 【java】窗口中监听器的应用
- Kafka 可视化工具kafkatool简单使用入门
- linux脚本批量解压,Shell中使用tar命令批量解压缩的实现方法
- JS根据城市名称获取所在省份
- 线性代数【13】基,基本向量、坐标系的构建和线性生成空间SPAN (向量线性相关)
- 揭秘:顶级产品经理是如何写产品需求文档(PRD)的
- “革命者”贝壳找房:如何让房产经纪行业进入新大陆?
- 中国科学报:吴文俊的数字之舞
- 群晖设置腾讯云ddns显示认证失败的两种解决办法【实测第二种成功了】
- Merriam-Webster's Vocabulary Builder 学习笔记 Unit 18
- 【博主推荐】大数据可视化大屏(源码下载)
- 思考之——java为什么不能多继承
- 计算机php什么意思,pc什么意思
- M-K趋势检验以及突变检验
- 视频超分:EDVR(EDVR: Video Restoration with Enhanced Deformable Convolutional Networks)
热门文章
- 【Android 插件化】静态分析应用 APK 安装包是否使用了插件化引擎 ( 虚拟化引擎运行特点 | 恶意软件特点 )
- 【错误记录】Flutter 混合开发报错 ( java.nio.file.FileSystemException: xxx/R.jar: 另一个程序正在使用此文件,进程无法访问。 )
- 【错误记录】jar 执行错误 ( java.lang.UnsupportedClassVersionError: Unsupported major.minor version 52.0 )
- 【Android 应用开发】UI绘制流程 ( 生命周期机制 | 布局加载机制 | UI 绘制流程 | 布局测量 | 布局摆放 | 组件绘制 | 瀑布流布局案例 )
- 【问题解决方案】ImportError: No module named 'openpyxl'/‘xlrd’
- 用户 'XXX\SERVERNAME$' 登录失败。 原因: 找不到与提供的名称匹配的登录名。 [客户端: ]...
- jboss 反序列化 getshell
- 机房收费系统-- MDI子窗体显示技巧(续vb.net版)
- Word2003文档打不开怎么办?1分钟帮你解决!
- ajaxfileupload带多个参数上传方法