<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标签详解(转载)相关推荐

  1. 小强的HTML5移动开发之路(14)——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  2. web前端 --- HTML标签详解

    HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...

  3. HTML marquee标签详解

    HTML marquee标签详解 在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动.而我们使用HTML的Marquee语句则可以产生更多的 ...

  4. 前端基础-HTML的的标签详解

    阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...

  5. W3C中meta标签详解

    2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...

  6. SEO技巧:Meta标签详解

    网页设计:Meta标签详解 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...

  7. java foreach标签_Java中Velocity foreach循环标签详解

    Java中Velocity foreach循环标签详解 Java Velocity中foreach循环可以很容易的遍历数组或者集合. 定义 #foreach( $elem in $allElems) ...

  8. 网页设计:Meta标签详解

    网页设计:Meta标签详解 很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...

  9. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 您的 ...

  10. html中的mata标签详解

    总是有很多朋友问我<meta name="author" content"xxxxx"><meta http-equiv="xx&q ...

最新文章

  1. ProxyError: Conda cannot proceed due to an error in your proxy configuration
  2. 关于如何发现忠诚的下属的讨论
  3. python语言编程入门先学什么-自学编程入门,先学什么语言好?
  4. Python教程:如何将list嵌套的list的[]去掉
  5. 我遇到的Quartus II警告及原因——持续更新
  6. 领域建模——架构设计的第一步(下)
  7. 【JS基础】异步和单线程
  8. C/C++中函数指针的含义(转)
  9. Java垃圾回收器的工作原理
  10. 你必须知道:localStorage、sessionStorage 和 Cookie 区别在什么地方
  11. WPF中radiobutton 的 data binding方法
  12. mysql 单例模式_php基于单例模式封装mysql类完整实例
  13. conficker(conficker病毒感染后会怎么样)
  14. css背景图片不显示原因,excel 背景图片(css设置背景图片不显示问题)
  15. 用js计时器写倒计时
  16. Web前端人员如何提升能力 提高效率有哪些方法
  17. 基于安卓Android的移动医疗终端管理系统
  18. HTTP Error 503错误
  19. 教你写能被舒服舒服又舒服地调用的iOS库
  20. 湖北武汉劳务员证书劳务人员实名制的难点分析建筑七大员培训

热门文章

  1. Microsoft SQL Server Query Processor Internals and Architecture
  2. cocos2dx 开发成长之路 004
  3. androidpn环境搭建
  4. C#.NET分别以GET和POST方式抓取远程页面
  5. C# winform程序运行在XP
  6. 阿里开源框架Jarslink1.6.1新特性
  7. 一个Http请求的流程
  8. 16. Use the same form in correspondng uses of new and delete
  9. php 修改文件所有者,PHP 改变文件的所有者
  10. php 微信公众 验证失败,微信公众平台token验证失败