HTML5移动开发之路（14）——Video标签详解

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（14）——Video标签详解

一、使用技巧

在HTML5中可以使用<audio>或者<video>标签播放html5媒体，使用方式如下：

[html] view plaincopyprint?

  1. <video src="move.mp4"></video>

video标签中有很多属性，例如controls属性可以控制是否有控制台。

[html] view plaincopyprint?

  1. <video src="move.mp4" controls="controls">
  2. 浏览器不支持HTML5的视频播放功能
  3. </video>

从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用<source>标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。

[html] view plaincopyprint?

  1. <video width="400" controls="controls">
  2. <source src="move.mp4"  type="video/mp4" />
  3. <source src="move.ogg"  type="video/ogg" />
  4. </video>

二、Video标签的属性

video标签支持HTML5中的全局属性和事件属性

特有属性如下：

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

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

大多数浏览器支持的视频方法、属性事件

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

三、从实例中了解Video标签的使用

[html] view plain copy

print?

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <div style="text-align:center;">
  5. <!--定义按钮，并添加事件监听函数-->
  6. <button onclick="playPause()">播放/暂停</button>
  7. <button onclick="makeBig()">大</button>
  8. <button onclick="makeNormal()">中</button>
  9. <button onclick="makeSmall()">小</button>
  10. <br />
  11. <video id="video1" width="420" style="margin-top:15px;">
  12. <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  13. <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
  14. <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />
  15. <p>您的浏览器不支持此HTML5标签</p>
  16. </video>
  17. </div>
  18. <script type="text/javascript">
  19. //得到video标签对象
  20. var myVideo=document.getElementById("video1");
  21. function playPause()
  22. {
  23. if (myVideo.paused)
  24. myVideo.play();
  25. else
  26. myVideo.pause();
  27. }
  28. function makeBig()
  29. {
  30. myVideo.width=560;
  31. }
  32. function makeSmall()
  33. {
  34. myVideo.width=320;
  35. }
  36. function makeNormal()
  37. {
  38. myVideo.width=420;
  39. }
  40. </script>
  41. </body>
  42. </html>

时间： 2024-12-21 10:18:50

HTML5移动开发之路（14）——Video标签详解的相关文章

HTML5移动开发之路（12）——从一个多媒体标签说起 一、视频播放

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(12)--从一个多媒体标签说起 一.视频播放 [html] view plain copy print? <html> <head> <title>多媒体播放</title> </head> <body> <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4&qu

HTML5移动开发之路（17）——HTML5内联SVG

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(17)--HTML5内联SVG 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准. SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改

HTML5移动开发之路（28）—— JavaScript回顾3

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(28)-- JavaScript回顾3 一.基本数据类型 number:数字类型 string:字符串 (注意s小写:string是基本类型) boolean:布尔类型   //前三个都有对应的包装类 null:空类型 undefined:未定义类型 测试一: [html] view plain copy print? <html> <!--基本类型测试--> <head> <

HTML5移动开发之路（45）——汇率计算器【1】

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(45)--汇率计算器[1] 这两天看了<PhoneGap实战>上面有一个汇率计算器的例子,个人觉得比较好,就拿出来和大家分享一下,在接下来的几篇文章中我们来一起完成这个PhoneGap + jQuery mobile的小练习. 一.在DrameWeaver中新建站点,如图: 二.编写汇率计算页 [html] view plain copy print? <!doctype html> <

HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(41)--jqMobi中Side Menu实现(类似人人网) 记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建一个html文件,引入jqMobi的框架,如下: [html] view plain copy print? <!DOCTYPE html> &l

HTML5移动开发之路（15）——HTML5中的音频

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(15)--HTML5中的音频 浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准.现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的.然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦.在HTML5的新标准中规定了一种通过

HTML5移动开发之路（18）——HTML5地理定位

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(18)--HTML5地理定位 在前面的<HTML5移动开发之路(2)--HTML5的新特性>中介绍了关于HTML5的地理定位功能,这一篇我们来详细了解一下怎么使用该功能. HTML5 Geolocation API用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,在使用该功能的时候浏览器会弹出提醒框. 一.地理定位的几种方式 IP地址.GPS.Wifi.GS

HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(43)--JqueryMobile页眉.工具栏和标签栏导航 一.页眉 1.添加页眉和页脚 [html] view plain copy print? <div data-role="header"> <h1>第 1 页</h1> </div> [html] view plain copy print? <div data-role="

HTML5移动开发之路（11）——链接，图片，表格，框架

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(11)--链接,图片,表格,框架 一.HTML是什么? HTML(hypertext mark-uplanguage)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字.图像.视频.声音- HTML只能做静态网页 二.HTML发展历史 html之父-Tim Berners-Lee蒂姆·伯纳斯-李(Tim Berners-Lee)1955年6月8日出生于英国伦敦 关于详细请看:http://b