请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Video 查看内容

html5基础教程之video标签

2013-10-6 19:46| 发布者: admin| 查看: 1558| 评论: 0|来自: csdn

摘要: 前言做为一个程序员,无论是前端还是后端,我们都需要不断的更新自己的技术能力,掌握未来的发展趋势。每当一个新的技术出现时,我们要充分调动自己的求知欲,尽可能快的先掌握它,这样才不致被淘汰。这套系列教程是 ...

前言

做为一个程序员,无论是前端还是后端,我们都需要不断的更新自己的技术能力,掌握未来的发展趋势。每当一个新的技术出现时,我们要充分调动自己的求知欲,尽可能快的先掌握它,这样才不致被淘汰。这套系列教程是我一边学,一边记录下来和大家分享的,也不算是教程,因为我也是初学者,所以有什么错误请大家帮我指出来,也希望跟我一样是初学者的同学们一起学习。

简介

在HTML5标签系列教程里,每篇文章会介绍一个HTML5的新标签,我会自己动手做一个小例子来展示它的效果,并解释一些常用的属性和设置。Web在发展,以前的HTML 4.01已经叱咤了13个年头,其中一些标签已经不再适用于当代的web页面设计标准,我们急需要一套更高效、更简洁,更符合现代页面设计的标准,就这样,一个叫做 Web Hypertext Application Technology Working Group (Web 超文本应用技术工作组 - WHATWG) 的组织,提出了HTML5的概念。

开始

今天这个教程我们要一起学的是video标签,用来在网页中显示视频,目的是取代flash,简化代码,并减少服务器消耗以及增强安全性和隐私性。这是第一篇教程,我会先介绍一款非常好用的web应用开发集成环境,Aptana Studio3,它的提示功能非常方便,对HTML和CSS的标签支持的非常多,而且可以显示出哪个属性在哪个浏览器中有效。开发JS也方便调试。它还支持服务器开发语言,如PHP和Python。下载地址:http://www.aptana.com/products/studio3/download

本系列教程参考与引用了以下网站的内容:

http://www.w3schools.com

http://www.w3school.com.cn

http://baike.baidu.com/view/951383.htm

所需工具:任何无格式的文本编辑器均可,如记事本,notepad++等。我在这篇教程用的是Aptana Studio3

所需技术:了解HTML4.01

浏览器:IE9+,Safari, Chrome, Firefox, Opera等支持HTML5的标准浏览器,不支持IE9以下浏览器

示例视频下载:movie2.mp4  movie.ogg

创建项目

打开Aptana Studio 3或者其它文本编辑器。Aptana的界面如下图所示:

基本上和Eclipse一样,因为它本身是Eclipse的一个插件,但是我下载的是完整版,里面已经集成好了Aptana所有的插件。在“Projcect Explorer”的空白区域点右击,选择“New”,在弹出的快捷菜单中,选择”Web Project“。如下图:


然后在弹出的对话框中选择”Default Project“。这个项目中不包含任何文件,我们需要写自己的html文件,因为我们是为了学习HTML5标签,所以最好先不要用自带的HTML5模板来创建项目。


点击下一步,在”project name"中填写项目名称,本例为"video",选择你的默认工作空间,或者服务器htdocs所在文件夹,别忘了文件夹后面要加上“/项目名”。


点“finish”完成项目创建。在新建的项目上右击,选择"New",在弹出的菜单中选择“File”


在弹出的对话框中的“File name”文本框中,填写文件名:“index.html",点Finish。


创建页面

打开刚创建的”index.html“文件,键入如下代码:

[html] 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <title>HTML5 video标签</title>  
  5. </head>  
  6. <body>  
  7.     <video width="320" height="240" controls="controls">  
  8.         <source src="movie/movie2.mp4" type="video/mp4" >示例视频1</source>  
  9.         <source src="movie/movie.ogg" type="video/ogg" >示例视频2</source>  
  10.         您的浏览器不支持video标签  
  11.     </video>  
  12. </body>  
  13. </html>  


下面是在浏览器中运行的效果截图:



<!DOCTYPE HTML>是声明HTML5的标准格式。可以看出,比HTML 4.01和xhtml简单的多了,一个最简单的HTML5文档应该包含以下标签,与HTML 4.01基本一致:

[html] 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>标题</title>  
  5. </head>  
  6.   
  7. <body>  
  8. 内容  
  9. </body>  
  10.   
  11. </html>  

接着,进入正题,我们的”<video>"标签。里面指定了一个”width“和”height“属性。用来指示浏览器应该为这个视频预留多少的空间,如果不指定该项,那么浏览器就不知道该如何为此视频分配多大的位置合适。controlls代表着在网页上浏览视频时,底部的控制条,包括”播放“按钮,”当前播放时间“, ”播放进度“,”总时间“,”音量“(看效果图)。

<source>子标签定义了视频文件的存放地址,此例用的相对路径。需要在video项目下新建一个文件夹,名字为“movie”,然后把视频复制进去。在“src”属性中添加视频文件的路径,type表示该文件的MIME-TYPE由于浏览器对视频格式支持不现,具体如下表:

BrowserMP4WebMOgg
Internet Explorer 9YESNONO
Firefox 4.0NOYESYES
Google Chrome 6YESYESYES
Apple Safari 5YESNONO
Opera 10.6NOYESYES

例如:IE支持MP4格式,而Firefox不支持。我在代码中定义了两个不同的视频文件(注意,浏览该页面时,只能播放一个视频文件,<video>标签不存在“播放列表”这一选项,要想实现此功能,要用Javascript实现),一个是movie2.mp4,type为“video/mp4”,一个是movie.ogg,type为"video/ogg",目的是为了测试浏览器对视频格式的支持。在IE9中打开网页,会看到下图:



在Firefox中打开,会看到下图:


如果我删除”ogg“格式的标签,Firefox就会显示不支持的文件格式:



再下面一句话”您的浏览器不支持video标签“,是在用户浏览器不支持<video>标签的情况下所要显示的提示文字。到现在,一个基本的”<video>“标签的使用就结束了。下面给出了一些”<video>“标签的一些属性的解释。


属性简介


video:

属性取值描述
autoplayNewautoplay页面加载后,且视频已缓冲完毕,则立即开始播放
controlsNewcontrols视频控制器是否显示,如(播放/暂停按钮)
heightNew像素值设置播放器的高度
loopNewloop循环播放该视频
mutedNewmuted视频播放时是否静音
posterNewURL视频缓冲时或播放结束后,播放器用一个图片来替代视频内容
preloadNewauto
metadata
none
定义当页面加载完成后,视频是如何加载。auto自动加载整个视频,metadata只加载元数据,none不加载视频
srcNewURL视频文件URL地址
widthNewpixels播放器宽度

子标签 source:

属性取值描述
mediaNewmedia_query指定媒体类型
srcNewURL指定媒体文件URL地址
typeNewMIME_type指定媒体资源的MIME TYPE

总结

在HTML5的页面中加载视频方便了许多,但是对于各浏览器所支持的文件格式还不完善,而且不能支持多个视频文件播放,没有播放列表功能,但是这可以用Javascript来实现。希望<video>标签在以后能支持更多的视频文件类型。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-25 07:45 , Processed in 0.090818 second(s), 26 queries .

返回顶部