TP14 视频播放器

1、视频播放器视频播放器 视频格式的简单介绍 HTML5视频标签属性 HTML5视频API控件 制作一个HTML5视频播放器目录HTML5 视频播放事件属性与API控件1、视频格式的简单介绍、视频格式的简单介绍视频格式：视频格式：avi、rmvb、wmv、mpeg4、ogg、webm视频主要有三部分组成：视频、音频、编码格式视频主要有三部分组成：视频、音频、编码格式在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了 HTML5支持的格式：支持的格式：Ogg=

2、 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件开源MPEG4= 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件视频编码：视频编码：H.264、Theora、VP8(google开源开源)音频格式音频格式: ACC、MP3、VorbisHTML5 视频播放事件属性与API控件2、HTML5视频标签视频标签属性属性 浏览器不支持HTML5的视频播放功能 123HTML5 视频播放事件属性与API控件2、HTML5视频标签视频标签属性属性属性属性值值描述描述autoplay

3、autoplay如果出现该属性，则视频在就绪后马上播放。如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频没加载完不播放。建议不使用如果出现该属性，则视频没加载完不播放。建议不使用.如果使用如果使用 autoplay，则忽略该属性。，则忽略该属

4、性。srcurl要播放的视频的要播放的视频的 URL。widthpixels设置视频播放器的宽度。设置视频播放器的宽度。posterImgurl加载等待的画面图片加载等待的画面图片autobufferAutobuffer设置为浏览器缓冲方式，不设置设置为浏览器缓冲方式，不设置autoply才有效才有效HTML5 视频播放事件属性与API控件3、HTML5视频视频API控件控件HTML5 视频播放事件属性与API控件3、HTML5视频视频API控件控件获得video标签，这里是DOM对象var video = document.getElementById(videoID);载入视频：load(

5、) ，播放视频：play() ，暂停：pause() ，快进10秒：currentTime+=10 播放速度增加：playbackRate+ 播放速度增加0.1：playbackRate+=0.1 音量增加：volume+=0.1 静音：muted=true 全屏全屏:webkitEnterFullscreen();:webkitEnterFullscreen(); mozRequestFullScreen(); mozRequestFullScreen();Video的API方法方法方法属性属性事件事件play()currentSrcplaypause()currentTimepauselo

6、ad()videoWidthprogresscanPlayTypevideoHeighterror全屏全屏退出全屏退出全屏Webkit (Safari5.1 /Chrome 15)element.webkitRequestFullScreen();document.webkitCancelFullScreen(); Firefox (works in nightly)element.mozRequestFullScreen();document.mozCancelFullScreen(); W3C 提议element.requestFullscreen();document.exitFullscreen();Audio(音频音频)nHTML5 提供了播放音频文件的标准。n直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏