| [备忘]HTML 5 Video – Tag and Attributes | ||
上一篇:[整理]mysql存储过程实现的无限级分类，前序遍历树---改良版 |
||
| 添加日期：2013/2/1 22:58:54 | 快速返回 返回列表 | 阅读3754次 |
This post is about the basic use of the HTML 5 video-tag and its attributes, the next one will be talking about events, DOM attributes and how to control video via javascript. [Update 8 Dec 2011: Added .webm-codec] A full-blown HTML 5 video-tag looks like this: <video width="320px" height="240px" autobuffer="autobuffer" autoplay="autoplay" loop="loop" controls="controls" poster="/_img/videostill.jpg"> <source src='video.mp4' type='video/mp4; codecs="amp4v.20.8, mp4a.40.2"'> <source src='video.mpg' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'> </video> Or in its shortest variant: <video src="video.mp4"></video> The video attributes: width and height: define the dimensions of the playback-window, if not set the browser tries to use the dimensions from the video. loop: sets the video to play in a loop. autoplay: starts the video immediately. controls: tells the browser to display a set of controls for playback, seeking and volume. Which controls these are and how they look depends on the browser. autobuffer: Automatically start buffering (loading) the video, so it’s first loaded if you start playing. Currently Chrome and Safari ignore this attribute, so the video is being buffered on page load. poster: Here you can supply an image which will be displayed while the movie is not loaded yet. Controls display: Here’s how the different browsers (Mac) in their current version render the video controls: One can of course choose to disable these controls and provide your own ones – more about this in the next post. The source tag: You can use more than one video source to provide the video in different formats (read: codecs). Now the browser plays the first one it’s able to play. Since there is no single video codec all (useful) browser currently can handle this is necessary at the moment. Notice the two types of quotes in this tag: The source tag has two attributes, src and type, and the type is specified in two parts: MIME-type and a codec-definition: src='video.mp4' type='video/mp4; codecs="amp4v.20.8, mp4a.40.2"' Firefox currently only plays ogg/theora, Safari does mpeg/H.264 and Chrome can play both formats. Specifying video codecs The codec specification itself is somewhat complicated, here a short overview which codecs are currently supported and how to specify them: H.264 Simple baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container: type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container: type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"' H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' H.264 ‘High’ profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"' MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container type='video/3gpp; codecs="mp4v.20.8, samr"' Theora video and Vorbis audio in Ogg container type='video/ogg; codecs="theora, vorbis"' Theora video and Speex audio in Ogg container type='video/ogg; codecs="theora, speex"' Dirac video and Vorbis audio in Ogg container type='video/ogg; codecs="dirac, vorbis"' Theora video and Vorbis audio in Matroska container type='video/x-matroska; codecs="theora, vorbis"' Webm format type='video/webm; codecs="vp8, vorbis"' |
||
| 评论 COMMENTS | |
| 没有评论 No Comments. |
