HTML 5 Video标签详解

分享到:

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。

下例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。

实例

为视频创建简单的播放/暂停以及调整尺寸控件:




Your browser does not support HTML5 video. var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=580; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=480; }

上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。

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 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。

昵    称:
验证码:

相关文档:

  • TWaver HTML5之树形布局
    转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没有这样的感觉,一天不碰电脑,总觉得生活少点什么。今天是春节后...
  • Html5新标签解释及用法
    HTML5是一个新的网络标准,目标在于取代现有的HTML4.01,XHTML1.0andDOMLevel2HTML标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服...
  • 22个常见HTML5新特性
    1,新DOCTYPE 还在使用那个讨厌的的标准doctype?试试下面这个 <!DOCTYPEHTML> 2.<figure>标签(图元素) <figure> <imgsrc="path/to/imag...
  • html5+js压缩图片上传
    最近在折腾移动站的开发,涉及到了一个手机里面上传图片。于是经过N久的折腾,找到一个插件,用法如下: 1...
  • [转自CocoaChina]创业者的新春礼包—优秀免费资源300+
    创业不易。从想出创意到最终产品上市,你需要既要做好产品开发和设计,又要管理好项目和效率,此外还需要做好业务开发和营销,前...
  • 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
    本文为转载,原文地址:http://www.cnblogs.com/Capricornus/archive/2013/03/26/2982122.html HTML5的语义化标签以及属性,可以让开发者非常方便地实现...
  • HTML5新功能
    1、x-webkit-speech HTML5的Inputtag新提供x-webkit-speech语法,目前只能在Chrome11以后的浏览器上使用,能让我们将语音输入的功能很简单的带到我...
  • html5 web 摇一摇切换歌曲
    1<!DOCTYPEhtml> 2<htmllang="en"> 3<head> 4<metacharset="utf-8"/> 5<metaname="viewport"content="width=device-width,initial-...
  • Hybrid框架UI重构之路:三、工欲善其事,必先利其器
    上文回顾:Hybird框架UI重构之路:二、事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境。 这篇文章将讲述重构时的U...
  • HTML5方向键控制会奔跑的马里奥大叔
    <!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>HTML5会奔跑的马里奥大叔丨石家...
  • 集成代码生成器 SpringMVC+mybatis HTML5 数据库连接池-阿里的 druid
    新增:1.代码生成器,将大大提高开发效率,增删改查的处理类,service层,mybatis的xml,SQL脚本等重复低级的代码将瞬间生成,从此不再...
  • HTML5 canvas 在线画笔绘图工具(二)
    Canvas+Javascript带图标的工具条制作TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton、TColorButton)组成,因为之前我大部分时...
  • 基于HTML5 Canvas生成粒子效果的人物头像
    前面我们分享过一个HTML5Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单。今天我们要再利用HTML5Canvas实现一个粒子效果的人...
  • HTML5摇一摇
    方式一 (function(){ /** *摇一摇 *@authorrubekid */ functionShake(options){ this.init(options); } Shake.prototype={ init:function(options){ this.options=o...
  • HTML-HTML5+CSS3权威指南阅读(三、CSS3)
    不同的浏览器(包括-moz-代表的MozillaFirefox,-ms-代表的MicrosoftInternetExplorer等)厂商在发布正式版本之前之前,试验各自对CSS3新特性的实现,...
  • html5 canvas图片渐变
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <script> window.onload=function() {...
  • HTML5 IE兼容问题
    最近,为公司做产品的时候用到了HTML5,用IE11打开的时候出现了界面乱或者加载js错误的问题。 IE10orIE11:BrowserModeisIE10。DocumentMode:moreth...
  • html5开发之viewport使用
    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,...
  • Html5——视频标签使用
    video标签: 上面的例子使用一个Ogg文件,适用于Firefox、Opera以及Chrome浏览器。要确保适用于Safari浏览器,视频文件必须是MPEG4类型。video...
  • HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)
    兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标签<header>、<section>、<footer>等在IE8以下不会...