video标签：

上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

preload 属性规定是否在页面加载后载入视频。

实例：

1、

<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
您的浏览器不支持Html5标签 video tag.
</video>
</body>
</html>

2、事件、方法、属性

<div style="text-align: center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<video id="video1" width="420" style="margin-top: 15px">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="/example/html5/mov_bbb.ogg" type="video/ogg">
您的浏览器不支持html5 video 标签
</video>
</div>
<script type="text/javascript">
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
function makeBig() {
myVideo.width = "560";

}
function makeSmall() {
myVideo.width = "320";
}
function makeNormal() {
myVideo.width = "420";
}
</script>

HTML5 <video> - 方法、属性以及事件

下面列出了大多数浏览器支持的视频方法、属性和事件：

方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

Html5——视频标签使用的更多相关文章

  1. HTML5视频标签video

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

  2. android--------WebView实现 Html5 视频标签加载

    自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...

  3. 关于HTML5视频标签的问题

    一.基本 video标签在兼容性上还是比较差的,如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8的(Opera.Mozilla.Chrome),支持H.264的( ...

  4. html5视频标签

    <video width="200" height="200" poster="img/shamo.jpg" src="vi ...

  5. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

  6. html5-8 如何控制html5中的视频标签和音频标签

    html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...

  7. html5-7 html5语义标签和视频

    html5-7  html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...

  8. 使用HTML5视频事件示例

    <!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...

  9. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

随机推荐

  1. 拷贝某个区间（copy，copy_back）

    copy 为outputIterator中的元素赋值而不是产生新的元素,所以outputIterator不能是空的 如要元素安插序列,使用insert成员函数或使用copy搭配insert_itera ...

  2. 通过plsql develop查看建表语句

    右键--查看 右下角 如下显示,找出ddl语句 可以看到索引等

  3. node api 之：Error

    Node.js 中运行的应用程序一般会遇到以下四类错误: 标准的 JavaScript 错误: <EvalError> : 当调用 eval() 失败时抛出. <SyntaxErro ...

  4. jmeter分布式测试的坑

    转 : jmeter分布式测试的坑 有关jmeter分布式测试的环境配置,大概就是那样,但是每次想要进行jmeter分布式测试的时候,总是会有各种奇怪的问题,下面整理了一些可能遇到的坑. 只要错误中出 ...

  5. Java 反射基础

    1.反射概念: Java运行时,动态获得类的信息以及动态调用对象的方法的功能. 在运行时判断任意一个对象所属的类 在运行时构造任意一个类的对象 在运行时判断任意一个类所具有的成员变量和方法 在运行时调 ...

  6. hadoop行业技术创新解决方案

    如今有很多公司都在努力挖掘他们拥有的大量数据,包括结构化.非结构化.半结构化以及二进制数据等,来探索对数据的深入利用. 大多数公司估计他们只分析了已有数据的12%,剩余88%还没有被充分利用.大量的数 ...

  7. 虚拟机怎么发送ctrl+alt+delete组合键

    相信各位It的从业人员都遇到过安装了虚拟机搭建测试环境,可是在使用windows服务器版本操作系统的时候.出现要求发送ctrl+alt+delete组合键,才能登陆操作系统.为此咗嚛提供3个方法给您解 ...

  8. 使用Socket通信--测试叫号

    服务端程序: using System; using System.Net; using System.Net.Sockets; using System.Speech.Synthesis; usin ...

  9. nvm环境配置

    安装nvm curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm insta ...

  10. 黄聪：C#如何Json转字符串；字符串转Json；Newtonsoft.Json(Json.Net)学习笔记（转）

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 下面是Json序列化和反序列化的简单封装: /// & ...