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. 如何利用 Chrome 来模拟移动网络来调试 FastAdmin 网站

    如何利用 Chrome 来模拟移动网络来高度 FastAdmin 网站 因为目前大多数都在开发移动类的网页,所以客户端的速度下载速度要也考虑. 虽然都已经 4G 了,但还是要看看在网络质量很差的情况 ...

  2. 20165308 2017-2018-2 《Java程序设计》第三周学习总结

    20165308 2017-2018-2 <Java程序设计>第三周学习总结 知识点 类 构造方法与对象的创建 类与程序的基本结构 参数传值 对象的组合 实力成员与类成员 方法重载 thi ...

  3. plsql远程访问数据库 解决ora-12541：TNS:无监听程序

    今天在windows server 2012上安装了一个oracle 11g的数据库,但是安装 完成以后发现在我的机器上访问数据库出现错误,ora-12541:TNS:无监听程序. 后来查询了很多资料 ...

  4. JS判断字符串是否为空或是否全为空格

    var test = " "; //为空或全部为空格 if (test.match(/^[ ]*$/)) { console.log("all space or empt ...

  5. [转]Ubuntu python-config

    转自:http://manpages.ubuntu.com/manpages/precise/man1/python-config.1.html recise (1) python-config.1. ...

  6. Spring Cloud(Dalston.SR5)--Feign 声明式REST客户端

    Spring Cloud 对 Feign 进行了封装,集成了 Ribbon 并结合 Eureka 可以实现客户端的负载均衡,Spring Cloud 实现的 Feign 客户端类名为 LoadBala ...

  7. Spring Cloud(Dalston.SR5)--Eureka 服务消费

    服务被注册.发布到 Eureka 服务器后,需要有程序去发现他,并且进行调用,称为服务消费,一个服务可能会部署多个实例,调用过程可能涉及负载均衡.服务器查找等问题,这些问题 Netflix 项目已经帮 ...

  8. 禁止用键盘左右箭头，去切换PageControl页签

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  9. git 查看提交的信息diff

    git log --stat git show <hashcode> <filename> git log --pretty=oneline <filename> ...

  10. 胖子哥的大数据之路（10）- 基于Hive构建数据仓库实例

    一.引言 基于Hive+Hadoop模式构建数据仓库,是大数据时代的一个不错的选择,本文以郑商所每日交易行情数据为案例,探讨数据Hive数据导入的操作实例. 二.源数据-每日行情数据 三.建表脚本 C ...