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

简介: 除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同.Figure 11.  2.      使用HTML5的video标签播放视频3.      4.      5.  6.  7.      使用Flash插件播放视频8.      10.        11.    12.那么重要的是什么呢? 这两个示例很简单,也易于实现。

除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过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

 

目录
相关文章
|
7月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
185 0
|
9天前
|
移动开发 前端开发 JavaScript
如何实时准确地从HTML5视频中截取当前播放画面
如何实时准确地从HTML5视频中截取当前播放画面
29 4
|
9天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
9天前
|
移动开发 定位技术 UED
《HTML 简易速速上手小册》第7章:HTML 多媒体与嵌入内容(2024 最新版)
《HTML 简易速速上手小册》第7章:HTML 多媒体与嵌入内容(2024 最新版)
44 0
|
9天前
|
Web App开发 前端开发 安全
编程笔记 html5&css&js 031 HTML视频
编程笔记 html5&css&js 031 HTML视频
|
9天前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
233 1
|
9天前
|
存储 移动开发 前端开发
HTML5列表标签、多媒体和语义化标签
列表标签、多媒体和语义化标签
50 0
|
9天前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
|
10月前
|
前端开发 JavaScript API
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
530 0
|
10月前
|
移动开发 HTML5
在HTML5中 视频标签 和音频标签的介绍
在HTML5中 视频标签 和音频标签的介绍
156 0