<Video> in HTML5

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>

时间: 2024-10-13 03:14:28

<Video> in HTML5的相关文章

Capturing Audio &amp; Video in HTML5

使用HTML5抓取 Audio & Video 原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: http://www.html5rocks.com/zh/tutorials/getusermedia/intro/ 让用户通过网络摄像头拍摄自己的快照,可以使用 capture=camera <input type="file" accept="image/*;capt

[HTML5] Video 标签播放及控制视频

Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4 .webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识 不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况: 0x1 在 Video 中嵌入视频 <video src="/movie.mp4" controls="controls"> 你就用这个浏览器有出息吗?

html5声频audio和视频video说明

现在已经掀起了html5热潮,本文来说明下html5声频audio和视频video 在html5中出现了一些新特性: * canvas 元素    * 视频 video 和 声频audio 元素 :    * 对本地离线存储(localStorage,sessionStorage)的支持 :    * 新增特殊内容元素:article.footer.header.nav.section :    * 新增表单控件: calendar.date.time.email.url.search . 今天

如何判断当前浏览器是否支持html5的video标签

如何判断当前浏览器是否支持html5的video标签: html5新增了video标签,用于播放视频,功能非常的强大,但是由于当前很多浏览器还不支持,所以在使用的时候需要判断当前浏览器是否支持此标签,下面就提供一段能够实现此功能的代码,希望能够给需要的朋友带来一定的帮助. 代码如下: //检测是否支持HTML5 function checkVideo() { if(!!document.createElement('video').canPlayType){ var vidTest = docu

HTML5 Video(视频)

HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari

HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output

video 通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件.视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片. 过去(及目前),我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中,但这种方式要求浏览器安装有Flash插件,并支持JavaScript: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="4

html5新媒体播放器标签video、audio 与embed、object

html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是所有的浏览器都支持.video虽然号称可以支持三种媒体类型,但常用的只有mp4. 像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的, 1. video.audio可以看我的另一篇文章https://www.cnblogs.com/jing-tian/p/10930

atitit.html5 vs 原生 app的区别与选择

atitit.html5  vs 原生 app的区别与选择 1. html5的优点 1 1.1. 最大优势::在跨平台(ios苹果,android安卓等) 1 1.2. 开放性 1 1.3. 快速的更新,热更新 2 1.4. 开发成本上 2 1.5. 碎片化 2 2. 原生app 应用的优点 2 2.1. 对游戏等要求性能的app更好 2 2.2. 原生应用最大的优势就是可以访问设备中的所有功能 2 2.3. 对摄像头.电话本,相机,游戏等操作支持的好,对语音,联系人和日历,也支持比较好. 2

video.js播放rtmp

项目中要用到rtmp直播和点播.要求:点播能够调整播放进度 开始用腾讯提供的播放器,老卡,画质差,很多时候播不出来,rtmp点播还不能快进. 后来用Wowza自带的flash rtmp播放器,有源码 尝试修改源码,发现他的前端js和后端flash都没有交互,没写过as,分享大,又太耗时,果断pass... jwplayer rtmp播放好像也是要商业授权,最后选用了video.js 下载地址:https://github.com/videojs/video.js/releases 发现 V6.X