首页 技术设计 前端 html

前段时间写了一个基于 html5 video 的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对 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"); // 音量改变

Github 视频播放器项目:videoplayer

extend read:
video object
使用 HTML5 视频事件