HTML5多媒体组件的使用——第一部分：视频

毫无疑问，关于HTML5的一个最受欢迎的以及谈论最多的特性是其在不借助诸如Flash Player等第三方插件的情况下，直接在你的网页上嵌入视频组件的能力。

浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下，在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性，传输HTML5视频的能力就显得尤为重要了。

这篇教程主要向你介绍video元素及其属性，以及它所支持的不同的视频类型。这是这一系列三篇教程中的第一篇，主要涵盖了video（标签），audio标签以及这两种标签使用的自定义控制等方面的内容。

视频服务：两项技术的快速比较

 

如果你使用Flash Player创建一个在网站上播放的简单的MP4视频，你可能会用到下面的代码：

 

 



    

  1. <object type="application/x-shockwave-flash" 
    2. 

  2. data="player.swf?videoUrl=myVideo.mp4&autoPlay=true" height="210" width="300"> 
    3. 

  3. <param name="movie" value="player.swf?videoUrl=myVideo.mp4&autoPlay=true"> 
    4. 

  4. </object> 
    5. 



 


如果使用的是HTML5，你可以使用以下代码：


 


 




    

  1. <video src="myVideo.mp4" controls autoplay width="300" height="210"></video> 
    2. 



 


当然，这个HTML5示例是极端简化了的，但是它所实现的功能是一样的，你也可以看出这是多么的简单。


 


视频编码解码器


 


视频编码解码器是一款可以对特定文件格式的视频进行编码或解码的软件。虽然HTML5标准最初强制支持Theora Ogg视频编码解码器，但在受到Apple和Nokia的反对之后，这个要求就从标准中去除掉了。


令人遗憾的是，这就意味着不同的浏览器支持不同的编码解码器，这听起来确实让人痛苦啊。但最近情况有所改善，你只需要（向不同的浏览器）提供两种不 同格式的视频内容：向Safari和Internet Explorer 9提供MP4/H.264格式视频，向Firefox，Chrome和Opera提供WebM格式视频。Firefox也支持Theora Ogg，但在版本4之后就开始支持WebM格式了。


当然，也有一种为你的视频内容定义不止一个的视频文件的方法，这个我在稍后就会讲到。


 


video标签


 


你在向你的网页上嵌入视频时用到的video元素，包含了几种不同的属性，在表1中列出了其中几项。


表1. video标签属性






属性
描述




src
提供视频文件的URL地址。




autoplay
表明如果可能，网页上的视频应该自动播放。




controls
告知浏览器显示默认视频控制设置。




muted
设置视频的初始音频状态为静音 （此属性目前还不为任何浏览器所支持）




loop
表明视频应该连续不断的循环播放 （Firefox浏览器目前暂不支持这一属性）




poster
设置显示默认图片，而不是视频的第一帧。




width
指定video元素宽度的像素值。




height
指定video元素高度的像素值。




preload
向浏览器提示视频预加载状态。有三种可能的取值：

            
 


    

  • none: 不执行任何的预加载
    • 

  • metadata: 只加载视频的元数据，例如持续时间
    • 

  • auto: 让浏览器自行决定（默认的）
    • 









例如，如果你想视频自动播放，由浏览器提供控制，你只需要使用如下代码：


 


 




    

  1. <video src="myVideo.mp4" autoplay controls></video> 
    2. 



 


source标签


 


前面部分的实例中只用到了一个视频文件，使用一种MP4格式。那么你又会如何着手去处理WebM格式视频文件呢？


这就是source元素出现的背景（由来）。一个video元素（标签）可以包含任意数目的source元素（标签），使得你可以为同一个视频指定不同的源。


source标签的使用


source元素包含了表2所示的三个属性。


 


表2. source标签属性






Attribute
Description




src
视频源的URL地址。




type
视频源的类型，例如video/mp4 or video/webm等。 实际使用的编码解码器也可以在这个字符串中指定。




media
视频的预期媒体类型Specified using 指定CSS3 Media Queries，这一属性使你能够为掌上设备指定不同的视频（例如指定尺寸更小，分辨率更低的视频）。






 


要在同一视频中指定MP4和WebM源，你可以使用以下代码：


 


 




    

  1. <video autoplay controls>  
    2. 

  2. <source src="myVideo.mp4" type="video/mp4">  
    3. 

  3. <source src="myVideo.webm" type="video/webm">  
    4. 

  4. </video> 
    5. 



 


当浏览器试图播放视频时，它会逐一核查视频来源列表，直到找到可以播放的视频。因此，由于Firefox不能播放MP4格式文件，它会跳过MP4格式源文件，但它可以流畅的播放WebM格式源文件。


注意，在前面的实例中，由于source标签使用了中的src属性，我把video标签中的src属性移除掉了。如果你在video标签中指定了src属性，它就会覆盖（掉）source标签中的所有src属性。


指定编码解码器


如果你想的话，你可以指定用以编码视频文件的确切的编码解码器。这可以帮助浏览器确定能否播放这一视频。由于很多时候你并不确定真正使用的是哪种编码解码器，最好只是提供文件类型，由播放器自身来决定（能不能播放）。


如果你想指定某一编码解码器，你可以使用如下代码：


 


 




    

  1. <video autoplay controls> 
    2. 

  2. <source src="myVideo.mp4" type='video/mp4; codec="mp4a.40.2"'>  
    3. 

  3. <source src="myVideo.webm" type='video/webm; codec="vp8"'> 
    4. 

  4. </video> 
    5. 



 


注意编码解码器是如何被添加到type属性的，特别要注意引号的使用以及type和codec之间由分号隔开。在向type属性添加codec是，很容易把引号放错位置，这样就会由于浏览器无法正常解读source元素，使得视频不能正常播放。因此，如果你想明确的指定编码解码器，一定要仔细。


 


回归传统


 


当然，你也要向那些继续使用诸如Internet Explorer 8及更低版本，不支持HTML5的浏览器的用户提供相应的解决方案。


由于浏览器会自动忽略它们不能解读的东西，像Internet Explorer 8那样的传统浏览器就会跳过video和source元素，只视它们为不存在。你可以利用这一特性，寻找另外一种替代的显示你的视频的方法，通过一个简单的下载链接或者是像Flash Player那样的第三方插件。


在前面例子的基础上，你可以按照下述方法添加一个同一视频文件的链接：


 


 




    

  1. <video autoplay controls>  
    2. 

  2. <source src="myVideo.mp4" type="video/mp4">  
    3. 

  3. <source src="myVideo.webm" type="video/webm">  
    4. 

  4. <a href="myVideo.mp4">Download the video</a>  
    5. 

  5. </video> 
    6. 



 


传统的浏览器将会只显示视频文件下载链接。


添加对Flash Player插件的支持也同样很简单：


 


 




    

  1. <video autoplay controls>  
    2. 

  2. <source src="myVideo.mp4" type="video/mp4">  
    3. 

  3. <source src="myVideo.webm" type="video/webm">  
    4. 

  4. <object type="application/x-shockwave-flash" data="player.swf?videoUrl=myVideo.mp4&autoPlay=true">  
    5. 

  5. <param name="movie" value="player.swf?videoUrl=mVideo.mp4&autoPlay=true">  
    6. 

  6. </object>  
    7. 

  7. <a href="myVideo.mp4">Download the video</a>  
    8. 

  8. </video> 
    9. 



 


在上面这个例子中，像Internet Explorer 8那样版本较老的浏览器就会在Flash Player中显示视频（如果系统中装有Flash Player），视频的下载链接也会显示。通过提供下载链接以及退回到使用Flash Player等方法，你向那些没有安装Flash Player的用户提供了通过下载视频，然后在电脑上观看的视频访问方法。


 


数字版权管理


 


如果你担心其他人可以自由下载，分享你的视频，HTML5视频可能就不是你想要的。不管你使用的是这篇文章中讲到的哪种方法，你都向其 他用户提供了你的视频文件的直接URL地址，用户可以自由下载你的视频文件。目前使用的HTML5还不能防止这类事件的发生，在将来的某个时候可能在 HTML5中会出现处理数据版权管理（DRM）的规范的方法，但目前还没有。


想了解更多的关于HTML5和DRM的信息，请参阅W3C’s HTML FAQs on this topic。


 


视频字幕


 


关于HTML5视频字幕的相关规定最初是HTML5标准的一部分。定义一种WebSRT文件格式，这种格式可以通过使用通常的SRT文件格式被用来指定视频字幕。


稍后重命名为WebVTT（网页视频文本轨道），字幕标准源于HTML5标准，然后自己成为一个标准体系。


WebVTT文件格式


WebVTT文件是一个特殊格式化的文本文件，其文件扩展名为.vtt。文件本身必须是UTF-8编码的，并以type/vtt MIME类型标记。这一类型文件必须在顶端以WebVTTr），新的一行（n），或者是新的一行之后回车（rn）结束。


这类文件中包含许多的cue，用以指定文本和视频文件中字幕的时间定位。


其基本格式如下：


 


WEBVTT [unique-cue-identifier] [hh]mm:ss.msmsms --> [hh]mm:ss.msmsms [cue settings] Subtitle text 1 [Subtitle text 2] ...


 


（代码中）unique-cue-identifer字符串是可有可无的。它是帮助确定文件中cue的简单字符串。cue定时以一种简单的格式给出，小时（hour）部分可有可无。每一个cue都可以有若干的cue设置，用于文字的对齐和定位。这些在下面将有更详细的介绍。接下来就是字幕的文字部分了，可以在同一行显示，也可以多行显示。


视频文件中个别的cue可以通过这种方式定位不同的时间，通过另起一行分隔每一个cue块。


下面是一个简短的例子：


 


WEBVTT 1 00:00:10.500 --> 00:00:13.000 Elephant's Dream 2 00:00:15.000 --> 00:00:18.000 At the left we can see...


 


你可以使用cue设置来设置视频中显示的字幕文字的位置和对齐方式。其中包含了五种这方面的设置，如表3所示。


表 3. Cue设置






Cue设置
描述




D:vertical | vertical-lr
文本方向：竖直从左到右或是竖直从右到左。




L:value
行位置，以百分比值表示还是以特定的行号表示。




A:start | middle | end
相对于行的文本对齐方式。




T:value
文本位置，以百分比形式表示，相对于视频画面。




S:value
文字大小，以百分比表示。






例如，要把文字定位于行的末端，到视频画面顶端10%的位置，你就会用到下述的cue设置：


 


2 00:00:15.000 --> 00:00:18.000 A:end L:10% At the left we can see...


 


你现在了解了如何通过这种方式创建WebVTT文件，为整个视频添加字幕。


track标签


你可能会很想知道WebVTT文件是如何被关联到你的视频中去。答案就是track标签。这个标签也被引入到了HTML5中，使得你可以为诸如video标签的媒体元素指定外源的文本轨道。track标签的属性详见表4。


表 4. track标签属性






属性
描述




kind
用于track定义的内容类型。可以是下面几种取值之一：subtitles，captions，descriptions，chapters，metadata。




src
文本轨道的URL地址，这里指的是WebVTT文件。




srclang
文本轨道资料的语言。




label
文本轨道的用户可读标签。




default
如果存在，表明这是默认文本轨道。






例如，假设你想把名为english-subtitles.vtt的WebVTT文件加载到上述的视频示例中去。你可以使用下述代码来实现：


 


 




    

  1. <video autoplay controls> 
    2. 

  2. <source src="myVideo.mp4" type="video/mp4"> 
    3. 

  3. <source src="myVideo.webm" type="video/webm"> 
    4. 

  4. <track src="english-subtitles.vtt" kind="subtitles" srclang="en" label="English subtitles"> 
    5. 

  5. </video> 
    6. 



 


上述代码就把带有英语字幕的WebVTT文件绑定在了你的视频上。当然，在video元素中，你可以使用多个track元素。你可以使用（track元素的）srclang属性指定多种语言的WebVTT文件，实现向视频添加多语言字幕支持。（然后，如果用户的参数设置中并没有指明更为合适的轨迹，default属性就可以被用于追踪默认的轨迹）


浏览器支持


不幸的是，到目前为止，还没有哪一款浏览器直接支持WebVTT，但很多的有效的JavaScript资料库使你可以使用WebVTT文件格式，并为你的视频提供字幕，包括：


    

  • Playr
    • 

  • LeanBack Player
    • 

  • Captionator(CaptionCrunch版本)
    • 

  • MediaElement.js
    • 



所有这些解决措施都支持视频字幕，有些还会提供一些额外的特性。浏览器也开始添加这方面的支持，Safari和Firefox在这方面取得了一些进 展，Microsoft最近也推出了关于WebVTT的演示活动，像我们展示供应商对不久的将来将会发展起来的WebVTT支持的严肃态度。


 


下一步阅读方向


 


你已经看到了，在你的网页上添加HTML5视频，以及为传统浏览器用户提供使用Flash Player播放视频内容的复古的解决方法是多么的简单。尽管功能很强大，但由于缺乏DRM（数字版权管理）性能，HTML5视频目前并不适于那些想要保 护视频内容的用户使用。同时你也看到了，你在将来如何向你的视频添加字幕，以及你现在如何通过JavaScript资料库实现这一功能。


在这一系列教程中的第二部分内容中，我主要讲解了HTML5的audio元素，在第三部分内容中，你将会学到更多的关于HTML5多媒体元素自定义控制方面的内容。


以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索文件

                    ，                视频

                    ，                video标签

                    ，                浏览器

                    ，                标签

                    ，                解码器

                    ，                属性

                    ，                html5视频video

                                    添加文件属性标签

                                    ，以便于您获取更多的相关知识。
				


				
时间： 2024-11-02 04:08:41

		
		


		


	

	
	

		


		
HTML5多媒体组件的使用——第一部分：视频的相关文章


								

		

			

                HTML5多媒体组件的使用——第二部分：音频
			

		

		

									

				在这个"使用HTML5组件工作"三部曲的第一部分中,我主要讲解了有关用HTML5在网页中嵌入视频的内容.当然,大部分视频中包含了音频,所以如果你想把音频文件嵌入到你的网页中,同样用HTML5能够很容易地实现. 在这篇教程中,我会讲解audio元素,它的属性,以及HTML5能够使用的不同类型的音频文件.许多在第一部分中提及 的视频概念和技术,同样适用于音频.所以如果你已经阅读过第一部分,你会注意到在第二部分中有一些相似之处.如果你还没有读过第一部分,并且你只对 HTML5音频感兴趣,那么			

		

	

				

		

			

                HTML5多媒体组件的使用——第三部分：自定义控件
			

		

		

									

				这是关于HTML5的系列教程的第三部分(共3部分).在第一部分和第二部分,讲到了 video 和 audio 元素,简短的展示了如何给这些元素添加 controls 属性,以此来给浏览器的媒体(media)元素设置默认值.如果已试过,那应该注意到了各个浏览器的默认外观并不一样. 如果你希望你的媒体元素在各浏览器下有相同的样式,就可以使用HTML5媒体元素的方便的API.你可以使用标准的HTML和CSS来控制媒体的外观, 并用 media元素的API来控制 audio 和 video 元素.  			

		

	

				

		

			

                Html5多媒体相关的API－－-video
			

		

		

									

				在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的音频数据. 我们先来看看video元素的相关知识点. 一:HTML5中的video标签支持3种常用的视频格式: 1.Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件: 2.MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件: 3.WebM = 带有VP8 视频编码和Vorbis 音频编码			

		

	

				

		

			

                HTML5树组件延迟加载技术实现
			

		

		

									

				HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的等待时间,让页面的加载更加流畅,增强用户体验. 进入正题,今天用来做演示的Demo是,客户端请求服务器读取系统文件目录结构,通过HT for Web的HTML5树组件显示系统文件目录结构. 首先,我们先来设计下服务器,这次Demo的服务器采用Node.js,用到了Node.js的express.so			

		

	

				

		

			

                《HTML5多媒体应用开发》——1.3　主要的HTML5结构化元素
			

		

		

									

				1.3 主要的HTML5结构化元素 本书讨论的任何HTML5多媒体元素和API自然都需要编写HTML标记.你当然可以使用HTML 4.01标记(但是你必须使用本小节提到的HTML5 DOCTYPE元素),但是因为本书是关于HTML5多媒体的,对你来说使用HTML5标记更有意义.本书和网站上的所有例子都使用HTML5标记. 下面,让我们从组成HTML5文档的主要结构化元素的简单介绍开始. 1.3.1 DOCTYPE和Charset 和任何HTML文档一样,你必须用一个DOCTYPE作为HTML5文			

		

	

				

		

			

                《HTML5多媒体应用开发》——导读
			

		

		

									

				https://yqfile.alicdn.com/8137aea0012e7bc3400792be10a2b542398c0406.png" > 前言无论是Web开发人员还是设计人员,或者仅仅是对自己的网站进行维护的人员,都知道Web总是在变化,用于构造网站的工具和方法也一直在发展.就像撒哈拉大沙漠中的沙丘一样,它们一直都在移动.幸运的是,移动的方向通常是向前的.Web技术目前转移到了HTML5-定义和构建网页语言的最新版本.它已经成为向网页中添加多媒体的一个更简捷的方法. 本书的目标是			

		

	

				

		

			

                三天学会HTML5 ——多媒体元素的使用
			

		

		

									

				目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息      多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频触手可及,在之前实现这些功能对开发人员来说可能非常痛苦,必须依赖Object 标签,调用第三方软件来加载,如Flash等,如果有些设备不支持Flash,我们对此就束手无策了.但是HTML5的出现让多媒体网页开发变得异常简单,也形成了新的标准.   1			

		

	

				

		

			

                js+HTML5基于过滤器从摄像头中捕获视频的方法
			

		

		

									

				  本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法.分享给大家供大家参考.具体如下: index.html页面: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="warning"> <h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2> </div>			

		

	

				

		

			

                jsp-请问JSP开发中多媒体网站，上传的视频是如果做到视频缩影的？
			

		

		

									

				问题描述 请问JSP开发中多媒体网站,上传的视频是如果做到视频缩影的? 如题,请问JSP开发中多媒体网站,上传的视频是如果做到视频缩影的? 解决方案 调ffmpeg 获取视频关键帧,作为缩略图 解决方案二: 缩影是什么意思?是压缩么,如果是的话用h.264编码压缩 解决方案三: 用过一个叫CK Player的一个插件,网页视频播放器,挺好用的可以去看看 解决方案四: 上传的视频是如果做到视频缩影 不懂也问问