HTML5 4 视频
来源:互联网 发布:收割机无人机知乎 编辑:程序博客网 时间:2024/06/05 22:53
HTML5 4 视频
1 Web站点上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过<video>元素来包含视频的标准方法。
2浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持<video> 元素。
3视频格式与浏览器的支持
当前, <video> 元素支持三种视频格式:MP4, WebM, 和Ogg:
格式
IE 9
Firefox 3.5
Opera 10.5
Chrome 5.0
Safari 3.0
MP4
√
√
√
Ogg
√
√
√
WebM
√
√
√
MP4 = 带有 H.264视频编码和 AAC音频编码的 MPEG 4文件
Ogg = 带有 Theora视频编码和 Vorbis音频编码的 Ogg文件
WebM = 带有 VP8视频编码和 Vorbis音频编码的 WebM文件
4 video元素
<video src="movie.ogg" width="320" height="240" controls="controls">您的浏览器不支持Video标签</video>
注1:control属性供添加播放、暂停和音量控件。包含宽度和高度属性也是不错的主意。
注2:<video>与 </video>之间插入的内容是供不支持 video元素的浏览器显示的。
video 元素允许多个 source元素。
source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4">您的浏览器不支持Video标签</video>
<video> 标签的属性
属性
值
描述
src
url
要播放的视频的 URL。
height
pixels
设置视频播放器的高度。
width
pixels
设置视频播放器的宽度。
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
autoplay
autoplay
如果出现该属性,则视频在就绪后马上播放。
loop
loop
如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload
preload
如果出现该属性,视频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
5 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM事件能够通知您,比方说,<video>元素开始播放、已暂停,已停止,等等
<!DOCTYPE html><html><body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video></div> <script type="text/javascript">var myVideo=document.getElementById("video1"); function playPause(){if (myVideo.paused) myVideo.play();else myVideo.pause();} function makeBig() {myVideo.width=560;} function makeSmall() {myVideo.width=320;} function makeNormal() {myVideo.width=420;}</script> </body></html>
下面列出了大多数浏览器支持的视频方法、属性和事件:
方法
属性
事件
play()
currentSrc
play
pause()
currentTime
pause
load()
videoWidth
progress
canPlayType
videoHeight
error
duration
timeupdate
ended
ended
error
abort
paused
empty
muted
emptied
seeking
waiting
volume
loadedmetadata
height
width
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
- HTML5 4 视频
- html5 视频
- html5视频
- HTML5视频
- HTML5 视频
- HTML5视频
- HTML5视频
- HTML5视频
- HTML5视频
- HTML5 视频
- HTML5初窥4----视频(Video)
- html5 视频播放控件
- HTML5视频发展状况
- html5 video视频标签
- html5 视频学习笔记。。。
- Html5 音频与视频
- 使用 HTML5 视频事件
- HTML5视频标签video
- 我怀念的
- 自定义View圆环进度条
- map表的一些用法
- C++11中std::mutex的使用
- Spring用bean.xml注入对象
- HTML5 4 视频
- 错误处理 ssh connection refused
- css3设置边框圆角border-radius属性
- CSDN机器学习笔记九 支持向量机
- What’s a Good Clickthrough Rate? New Benchmark Data for Google AdWords
- Cannot find module '.tmp/Rx.min.js'
- Unified Memory与unified memory managed详解
- Log4J的配置和使用
- Codeforces Round #304 (Div. 2)-C. Soldier and Cards-简单模拟