码迷,mamicode.com
首页 > Web开发 > 详细

<Video> in HTML5

时间:2015-09-01 16:57:17      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

<Video> in HTML5

标签:

原文地址:http://www.cnblogs.com/crdanding/p/4775972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!