在画布上播放视频

管理员01  发布于:2014-11-23  浏览:

摘要:由于video提供的很多属性、方法和事件与audio元素基本相同,因此虽然有一些新增的属性,但是通过HTML 5的video相关的文档就可以了解并创建一个基本的视频播放器。本节来看另外一个非常有趣的特性将播放器显示在画布上,这使得用户可以创建出具有多种风格的播放器效果。 注意:由于video元素是一个功能强大且复杂的元素,要完整地掌握这个元素需要学习较多的知识,可以参考一些介绍HTML 5多媒体方面的图书来获取更详细的video相关的信息。 在canvas上放置视频video元素需要完成如下的几个步骤: (1)需要有一个隐藏的video元素,该元素有关的src属性关联到某个要播放的视频,通过为该元素设置CSS属性display:none即可。 (2)在视频加载完成之后,通过周期性地调用drawlmage,传入video对象的实例,由于video派生自HTMLMediaElement,它一次只会绘制一帧的视频快照。
  由于video提供的很多属性、方法和事件与audio元素基本相同,因此虽然有一些新增的属性,但是通过HTML 5的video相关的文档就可以了解并创建一个基本的视频播放器。本节来看另外一个非常有趣的特性——将播放器显示在画布上,这使得用户可以创建出具有多种风格的播放器效果。
注意:由于video元素是一个功能强大且复杂的元素,要完整地掌握这个元素需要学习较多的知识,可以参考一些介绍HTML 5多媒体方面的图书来获取更详细的video 相关的信息。
  在canvas上放置视频video元素需要完成如下的几个步骤:
  (1)需要有一个隐藏的video元素,该元素有关的src属性关联到某个要播放的视频,通过为该元素设置CSS属性display:none即可。
  (2)在视频加载完成之后,通过周期性地调用drawlmage,传入video对象的实例,由于video派生自HTMLMediaElement,它一次只会绘制一帧的视频快照。为了让视频在画布上连续播放,需要周期性地调用drawlmage形成连续播放的效果。
  (3)可以在canvas上使用多种绘图效果来创建具有创造力的画布视频。接下来完成一个示例,这个示例将在画布上绘制视频和文字效果。示例重点演示了video元素的一些属性和方法的使用,运行效果如图12.14所示。

  下面的过程演示如何实现这个非常有趣的效果,其实现步骤如下所示:
  (1)新建一个名为HTML5DemolO.html的HTML 5网页,在该网页上放置一个canvas元素,指定宽度为500,高度为300,同时添加一个img元素,设置其src属性为一幅图案,指定这个img元素的CSS属性display:none,在页面上隐藏图像的显示,代码如下所示:

  (2)在页面中创建一段内联的JavaScript代码.在该代码内部定义两个全局变量oVideo和ovDiv,oVideo将保存页面上的video元素,ovDiv用来保存一个div元素,将为这个div元素应用CSS样式以便隐藏掉video的显示。在JavaScript代码中关联页面的load事件,用来创建video元素,设置其src属性,如代码12.13所示:


  可以看到,代码首先就关联了window.onload事件,页面所有内容(包含图像)完成之后,会调用eventWindowLoaded方法,该方法会动态创建video和div元素,将video元素添加到div元素的内部,并将div元素添加到页面上,通过为其应用CSS样式让整个video的显示隐藏起来。可以注意到代码中使用了supportedVideoFormat来检测当前浏览器支持的音频格式。这个函数主要调用canPlayType方法,该方法接受MIME类型,它返回如下所示的几种字符串。
  maybe:表示浏览器不是很确信是否能播放,一般是可以播放。
  probably:如果浏览器可以播放,则返回该字符串。
  如果浏览器完全不能播放这个MIME类型的视频,则返回空白字符串。
  代码最后设置video元素的src属性,指定loop属性值为true,表示允许视频循环播放。最后调用addEventListener为video元素的canplaythrough关联了事件处理代码,以便在视频缓冲完成、可以流畅播放之后开始进行视频的绘制。
  (3) videoLoaded方法在视频能够播放时被调用,它调用了canvasApp方法表示进行周期性的画布重绘操作。canvasApp方法首先检测浏览器是否支持画布,然后开始调用drawlmage方法周期性地绘制视频的快照,形成动态的画布内容播放效果,实现如代码12.14所示:

  由代码可以看到,videoLoaded方法调用了canvasApp方法。canvasApp方法调用canvasSupport来判断当前浏览器是否支持画布,如果支持,它又定义了一个内嵌函数drawVideo,这个函数内部调用了createPattern创建来自页面上的img元素的图案填充,填充了背景图案之后,用画布边框填充了边框轮廓,以便具有良好的视觉效果。在填充了边框之后,调用drawlmage方法传入video对象实例,用来绘制视频的快照,最后在视频上绘制了一行文本内容。
  canvasApp最后调用oVideo.play方法开始播放视频,最核心的是setlnterval方法,它将隔33毫秒对画布重绘一次,以便让画布上的图像具有动态视频盘的效果,同时又能收听到隐藏在页面上的音频,就好像视频是出现在画布上一样。
  本章讨论了HTML 5中多媒体的内容,主要是音频与视频的播放方面。在12.1节介绍了一些图像处理方面的高级内容。首先讨论了图像填充的4种方式,接下来讨论了图像变换效果的使用,以及如何对图像应用阴影效果。在播放音频部分,详细介绍了HTML 5支持的几种音频格式,讨论了如何转换为浏览器支持的音频类型,接下来介绍了audio元素的使用方式及控制音乐播放的属性、方法和事件,最后介绍了如何创建一个自定义外观的播放器。在视频部分,首先讨论了用于视频播放的几种格式,接下来介绍了video元素的使用方法。由于video与audio的很多相同的属性、方法和事件,因此控制起来与audio非常相似。本章最后通过如何在画布上播放视频进行了举例介绍,讨论了如何将video与canvas结合,创建有趣的视频播放效果。

文章链接:http://www.jihai.com/a/jiaocheng/html5-css3/201411/842.html
标签:video(3)视频(3)播放(4)由于(8)画布(7)上(10)很多(10)在(109)的(233)提供(17)
作者:管理员01 来源:未知 发布于2014-11-23 15:26
您可能喜欢的文章

热门模板
热门阅读
热门插件