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. NPOI之Excel——合并单元格、设置样式、输入公式、设置筛选等

    首先建立一个空白的工作簿用作测试,并在其中建立空白工作表,在表中建立空白行,在行中建立单元格,并填入内容: //建立空白工作簿 IWorkbook workbook = new HSSFWorkboo ...

  2. 转-[WebServer] Windows操作系统下 Tomcat 服务器运行 PHP 的环境配置

    原文 前言: 由于本人在开发和学习过程中需要同时部署 JavaWeb 和 PHP 项目,于是整理了网上的一些相关资料,并结合自己的实际操作,记录于此,以供参考. 一.环境(64bit): 1.操作系统 ...

  3. egg 知识点

    egg 的约定 约定 使用方法 路由对应controller中的方法 举例:router.get('/', controller.home.index);,此时对应app/controller/hom ...

  4. How to Export to Excel

    https://simpleisbetterthancomplex.com/tutorial/2016/07/29/how-to-export-to-excel.html Export data to ...

  5. 利用js获取客户端ip的方法

    1. 通过script标签引入url 比如如下代码: <script type="text/javascript" src="http://pv.sohu.com/ ...

  6. msp430学习笔记-msp430g2553

    C语言例程:http://wenku.baidu.com/link?url=49JzNSvt3m0fRuf8SWTEM8yEw1yzqr4lBR-QbX8FddcmjTVYnDhuR97wB60HNf ...

  7. KMP(字符串匹配)算法

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

  8. SQL 行列转置

    ),),[Score] int) Insert Class union all union all union all union all union all union all union all ...

  9. selenium python选取下拉框中的值

    https://stackoverflow.com/questions/47689936/unable-to-scroll-and-select-desired-year-from-calender- ...

  10. Oracle事务隔离级别处理差异

    Oracle事务隔离是事务读操作不同程度的数据隔离,分为READ_UNCOMMITTED.READ_COMMITTED(默认).SERIALIZABLE. Oracle事务隔离级别SERIALIZAB ...