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的更多相关文章

  1. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  2. Capturing Audio & Video in HTML5

    使用HTML5抓取 Audio & Video 原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: ...

  3. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

  4. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  5. 使用 video.js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

  6. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  7. HTML5视频播放插件 video.js介绍

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

  8. 移动端 HTML5 <video> 视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

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

    html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...

随机推荐

  1. Android KeyStore Stack Buffer Overflow (CVE-2014-3100)

    /* 本文章由 莫灰灰 编写,转载请注明出处. 作者:莫灰灰    邮箱: minzhenfei@163.com */ 1. KeyStore Service 在Android中,/system/bi ...

  2. C++ Primer 学习笔记_63_重载运算符和转换 --转换和类类型【上】

    重载运算符和转换 --转换与类类型[上] 引言: 在前面我们提到过:能够用一个实參调用的位 unsignedchar 相同范围的值,即:0到255. 这个类能够捕获下溢和上溢错误,因此使用起来比内置u ...

  3. IntelliJ IDEA 发布13版本——创造java奇迹

    IntelliJ IDEA被公认为业界最好的Java开发平台.此次发布的了13版本,更是集合了与Java EE.Android.Spring.Scala和Gradle最新合作与支持. Java EE  ...

  4. postal邮件发送（一）：基本配置

    前言 源码:https://github.com/andrewdavey/postal 文档:http://aboutcode.net/postal/ postal最大好处就是再也不用拼接html发送 ...

  5. 【转】webAPP快速入门

    WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差.同时也比较麻烦.每一次发布 ...

  6. 使用POI 导入excel

    引言:最近一直在接触excel的问题,网页也有很多关于POI解析excel的资料,我也简单的整理了下,有不对地方的还望及时指正,渴望与大家交流并学习. public int importExcel(F ...

  7. 记录OC学习的一点一滴（二）

    NSString 基础练习: 代码: // // main.m // NSStringDemo01 // // Created by Levi on 14-3-14. // Copyright (c) ...

  8. 创建一个js日历（原生JS实现日历）

    前言 方法是有参考网上一些资料的,比如闰年的判断,比如每个月第一天是星期几的判断.不说太多,拆分出一个个函数,希望能描述尽可能的清晰明了. 一,判断闰年 //判断闰年 function runNian ...

  9. Python语言在企业级应用上的十大谬误

    英文原文:https://www.paypal-engineering.com/2014/12/10/10-myths-of-enterprise-python/ 翻译原文:http://www.os ...

  10. 模仿c的字符转整数函数 atoi

    #include<stdio.h> , KInvalid}; int g_nStatus = KValid; long StrToIntCore(char *str,bool minus) ...