HTML5 规定了一种通过 video 元素来包含视频的标准方法

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

首先呢，显示视频所需要的是

<video src="movie.ogg" controls="controls">

</video>

control 属性供添加播放、暂停和音量控件。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器会使用第一个可识别的格式：

<video width="320" height="240" controls="controls">

  <source src="img/ogg-19M.ogg" type="video/ogg">

  <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

效果：

<video>标签的属性

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

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

如果使用 "autoplay"，则忽略该属性
src url 要播放的视频的 URL
width pixels 设置视频播放器的宽度

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

调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width

<!DOCTYPE html>

<html>

<body> 

<div style="text-align:center;">

  <button onclick="playPause()">播放/暂停</button>

  <button onclick="makeBig()">大</button>

  <button onclick="makeNormal()">中</button>

  <button onclick="makeSmall()">小</button>

  <br />

  <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" />

    Your browser does not support 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> 

</body>

</html>

 

续Html5的更多相关文章

  1. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  2. html5增强元素--续

    progress元素使用例子 <script> ; function progress_demo() { ) { i++; updateProgress(i); setTimeout(pr ...

  3. HTML5实现文件断点续传

    HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割.前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段 ...

  4. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  5. HTML5服务器推送消息的各种解决办法

    摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在的问题就是,服务器一直采用的是一问一答的机制.这就意味着如 ...

  6. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  7. HTML5 随音乐节奏变化的频谱图动画

    这里将要介绍的HTML5 音频处理接口与Audio标签是不一样的.页面上的Audio标签只是HTML5更语义化的一个表现,而HTML5提供给JavaScript编程用的Audio API则让我们有能力 ...

  8. HTML5 乱记

    HTML5 的文档类型声明可以触发所有具备标准模式的浏览器的标准模式,包括那些对 HTML5 一无所知的浏览器,也就是说,可以在任何网页中都使用 HTML5 文档类型声明 <!DOCTYPE h ...

  9. HTML5 File api 实现断点续传

    目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...

随机推荐

  1. PIE SDK与GeoServer结合说明文档

    1.  GeoServer简介 GeoServer是OpenGIS Web服务器规范的J2EE实现的社区开源项目,利用GeoServer可以方便的发布地图数据,允许用户对特征数据进行更新.删除.插入操 ...

  2. SpringBoot内嵌Tomcat开启APR模式(运行环境为Centos7)

    网上查到的一些springboot内嵌的tomcat开启apr的文章,好像使用的springboot版本较老,在SpringBoot 2.0.4.RELEASE中已经行不通了.自己整理了一下,供参考. ...

  3. Android开发环境搭建步骤-【Android】

    本教程是android开发环境在windows下的安装配置,经本人测试完全正确无误.这个教程是史上最详细的android开发环境搭建教程. 工具/原料 Eclipse 3.7.0.Java Jdk6. ...

  4. lucene关于IndexReader总结

    IndexReader.使用过程中有时会出现document被删除,reader还是原来的reader没有改变,所以使用openifchanged保证, 又因为IndexReader 初始化很耗费资源 ...

  5. Orcale 之子查询

    子查询和连接查询一样,都提供了使用单个查询访问多个表中的数据的方法.子查询在其他查询的基础上,提供一种进一步有效的方式来访问数据. IN 关键字 使用 IN 关键字可以将原表中特定的的值与子查询中返回 ...

  6. 在ubuntu10.10下安装Google谷歌拼音输入法

    安装步骤如下:1.下载文件:sudo wget http://malu.googlecode.com/files/scim-googlepinyin.tar.gz(经测试,这个链接已经失效了,幸好有前 ...

  7. TXSQL：云计算时代数据库核弹头——云+未来峰会开发者专场回顾

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 5月23-24日,以"焕启"为主题的腾讯"云+未来"峰会在广州召开,广东省各级政府机构领导.海内外业 ...

  8. Python基础(1) - 初识Python

    Python 特点: 1)面向对象 2)解释执行 3)跨平台.可移植 4)垃圾回收机制 5)动态数据类型.强类型 6)可扩展.可嵌入 Python可以方便调用C/C++等语言,同时也可以方便的被C/C ...

  9. php.ini配置max_execution_time和FPM配置request_terminate_timeout

    PHP限定脚本执行时长的方式有几种,下面说下php.ini中的max_execution_time和php-fpm.conf中的request_terminate_timeout 1. php.ini ...

  10. WeUI logo专为微信设计的 UI 库 WeUI

    http://www.oschina.net/p/weui?fromerr=FnwHyWAb http://weui.github.io/weui/