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"); //音量改变
作者:筱桀
链接:https://www.jianshu.com/p/404d01b8e713
转载于:https://www.cnblogs.com/chao202426/p/11026734.html
video标签详解(转载)相关推荐
- 小强的HTML5移动开发之路(14)——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- web前端 --- HTML标签详解
HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...
- HTML marquee标签详解
HTML marquee标签详解 在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动.而我们使用HTML的Marquee语句则可以产生更多的 ...
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
- SEO技巧:Meta标签详解
网页设计:Meta标签详解 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...
- java foreach标签_Java中Velocity foreach循环标签详解
Java中Velocity foreach循环标签详解 Java Velocity中foreach循环可以很容易的遍历数组或者集合. 定义 #foreach( $elem in $allElems) ...
- 网页设计:Meta标签详解
网页设计:Meta标签详解 很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 您的 ...
- html中的mata标签详解
总是有很多朋友问我<meta name="author" content"xxxxx"><meta http-equiv="xx&q ...
最新文章
- ProxyError: Conda cannot proceed due to an error in your proxy configuration
- 关于如何发现忠诚的下属的讨论
- python语言编程入门先学什么-自学编程入门,先学什么语言好?
- Python教程:如何将list嵌套的list的[]去掉
- 我遇到的Quartus II警告及原因——持续更新
- 领域建模——架构设计的第一步(下)
- 【JS基础】异步和单线程
- C/C++中函数指针的含义(转)
- Java垃圾回收器的工作原理
- 你必须知道:localStorage、sessionStorage 和 Cookie 区别在什么地方
- WPF中radiobutton 的 data binding方法
- mysql 单例模式_php基于单例模式封装mysql类完整实例
- conficker(conficker病毒感染后会怎么样)
- css背景图片不显示原因,excel 背景图片(css设置背景图片不显示问题)
- 用js计时器写倒计时
- Web前端人员如何提升能力 提高效率有哪些方法
- 基于安卓Android的移动医疗终端管理系统
- HTTP Error 503错误
- 教你写能被舒服舒服又舒服地调用的iOS库
- 湖北武汉劳务员证书劳务人员实名制的难点分析建筑七大员培训
热门文章
- Microsoft SQL Server Query Processor Internals and Architecture
- cocos2dx 开发成长之路 004
- androidpn环境搭建
- C#.NET分别以GET和POST方式抓取远程页面
- C# winform程序运行在XP
- 阿里开源框架Jarslink1.6.1新特性
- 一个Http请求的流程
- 16. Use the same form in correspondng uses of new and delete
- php 修改文件所有者,PHP 改变文件的所有者
- php 微信公众 验证失败,微信公众平台token验证失败