HTML5 提供了视频播放元素<video>用来显示播放特定格式的视屏。
* <video> 所支持的视屏格式:
Ogg, MPEG4, WebM
*<video> 所支持的阅览器有:
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 。
注释:Internet Explorer 8 以及更早的版本不支持 <video> 标签。
you can test your browser here (http://www.w3school.com.cn/html5/html_5_video.asp) to check whether it supports <video>.
* 对于<video> 的属性,方法以及使用,可以参考 http://www.w3school.com.cn/html5/html_5_video_dom.asp
* <video> 无法改变视频长宽比例播放。例如:视频本身的长宽比是1:1。如果我们将 video 元素的长设为500,宽为250.那么,视频播放出来的效果还是一个1:1的方式,只是长边不足的部分会显示为空白。
* Sample of Video
<!DOCTYPE HTML>
<html>
<body>
<div >
<button onclick=‘fPlayPause()‘> play/pause </button>
<button onclick=‘big()‘ >big</button >
<button onclick=‘medium()‘>medium</button >
<button onclick=‘small()‘ >small</button >
<button onclick=‘playType()‘> can play ogg? </button>
<br/>
<label id=‘show‘></label>
<br/>
<video width="500" height="400" id=‘Video1‘ >
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script type=‘text/javascript‘>
var video=document.getElementById(‘Video1‘);
var showInfo=document.getElementById(‘show‘);
function playType()
{
showInfo.innerHTML=video.canPlayType(‘video/ogg‘);
}
var fPlayPause= function playPause()
{
if(video.paused) video.play();
else video.pause();
}
var big=function big()
{
video.width=700;
}
var small=function small()
{
video.width=300;
}
var medium=function medium()
{
video.width=500;
video.videoHeight=700;
}
</script>
</body>
</html>