video from html5

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

除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过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属性 (http://www.w3.org/TR/html5/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.              οnerrοr="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()">

 

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

 

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

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

*muteVideo是静音状态切换函数

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

 

[javascript] view plaincopyprint?
  1. function addSourceToVideo(element,src,type)  
  2. {  
  3.  var source = document.createElement('source');  
  4.  source.src = src;  
  5.  source.type= type;  
  6.    
  7.  element.appendChild(source);  
  8. }  
  9.   
  10. function insertVideo(src,type,width,height)  
  11. {  
  12.  var vid = document.createElement("video");  
  13.    
  14.  vid.controls="controls";  
  15.  vid.width = width;  
  16.  vid.height=height;  
  17.  vid.id = "video_control";  
  18.     vid.muted= false;  
  19.    
  20.  addSourceToVideo(vid,src,type);  
  21.    
  22.  document.getElementById("show").appendChild(vid);  
  23. }  
  24.   
  25. function muteVideo()  
  26. {  
  27.  var vid = document.getElementById("video_control");  
  28.    
  29.  if(vid == undefined)  
  30.  return;  
  31.    
  32.  if (vid.muted==undefined || !vid.muted)  
  33.  {  
  34.  vid.muted = true;  
  35.  }  
  36.  else  
  37.  {  
  38.  vid.muted = false;  
  39.  }  
  40. }  
  41.   
  42. function playVideo()  
  43. {  
  44.     var video = document.getElementById("video_control");  
  45.       
  46.     if(video==undefined)  
  47.     {  
  48.      insertVideo("files/happyfit2.mp4","video/mp4",604,256);  
  49.      video = document.getElementById("video_control");  
  50.     }  
  51.   
  52.  video.play();  
  53. }  
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();
}

 

原文地址:Working with Media in HTML5

转载于:https://www.cnblogs.com/webzhangnan/archive/2012/10/06/2713379.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/274575.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

我捡到宝了！2022版前端面试上岸手册，最新最细致！

我捡到宝了！2022版前端面试上岸手册，最新最细致！

大裁员背景下&#xff0c;没什么比辞职后找不到工作更扎心&#xff01;在行情好转前&#xff0c;前端程序员只能“猥琐发育”&#xff0c;不轻易跳槽&#xff0c;同时要修炼内功&#xff1a;对八股文、底层源码、重点项目等进行查缺补漏&#xff0c;静待行情好转抓住机会&#…
阅读更多...
flo file_Flo菜单简介：可扩展的拇指友好型移动导航

flo file_Flo菜单简介：可扩展的拇指友好型移动导航

flo fileWhen it comes to using my phone, I’m a thumb guy and I like using my phone held in one hand. Well, apparently 49% of us prefer it like this.说到使用手机&#xff0c;我是个拇指小伙&#xff0c;我喜欢用一只手握住手机。 好吧&#xff0c;显然我们当中有49…
阅读更多...
超炫的iphone应用UI/UX设计赏析

超炫的iphone应用UI/UX设计赏析

日期&#xff1a;2012-10-5 来源&#xff1a;GBin1.com 要想成为一款成功的iOS应用&#xff0c;不单单是功能设计&#xff0c;还需要有超棒的用户界面和用户体验的完美设计。为了带给大家更多的设计灵感&#xff0c;今天我们分享另外一套来自dribbble的iOS应用UI和UX设计&…
阅读更多...
Git实战进阶教程

Git实战进阶教程

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…
阅读更多...
什么是设计模式_什么是设计？

什么是设计模式_什么是设计？

什么是设计模式Imagine, you are out waiting for a taxi. You are about to miss your appointment. You wait for minutes but Good Lord! — there’s not a single taxi that can offer you a ride.想象一下&#xff0c;您正在外面等出租车。 您将错过约会。 您等待几分钟&…
阅读更多...
hive实现not in

hive实现not in

当前HIVE 不支持 not in 中包含查询子句的语法&#xff0c;形如如下的HQ语句是不被支持的: 查询在key字段在a表中&#xff0c;但不在b表中的数据 select a.key from a where key not in(select key from b) 该语句在hive中不支持 可以通过left outer join进行查询,&#xff0…
阅读更多...
有哪些值得学习的大型 React 开源项目？

有哪些值得学习的大型 React 开源项目？

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…
阅读更多...
成年人的样子是什么样子_不只是看样子

成年人的样子是什么样子_不只是看样子

成年人的样子是什么样子As a branding, packaging, and digital product designer, both at Input Logic and as a freelancer, I work with clients across a wide array of industries, and am responsible for simultaneously getting to the heart of what each client wan…
阅读更多...
HDU 3664 Permutation Counting(DP)

HDU 3664 Permutation Counting(DP)

题目链接 弱爆啦&#xff0c;组合弱爆了&#xff0c;反正是没想出来怎么搞这个题&#xff0c;其实这个公式不难推啊&#xff0c;反正就是没推出来。今天队内赛&#xff0c;实在是没办法了&#xff0c;暴力写了个DFS&#xff0c;先把10以内的打出表来&#xff0c;发现类似杨辉三…
阅读更多...
如何在工作中打造影响力，带动同事？

如何在工作中打造影响力，带动同事？

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…
阅读更多...
谷歌maps菜单语言设置_Google Maps：拯救未来之路— UX案例研究

谷歌maps菜单语言设置_Google Maps：拯救未来之路— UX案例研究

谷歌maps菜单语言设置I have a lousy sense of direction, so Google Maps has always been my right-hand app. On a whim last year, I decided to skip the beach and sunburn and head to Budapest for spring break. That’s when Google Maps became my best friend.我的…
阅读更多...
this和prototype

this和prototype

this出现在构造函数中&#xff0c;更多的是表示一种特有的属性&#xff1b; prototype主要用于拓展函数的属性&#xff0c;方法。 在函数类实例化的时候&#xff0c;this的属性需要复制相应的副本&#xff0c;prototype不用。 function Blog(title,content) { this.titletitle;…
阅读更多...
1万小时后，我从外包走进了字节跳动，现在出了一本书，文末送书！

1万小时后，我从外包走进了字节跳动，现在出了一本书，文末送书！

谨以此书献给相信“努力有用”的你by 大史不说话《 前端跨界开发指南&#xff1a;JavaScript工具库原理解析与实战》先做个自我介绍我是大史不说话&#xff0c;是一名前端工程师&#xff0c;一个相信“努力有用”的、不太聪明的、行动力还可以的程序员。曾经因为一篇《10000小时…
阅读更多...
视觉设计师跟平面设计_使设计具有视觉吸引力

视觉设计师跟平面设计_使设计具有视觉吸引力

视觉设计师跟平面设计Interaction Design is very gratifying.交互设计非常令人满意。 From fast critical thinking to extracting ideas in tangible forms within the team is sure fun and challenging.从快速的批判性思维到在团队内部以有形的形式提炼想法&#xff0c;无…
阅读更多...
ExtJs4 笔记 Ext.tab.Panel 选项卡

ExtJs4 笔记 Ext.tab.Panel 选项卡

本篇讲解选项卡控件。 一、基本选项卡 首先我们来定义一个基本的选项卡控件&#xff0c;其中每个Tab各有不同&#xff0c;Tab的正文内容可以有三种方式获取&#xff1a; 1.基本方式:通过定义html和items的方式。 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信…
阅读更多...
一直刷不动算法题，怀疑人生？试试五毒掌法！

一直刷不动算法题，怀疑人生？试试五毒掌法！

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…
阅读更多...
还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提效摸鱼

还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提效摸鱼

1. 前言大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含包含jQuery、underscore、lo…
阅读更多...
ListView几个比较特殊的属性

ListView几个比较特殊的属性

Android:stackFromBottom"true" 设置该属性之后你做好的列表就会显示在列表的最下面&#xff0c;值为true和false android:transcriptMode"alwaysScroll" 要用ListView或者其它显示大量Items的控件实时跟踪或者查看信息&#xff0c;并且希望最新的…
阅读更多...
超级玛丽马里奥版下载_将超级马里奥赋予生命

超级玛丽马里奥版下载_将超级马里奥赋予生命

超级玛丽马里奥版下载Have you ever seen a zoetrope? If today’s sophisticated computer animation is the latest evolution of the form, then the remarkable zoetrope is a crucial ancestor; the transitional form between the drawing and the animation.等皆你见过…
阅读更多...
如何在繁重的工作中持续成长？

如何在繁重的工作中持续成长？

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…
阅读更多...
最新文章

Copyright @ 2022~2023