【阅读】《head first html5》第八章——不再是父辈的老电视(实际上就是video标签啦)
2015-07-30 11:07
639 查看
可以使用<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元素分发的视频没有标准的方法
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元素分发的视频没有标准的方法
相关文章推荐
- 【阅读】《head first html5》第七章——秀出你的艺术天分(canvas标签)
- HTML5表单新增功能
- HTML5与phonegap接口对比
- html5 data属性的使用
- HTML5 + SOCKET视频传输
- html5移动开发入门资料
- HTML5_字符集属性
- HTML5_HTMLDocument的变化
- [html5]练习canvas 扔骰子
- HTML5实现摇一摇
- html5实现手机弹窗留言对话框
- html5之canvas进阶
- [html5]离线存储
- 关闭HTML5只能提示(form上新增novalidate)
- html5之创建离线Web应用程序
- html5之ArrayBuffer:类型化数组
- H5场景画报免费制作工具汇总
- Html5教程和素材
- html5之文件和二进制的操作
- HTML5简单绘图