<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>
<Video> in HTML5的更多相关文章
- video.js html5 视频播放器
我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...
- Capturing Audio & Video in HTML5
使用HTML5抓取 Audio & Video 原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: ...
- HTML5视频标签video
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- 使用 video.js 开发 HTML5 视频页面
时间 2015-05-13 17:11:58 The GIS Guy 原文 http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- HTML5视频播放插件 video.js介绍
video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git& ...
- 移动端 HTML5 <video> 视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- html5新媒体播放器标签video、audio 与embed、object
html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...
随机推荐
- POJ1320 Street Numbers【佩尔方程】
主题链接: http://poj.org/problem?id=1320 题目大意: 求解两个不相等的正整数N.M(N<M),使得 1 + 2 + - + N = (N+1) + - + M.输 ...
- JAVA学习篇--Java类加载
由来: 与普通程序不同的是,Java程序(class文件)并非本地的可执行程序(解释性语言). 当执行Java程序时.首先执行JVM(Java虚拟机),然后再把Javaclass载入到JVM里头执行, ...
- 为JS字符类型添加trim方法
JS字符串本身并不没有提供常用的trim方法,我们可以通过修改String原形来添加此方法,我们就可以直接调用此方法了: String.prototype.trim = function(){retu ...
- 多数据库下activiti的流程定义缓存问题
我们使用activiti(5.14版本号)作为流程引擎,今天在产品中发现一个问题,某流程的审批记录中, 活动实例表中记录的活动名称(ACT_HI_ACTINST表的ACT_NAME)居然是该流程中不存 ...
- 阻止check事件冒泡
在Datagrid中添加了checkbox,想实现的效果是: 1.点击行中任意位置,该行的复选框变为选中状态,同时该行也获得焦点: 2.点击复选框,复选框打勾,同时该行获取焦点. 要实现功能1,用到d ...
- onsite
领英.脸书面试以及onsite小记(北美) 最近两个月忙于找工作,投了不少简历,比较牛逼的公司里面就领英和脸书理我了,都是同学朋友内推的功劳.没想到自己也比较争气,一路杀到了最后一轮,拿到了两家的 ...
- C#快速随机按行读取大型文本文件
原文:C#快速随机按行读取大型文本文件 下面是我实现的一个数据文件随机读取类,可以随机读取大型文本文件的某一行.在我机器上对一个130MB的文本文件,读取第200000的速度从传统做法的400ms提高 ...
- 赠书《JavaScript高级程序设计（第三版）》5本
本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r ...
- SAX解析XML文件实例代码
import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.List; ...
- FLOYD 求最小环
首先 先介绍一下 FLOYD算法的基本思想 设d[i,j,k]是在只允许经过结点1…k的情况下i到j的最短路长度则它有两种情况(想一想,为什么):最短路经过点k,d[i,j,k]=d[i,k,k- ...