HTML5 视频

视频格式

当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Internet Explorer

Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。

<video> 标签的属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

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  

HTML5 总结-视频-1的更多相关文章

  1. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

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

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

  3. 不完全解决Android微信HTML5 播放视频的问题(不显示控制条,可交互)

    首先你需要知道以下内容: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 这是微信为广告商开放的API,我一直认为只有 ...

  4. Android WebView 总结 —— 使用HTML5播放视频及全屏方案

    在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频. 1.让视频在各个Android版本能够正常播放 在AndroidManif ...

  5. HTML5 Video(视频)

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

  6. 尚硅谷《全套Java、Android、HTML5前端视频》

    尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...

  7. HTML5中音频视频标签使用

    HTML5中音频视频标签使用的最好方式 Html5中提供了<audio> <vedio>元素实现音频视频的引入播放 然而更好的方式

  8. html5音频视频专题

    html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...

  9. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  10. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

随机推荐

  1. 如何使用沉浸式状态栏,让你的app风格更好看

    大家都知道,传统的手机状态栏非黑即白,经常让整个app显得不是那么的好看,如何让状态栏的颜色跟你整个界面的颜色能够融为一体,这是我们一直想要的,现在给大家展示一下: 由图可见,第一张是没有使用沉浸式状 ...

  2. Http请求 post get

    package com.sprucetec.tms.utils; import org.slf4j.Logger;import org.slf4j.LoggerFactory; import java ...

  3. Oracle的TPCC测试,原来也是个作弊的东西...

    http://www.oaktable.net/content/sorted-hash-clusters-rip 根据Jonathan Lewis老先生的测试实例,发觉cluster 的sort功能, ...

  4. POJ 3061 Subsequence(Two Pointers)

    [题目链接] http://poj.org/problem?id=3061 [题目大意] 给出S和一个长度为n的数列,问最短大于等于S的子区间的长度. [题解] 利用双指针获取每一个恰好大于等于S的子 ...

  5. Android发展简单介绍

    Android一词的本义指“机器人”,同一时候也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,号称是首个为移动 ...

  6. POJ3771+Prim

    最小生成树的应用 数据量小. /* Prim */ #include<stdio.h> #include<string.h> #include<stdlib.h> ...

  7. 《Effective C++》:条款48:理解力template 元编程

    Template metaprogramming(TMP,模板元编程)这是写template-based C++规划.编译过程.template metaprogramming随着C++写模板程序,化 ...

  8. Objective-c 内存管理

    与 C 有一点类似,oc  需要使用 alloc 方法申请内存.不同的是,c 直接调用 free 函数来释放内存,而 oc 并不直接调用 dealloc 来释放.整个  oc 都使用对象引用,而且每一 ...

  9. Java调用R——rJava的安装和配置

    rJava是Java通过JRI调用R所要安装的包.配置起来比较麻烦,我参考网上进行配置,使用rJava包中example里面的示例测试,控制台显示: Cannot find JRI native li ...

  10. 数据可视化开源系统(python开发)

    Caravel 是 Airbnb (知名在线房屋短租公司)开源的数据探查与可视化平台(曾用名Panoramix),该工具在可视化.易用性和交互性上非常有特色,用户可以轻松对数据进行可视化分析. 核心功 ...