首页风格
门户
博客

使用最简单的方式:HTML5的视频

日期:2011/12/04  来源:GBin1.com

如果你觉得没有理由去学习HTML5 video,那么我可以给你一个:移动Flash已经死了。移动是匹黑马,很多人都说到2012年更多的人会使用移动设备浏览器互联网而不是传统的桌面方式。你要知道如果在2012年,不仅仅要了解CSS及其代码技巧,我们也需要去了解如何使用新的方式去发布在线视频。

现在你可能问你自己是否简单执行HTML5视频,或者是否值得去做。那么,我的朋友们,我得告诉你,可能比你想象的更加简单!

我们今天将看看不同的方式去实现这个方式,还有一些你需要注意的问题。现在我们开始!

使用最简单的方式:HTML5的视频

<video>实现原理

在使用HTML5之前,我们都使用<embed>和<object>对象来实现类似功能。不知道大家是否觉得实现这样的功能是否很顺利,但是我可以确信告诉你,这个不是个简单活儿。

可能你也注意到,他们使用外部的代码来处理这样功能。外部代码可能是插件,可能并非100%的支持你缺省的内容。

video标签非常简单,你告诉它使用的来源,然后如果它不可以读出源内容,它将显示一个信息

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Bad news, you can't see the amazing stuff that is here.
</video>

这里你需要类似.mp3,mp4,ogg,.webm等来源如果你没有类似的格式,你可以使用html5 video converters来转化。

你需要不同的文件类型因为Firefox(3.5+),Opera(10.5+)和Chrome(5.0+)支持.ogg但是IE(9.0+)和safari(3.0+)支持.mp4。

那么好事是你不需要让你的用户去换不同的浏览器以访问到你提供的内容。你可以使用一些别的选择来确保你的用户看到你的视频。这里我们看看如何提升这些video。

漂亮的视频播放器

当然你不需要依靠缺省的播放器控制,你可以做一些非常酷的东西(例如执行CSS效果,画布播放或更多),我们将介绍更多。

这里是一个自定义的video播放器 Dev.Opera has a great tutoria

自定义控制如何实现的

一旦我们的视频加载后,我们将使用jQuery来移除缺省的控制并且添加我们自己的HTML控制。然后jQuery将会控制所有我们需要的属性,例如,readyState, duration, currentTime,及其声量控制。

JS处理完后你将看到视频控制可以很快的设置新的主题并且通过CSS来变化,因为这些应该首先处理,对吧?

使用最简单的方式:HTML5的视频

Source: Opera Tutorial

用更加聪明的方式处理

我们有很多插件帮助我们处理,这里有一些:

WordPress Plugin – HTML5 and Flash Video Player

使用最简单的方式:HTML5的视频

使用这个插件你可以使用flv方式简单添加视频,或者更酷的HTML5方式,使用比较短代码:

[videoplayer file="video/video.flv" /] or [videoplayer file="video/video.mp4, ogg, webm" /]

使用jQuery.VideoBG插件创建一个HTML5视频背景

使用最简单的方式:HTML5的视频

你可以添加一个视频到你的背景,这能给我们一个非常酷的界面。

ttwVideoPlayer jQuery插件实现的非常好看的视频播放器

使用最简单的方式:HTML5的视频

最好的视频播放器之一,非常漂亮,并且拥有非常好的特性

jPlayer的一站式解决方案

使用最简单的方式:HTML5的视频

看看他们的第一个演示,绝对不是另外一个jQuery视频插件。它允许你加强缺省的播放器功能,这些只能使用flash来实现,圆形播放器非常酷,大家应该去看看我们说的这些功能和演示。

最后一个HTML5video.org

使用最简单的方式:HTML5的视频

拥有非常好的视频标签,新闻部分,播放器比较,非常好的材料来了解HTML5。

现在轮到你了

你使用过这些么?你觉得如何?

如果你知道别的功能能够帮助我们开发么?或者我们漏了什么?请给我们留言!谢谢!

via 1stwebdesigner

来源:使用最简单的方式:HTML5的视频

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐