【阅读】《head first html5》第八章——不再是父辈的老电视实际上就是video标签啦

  • 可以使用<video>元素和一些简单的属性播放视频
  • autoplay属性页面加载的时候就开始播放,不过只应在适当的情况下使用(如果用户点到这个页面的时候不是为了看视频,视频只是作为一个辅助的时候要慎用)
  • controls属性会使浏览器提供一组播放控件
  • 不同的浏览器提供的控件的外观有所不同
  • 可以用poster属性提供你自己的海报图像
  • src属性包含好播放的视频URL
  • 对于视频和音频格式有很多“标准”
  • 3中常见的格式包括WebM、MP4/H.264和Ogg/Theora
  • 要了解你的观众,从而知道需要提供哪些格式
  • 使用<source>标记来指定候选的视频格式
  • 在<source>标记中使用完全限定类型可以节省浏览器的工作和时间
  • 可以继续支持其他视频框架,如Flash,只需在video元素中增加一个作为后路的<object>标记
  • 视频对象提供了一组丰富的属性方法和事件
  • 视频支持播放、暂停、加载、循环和静音方法属性来控制视频的播放
  • 可以利用ended事件了解视频播放何时结束(例如,来实现一个播放列表,当一旦ended的时候播放下一个视频)
  • 可以用canPlayType通过编程询问视频对象能不能播放某种格式video.canPlayType("video/mp4")
  • canPlayType方法可能返回空串(不支持这种格式)、maybe(可能可以播放这种格式)、或者probably(浏览器对播放这种格式很有信心)
  • 画布可以作为一个scratch缓冲区,在将视频复制到显示表面之前先对视频进行处理(甚至可以精确到每一个像素的处理,我有一个小demo在blog中)
  • 可以使用setTimeout处理程序来处理视频帧。尽管没有直接链到视频的每一帧,但这是目前最好的方法
  • 可以使用一个url作为视频源来播放网络视频
  • 有些浏览器对视频有一个同源策略,要求从源页面同样的来源提供视频
  • 关于视频很有可能会出现错误,特别是涉及网络时
  • 利用error事件,可以在视频获取、解码或播放过程中出现错误通知一个处理程序
  • video元素依赖于渐进下载的视频。目前对与流式视频还没有html5的标准(2012年),不过标准委员会正在寻求基于http的流式解决方
  • 目前对于保护通过video元素分发的视频没有标准的方法

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码