掌握HTML5中的多媒体--视频(video)

翻译 2012年08月06日 01:33:37

除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。

下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同.

Figure 1

1.  <section>

2.      <h1>使用HTML5的video标签播放视频</h1>

3.      <videosrc="video1.mp4">

4.      </video>

5.  </section>

6.  <section>

7.      <h1>使用Flash插件播放视频</h1>

8.      <objecttype="application/x-shockwave-flash"

9.                 data="player.swf"width="290"height="24">

10.        <paramname="movie"value="player.swf">

11.    </object>

12.</section>

那么重要的是什么呢? 这两个示例很简单,也易于实现。因为<视频>标记是一个用来播放媒体的标准, 你不必猜测浏览器是否要安装特定的某个版本插件。这个标准正是HTML之前最为缺少的那部分。

 

HTML5支持的媒体格式

HTML5支持AAC, MP3 和 Ogg Vorbis三种音频格式,以及Ogg Theora, WebM 和MPEG-4三种视频格式.

但并不是所有浏览器都支持所有的格式。如下表:

Figure 2浏览器支持的媒体格式

浏览器

视频格式

音频格式

 

Ogg Theora

H.264

VP8 (WebM)

Ogg Vorbis

MP3

Wav

Internet Explorer

手动安装

9.0

手动安装

No

Yes

No

Mozilla Firefox

3.5

No

4.0

Yes

No

Yes

Google Chrome

3.0

No

6.0

Yes

Yes

Yes

Safari

手动安装

3

手动安装

No

Yes

Yes

Opera

10.50

No

10.60

Yes

No

Yes

 

使用视频标签<video>

在HTML5中播放视频,直接使用<video>标签就可以了, 如下所示:

1. <videosrc="video.mp4"controls/>

src属性 (https://www.w3.org/TR/2011/WD-html5-20110113/video.html#the-source-element) 设备要播放视频的名称(可以多个), control的布尔值用来调整是否显示播放控制栏. 完整的属性列表如下所示:

Figure 3视频相关的属怀

属性

描述

 Muted

Muted

定义的音频的初始状态.目前仅支持muted.

 Crossorigin


定义当前视频是否是一个跨域的项目.

 Mediagroup

ID

将多个视频或音频集合在一起,并结合MediaController实现同步控制.

 Autoplay

Autoplay

如果指定,视频会在准备好(如已取得可播放视频)后自动播放.

 Controls

Controls

添加播放控制及音量控制功能栏.

 Height

Pixels

指定播放器的高度,以pixel为单位.

 Loop

Loop

如果指定,视频将重复播放.

 Poster

url

指定视频的预览图.

 Preload

Preload

如果指定,视频会在加页面加载过程中被加载。当Autoplay被指定时,会被忽略。

 Src

url

目标视频的URL.

 Width

Pixels

指定播放器的宽度,以pixel为单位.

 

下面是一使用了多个属性的示例,也包括一个备用(fallback)的错误信息(当浏览器不支持video标签时显示).

1.  <videosrc="video.mp4"width="320"height="240"autoplaycontrolsloop>

2.      Your browser does not support the video tag.

3.  </video>

 

你也可以使用MIME指定视频的编码格式,如下:

1.       <!-- H.264 Constrained baseline profile video (main and extended video compatible)

2.         level 3 and Low-Complexity AAC audio in MP4 container -->

3.       <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

4.       <!-- H.264 Extended profile video (baseline-compatible) level3 and Low-Complexity

5.         AAC audioin MP4 container -->

6.       <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

 

你也可使用JavaScript来设定这些属性. 如下面的代码示例:

<!—显示控制栏的三种方式-->

<videocontrols>

<videocontrols="">

<videocontrols="controls">

// JavaScript中显示控制栏的两种方式

video.controls = true;

video.setAttribute

       ('controls',

        'controls');

 

如果无法确定目标浏览器是否能支持<video>或者你的视频格式,你最好指定一个回退的信息,以告诉用户为什么没有到期望的内容。如下所示:

1. <videocontrols>

2.     <sourcesrc="video1.mp4"/>

3.     <sourcesrc="video1.ogv"/>

4.     <sourcesrc="video1.webm"/>

5.     <p>This browser does not support HTML5 video</p>

6. </video>

 

如果你要确保视频可以被播放,你可以按照以前的方式加入一个flash的object标签,如下:

1. <videocontrols>

2.     <sourcesrc="video1.mp4"/>

3.     <sourcesrc="video1.ogv"/>

4.     <sourcesrc="video1.webm"/>

5.     <objectdata="videoplayer.swf">

6.         <paramname="flashvars"value="video1.mp4">

7.         您的浏览器对HTML5 Video 和 Flash 都不支持

8.     </object>

9. </video>

 

也可以在JavaScript中使用canPlayType来检测浏览器是否可以播放某个格式的视频:

1.       var video = document.getElementsByTagName('video')[0];

2.       if (video.canPlayType)

3.          { //支持video标签

4.       if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))

5.             { // it may be able to play

              }

6.               else

7.             {// the codecs or container are not supported

8.               fallback(video);

9.         }

10.      }

 

如果希望有更明确清晰的提示,可以使用onerror事件监听器来报告一个错误:

1.       <video src="video.mp4"

2.              onerror="fallback(this)">

3.              不支持<video>

4.       </video>

 

使用poster,你可以在video播放区域显示一张图片来替代,它可以用来显示视频的预览图。下面是一个示例:

1.       <video src="video1.mp4" poster="preview.jpg"</video>

 

最后,使用JavaScript和HTML,你就可以创建一个交互性的视频播放器。Figure 4 展示如何使用JavaScript添加一个video并响应用户的控制操作.(译注:比如Youtue就是采用动态创建video控件的方式来提供视频播放功能的。)

Figure 4 JavaScript对视频的控制

1.       var video = document.createElement('video');

2.       video.src ='video1.mp4';

3.       video.controls =true;

4.       document.body.appendChild(video);

5.       var video = new Video();

6.       video.src ='video1.mp4';

7.       var video = new Video('video1.mp4')

8.       <script>

9.           var video = document.getElementsByTagName('video')[0];

10.      </script>

11.      <inputtype="button"value="Play"onclick="video.play()">

12.      <inputtype="button"value="Pause"onclick="video.pause()">

完整的事件和特性列表,参考https://www.w3.org/TR/2011/WD-html5-20110113/video.html#playing-the-media-resource.

 

译注: 作者的代码可能会让你有些疑问。看的时候,要注意分辨作者可能是使用多种方式来实现同一个功能。以最后一个代码为例,其中5~7行是1~2行的另两种写法。 

以下是一份动态加入video元件,并可以控制静音的功能示例:

*muteVideo是静音状态切换函数

*playVideo函数在没有video控件时会添加一个控件,如果已经存在就播放。

function addSourceToVideo(element,src,type)
{
 var source = document.createElement('source');
 source.src = src;
 source.type= type;
 
 element.appendChild(source);
}

function insertVideo(src,type,width,height)
{
 var vid = document.createElement("video");
 
 vid.controls="controls";
 vid.width = width;
 vid.height=height;
 vid.id = "video_control";
    vid.muted= false;
 
 addSourceToVideo(vid,src,type);
 
 document.getElementById("show").appendChild(vid);
}

function muteVideo()
{
 var vid = document.getElementById("video_control");
 
 if(vid == undefined)
 return;
 
 if (vid.muted==undefined || !vid.muted)
 {
 vid.muted = true;
 }
 else
 {
 vid.muted = false;
 }
}

function playVideo()
{
    var video = document.getElementById("video_control");
    
    if(video==undefined)
    {
     insertVideo("files/happyfit2.mp4","video/mp4",604,256);
     video = document.getElementById("video_control");
    }

 video.play();
}

 参考:掌握HTML5中的多媒体--音频(audio)

原文地址:Working with Media in HTML5

作者:Jason Beres

转载请注明出处:http://blog.csdn.net/horkychen

 

相关文章推荐

浅谈html5 video标签嵌入视频

前面谈到了网页怎么嵌入flash视频,就想到了另一个问题,flash格式视频在手机上播放,需要手机安装flash播放插件,而且flash视频绝对无法在苹果手机上播放,因为苹果对flash的不支持,导致...

使用HTML5抓取 Audio & Video

原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/  本地化的文章: http://www.html5rocks.com...
  • renfufei
  • renfufei
  • 2014年03月13日 14:09
  • 26429

HTML5 video

摘要:本文主要介绍HTML5 video在android2.2中实现的主要架构和程序流程。 一、实现HTML5 video主要的类 1.  主要类结构及介绍          图1中绿色类...

HTML5 Video标签的属性、方法和事件汇总介绍

http://www.jb51.net/html5/317406.html 前段时间写了一个基于html5 video的视频播放器,从起初的对其不了解,然后到能够写一个基本完善的自定义播放器。在这个...

canvas+video实现跨域视频截图

利用canvas和video能实现比较酷炫的视频画面同步及视频帧截取(如html5doctor所演示的例子)。    但是在对canvas中的图像进行操作时有跨域限制(canvas安全机制),如...
  • hpb21
  • hpb21
  • 2016年02月16日 22:32
  • 3060

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 ...
  • Joyhen
  • Joyhen
  • 2014年03月20日 16:52
  • 171804

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

目录1. HTML5 Media-Video2. HTML5 Media-Audio3. 拖拽操作4. 获取位置信息5. 使用Google 地图获取位置信息   多媒体是互联网中的最重要的一部分,无论...

HTML5 - 使用<video>播放视频

1,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件)2,通过width和height设置视频窗口大小3,预加载媒体文件 设置preload不同的属性值...

使用HTML5的video标签播放视频

除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传...
  • coloriy
  • coloriy
  • 2015年07月14日 14:15
  • 8045

用HTML5解析SWF演示,没有Flash插件照样播放Flash视频

发表时间:2010-05-03评论数:0用Flash实现的效果,用HTML5和JS再加上SVG都能够实现。但你相不相信用这些技术竟然能播放Flash的专有格式swf文件? 这个应用的名字是:Gordo...
  • ccwwff
  • ccwwff
  • 2010年12月23日 10:35
  • 14777
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:掌握HTML5中的多媒体--视频(video)
举报原因:
原因补充:

(最多只允许输入30个字)