HTML5入门

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

字号+ 作者: 来源: 2014-11-16 20:49 我要评论( )

要求 必备知识 熟悉 HTML 和 JavaScript。 用户级别 中级 范例文件 custom-controls.zip (15.1 MB) 这是关于HTML5的系列教程的第三部分(共3部分)。在 第一部分 和 第二部分 ,讲到了video和audio元素

要求

必备知识

熟悉 HTML 和 JavaScript。

用户级别

中级

 

 

这是关于HTML5的系列教程的第三部分(共3部分)。在第一部分第二部分,讲到了 video 和 audio 元素,简短的展示了如何给这些元素添加 controls 属性,以此来给浏览器的媒体(media)元素设置默认值。如果已试过,那应该注意到了各个浏览器的默认外观并不一样。

如果你希望你的媒体元素在各浏览器下有相同的样式,就可以使用HTML5媒体元素的方便的API。你可以使用标准的HTML和CSS来控制媒体的外观, 并用 media元素的API来控制 audio 和 video 元素。

此篇教程详细的描述了构建一个自定义媒体播放器的各个步骤,添加一些特点和功能,使用不同的API属性,事件和方法。你可以先看看这个案例 的最终结果,在此文章的示例附件中(见原文章地址中)。

注意:这篇教程使用了视频元素,但是音频的处理也是同理可得的。

开始

第一步,就是先定义一个video元素。

 
  1. <video id="video" controls>  
  2. <source src="grass-in-the-wind-sma.mp4" type="video/mp4"> 
  3. <source src="grass-in-the-wind-sma.webm" type="video/webm">  
  4. </video> 

注意,这里给你的视频元素标签中添加了 controls 属性,然后自定义的控制就需要用到javascript,先通过js把它的默认设置关闭。 这样的话,即便用户把js给屏蔽了,他们也能使用浏览器自带的默认控制。

要通过js来关闭默认的控制,只需把 video 元素的 controls 属性设置为 false 即可:

 
  1. <script>  
  2. // Grab a handle to the video var video = document.getElementById("video");  
  3. // Turn off the default controls video.controls = false;  
  4. </script> 

接下来,准备继续前进!

添加播放和暂停功能

对大多数播放器来说,最基本的需求就是播放和暂停。在这个例子中,我们只用一个按钮,在暂停的时候它显示为”播放”,在播放的时候它是”暂停”。

 
  1. <div id="controls"> 
  2. <button id="playpause" title="play">Play</button> 
  3. </div> 

然后,就创建一个js函数,来改变button的title属性和实现播放和暂停的功能。

在这个例子中,函数的名字叫做 togglePlayPause()。仔细的看看下面的代码,详细的解释在下面:

 
  1. function togglePlayPause() { 
  2.     var playpause = document.getElementById("playpause"); 
  3.     if (video.paused || video.ended) { 
  4.         playpause.title = "pause"
  5.         playpause.innerHTML = "pause"
  6.         video.play(); 
  7.     } else { 
  8.         playpause.title = "play"
  9.         playpause.innerHTML = "play"
  10.         video.pause(); 
  11.     } 

想要这个函数在每次点击播放/暂停按钮时都被调用的话,你就把它添加到button标签的 onclick 事件中:

 
  1. <button id="playpause" title="play" onclick="togglePlayPause()">Play</button> 

togglePlayPause() 函数的第一行包含一个针对play/pause按钮自身的处理器,并将它赋值给变量playpause:

 
  1. var playpause = document.getElementById("playpause"); 

接下来,它通过两个属性 paused 和 ended检查视频的状态,看看它是否是暂停或者停止。如果视频处于这两个状态,它就会设置按钮的 title 和 innerHTML 属性为 "pause",并调用 video.play() 来播放视频。

如果视频目前不是暂停和结束状态,那么你会假设它正在播放。在这种情况下,这个函数设置按钮的 title和 innerHTML 为 "play",并调用 video.pause() 来暂停视频。

按钮的默认文本为 “play”。当这个按钮被第一次点击,视频就会开始播放,接着按钮的文本就会变为 “pause” ,接着当暂停按钮被点击时,视频就会暂停,按钮文本会变回 “play”。

正如你所见,在本教程接下来的功能介绍中都遵循同样的基本模式:给 video 元素添加侦听器,检查元素的当前状态,然后调用API方法。

添加音量控制和静音按钮

播放器的另一个极其重要的功能就是控制音量的大小,包括静音的功能。

要添加音量控制,你只需要使用HTML5的新的<input>标签类型range:<input type=”range”/>。这一个input的类型会被浏览器渲染为一个滑动条,用户可以 左右滑动,你可以通过 min 和 max 属性来指定最小值和最大值,然后用 step 属性来设置每动一下的滑动大小。可以用下面的代码来创建一个范围为0到1的, 步进大小为0.1的滑动条:

 
  1. <input id="volume" min="0" max="1" step="0.1" type="range" /> 

当滑动条滑动时,需要调整音量大小,只需要设置标签的 onchange 属性来调用js侦听器即可:

 
  1. <input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" /> 

然后创建一个js函数,并取名为 setVolume():

 
  1. function setVolume() { 
  2. var volume = document.getElementById("volume");  
  3. video.volume = volume.value; } 

这个简单的按钮含有一个处理音量滑块的控制器,并将它的值赋给 video 元素的 volume 属性。

注意: 火狐 7 不支持 range 类型,而是以一个文本字段代替。这时可以手动的写入音量的值(0–1),然后鼠标点击其他地方(让他失去焦点),就会实现相同的调整音量的效果了。

添加静音按钮也是很简单的。还是定义一个新的按钮,这次需要一个 onclick 处理器:

 
  1. <button id="mute" onclick="toggleMute()">Mute</button> 

接着创建一个名为 toggleMute() 的函数:

 
  1. function toggleMute() {  
  2.     video.muted = !video.muted;  

这个功能设置 视频 元素的 muted 属性(布尔变量)为当前值的相反值。这样就切换了按钮的静音状态。很简单!

添加播放进度条

用户习惯于在看视频时查看已经播放了多少,和还剩多少。

给你的播放器添加一个简单的进度条,可以用 div 标签和 span 标签。可以增加 span 的宽度来显示视频的进度。

 
  1. <div id="progressBar"> 
  2.     <span id="progress"></span> 
  3. </div> 

当然,你也希望用一些css,这样才能看出span的效果:

 
  1. #progressBar {  
  2.   border:1px solid #aaacolor:#fff;  
  3.   width:295pxheight:20px;  
  4. #progress {  
  5.   background-color:#ff0000
  6.   // red height:20px;  
  7.   display:inline-block;  

然后,定义一个函数,它能够通过改变 span 元素的 width 来更新进度条。

 
  1. function updateProgress() { 
  2.     var progress = document.getElementById("progress");  
  3.     var value = 0;  
  4.     if (video.currentTime > 0) {  
  5.         value = Math.floor((100 / video.duration) * video.currentTime);  
  6.     } 
  7.     progress.style.width = value + "%"

这个函数的第一行包含一个控制器来处理进程 span 元素自身。它检查 video 元素的 currentTime 属性值,这个值定义了当前的播放位置,以秒来记。如果 currentTime 大于 0表示视频已经被播放,它使用video 元素的 duration 属性来计算当前进度的百分数,duration 属性定义了视频的总长度,以秒来计算。最后,它将结果赋值给进程 span 的CSS width 。

在上面的播放,暂停,静音等时,你可以使用如 onclick 和 onchange 等事件来调用相应的函数。但是这个进度条却不行,因为这是视频进度的响应,而非和用户交互。

当然,HTML5的媒体元素API也增加了几个可以侦听的事件来实现该功能。其中一个就是 timeupdate 事件,每当 currentTime 属性改变的时候就会触发出此事件。(即当媒体开始播放后就会连续不断的触发。)

在你的web页的JavaScript初始化代码中,当 timeupdate 事件被激活时,添加一个事件监听器来调用updateProgress 函数:

 
  1. video.addEventListener("timeupdate", updateProgress, false); 

现在,你的进度条就会随着视频的播放而不断更新。

监听事件

Media元素的API定义了许多的事件,你可以用他们来完善你的播放器。完整的事件列表可以查看 W3C’s summary of media element API events。表1中列出了几个常用的事件:

Table 1. 媒体元素 API 事件

事件名 描述
playing 当媒体以前被暂停,现在要开始重新播放时触发
ended 当媒体播放完停止时触发
timeupdate 当媒体当前的播放位置被改变时触发
play 当以前暂停的媒体不再是暂停和播放已恢复时触发
pause 当返回 pause() 方法,而且媒体已经被暂停时触发
volumechange 当媒体的 音量 和 静音 属性改变时触发

当你使用自定义控制机制的时候,监听一些可用的事件来确保你的视频状态是实时同步的,这将会是一个比较好的体验。

控制界面怎么会不同步?当你用js关闭了它们默认的控制之后,并由用户打开这些控制并使用它们和视频交互,就存在这种可能了。比如,在火狐下,除了 这些控制之外,还可以在视频上右击,然后会有相应的控制选项,播放,暂停等等。如果用户点击了这些选项,你刚才自定义的界面就有可能不能实时的反映当前的 视频状态了。

但是不管用哪种方法控制,相对应的事件总是会被触发的,因此,你可以监听 pause 和 play 事件来实现同步,如:

 
  1. video.addEventListener('play'function() { 
  2. var playpause = document.getElementById("playpause"); 
  3. playpause.title = "pause"
  4. playpause.innerHTML = "pause"
  5. }, false); 
  6.  
  7. video.addEventListener('pause'function() { 
  8. var playpause = document.getElementById("playpause"); 
  9. playpause.title = "play"
  10. playpause.innerHTML = "play"
  11. }, false); 

你也应该监听 ended 事件,这样当视频结束时,play/pause按钮可以实时更新。当 ended 事件被触发时,你可以调用视频的 pause() 方法来实现这个功能。

 
  1. video.addEventListener('ended'function() {  
  2. this.pause(); 
  3. }, false); 

注意: 之所以在这里调用 pause() 方法,是因为如此一来就可以触发 pause 事件了,这又由此导致了我们上面所写的 pause 事件控制器代码的调用。当然你也可以把代码全部拷贝到 ended 的侦听器里面,或者,如果你有其他的需求或扩展,你在这里定义它。

添加播放列表

最后一个功能就是媒体播放列表,用户可以用它来改变在媒体播放器中的视频。这也很简单。首先你要定义你的播放列表,例如:

 
  1. <ul id="playlist"> 
  2.   <li><a href="#" onclick="playlistClick('grass-in-the-wind-sma');">Grass blowing in the wind</a></li> 
  3.   <li><a href="#" onclick="playlistClick('tree-in-the-wind-sma');">Trees blowing in the wind</a></li> 
  4. </ul> 

在播放列表里有两个条目,当被点击时,每一个都会调用名为 playlistClick() 的函数。这个函数只有一个参数,就是要播放文件的地址(没有扩展名)。这个函数的定义如下:

 
  1. function playlistClick(file) { 
  2.     var v = document.createElement("video"); 
  3.     if (v.canPlayType("video/mp4") != "") { 
  4.         changeSource(file + ".mp4"); 
  5.     } 
  6.     else if (v.canPlayType("video/webm") != "") { 
  7.         changeSource(file + ".webm"); 
  8.     } 
  9.     return false

这个函数首先生成一个临时的视频元素,接着针对每一个支持的视频类型调用 canPlayType() 方法,在这个例子中视频类型为MP4和WebM。当确定了浏览器所能播放的文件类型后,它调用只有一个参数的changeSource(),这个被传入函数的文件名含有合适的文件扩展名。这个函数会返回 false 来防止element的链接变为 href 属性的值。

changeSource() 函数的定义如下:

  1. function changeSource(src) { 
  2.     resetPlayer(); 
  3.     video.src = src; 
  4.     video.load(); 

这个函数调用你下面将会看到的 resetPlayer() 函数,接着设置视频元素的 src 属性为:刚刚传入的被作为一个属性的新的视频文件。最后,它调用 load() 来加载新的视频源到 视频 元素中。

注意: 不是所有的浏览器都要求调用 load() 方法,但是Safari需要。因此,调用它是个好的主意。

resetPlayer() 函数为了准备载入一个新的视频,重置了一些播放器组件。

 
  1. function resetPlayer() { 
  2.     var playpause = document.getElementById("playpause"); 
  3.     playpause.title = "play"
  4.     playpause.innerHTML = "play"
  5.     if (video.currentTime > 0) video.currentTime = 0; 
  6.     updateProgress(); 

首先,它设置play/pause按钮的文本为 “play”。 接着如果 视频元素的currentTime 变量不在 0 的位置,则它重置为 0。最后它调用 updateProgress() 函数,它将重置进度条到开始的 位置(进度条使用了video 元素的 currentTime 属性,它只要设为0即可)。

下一步阅读方向

就是这样!你已经了解了创建一个简单的HTML5媒体播放器所需的所有必要步骤。虽然这个播放器的显示不是很有吸引力,但是你可以通过使用CSS样式来改进它的外观。

如果您想看更多的关于媒体元素API,它的事件和它在运行中的属性,请到 W3C’s HTML5 Video Events and API demonstration page。它演示的视频有着基本的控制,并显示API属性和事件。

你可以在我的书(HTML5 Multimedia: Develop and Design)里读到更多的关于为HTML5视频和音频创建自定义控制的方法。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5基础,第4部分:点睛之笔Canvas

    HTML5基础,第4部分:点睛之笔Canvas

    2014-11-16 20:49

  • HTML5基础,第3部分:HTML5 API的威力

    HTML5基础,第3部分:HTML5 API的威力

    2014-11-16 20:49

  • HTML5基础,第2部分:组织页面的输入

    HTML5基础,第2部分:组织页面的输入

    2014-11-16 20:49

  • HTML5基础,第1部分:初试锋芒

    HTML5基础,第1部分:初试锋芒

    2014-11-16 20:58

网友点评