【www.shanpow.com--热门范文】
html5视频播放器篇(1):分享10款最棒的免费HTML5视频播放器
最近Web圈子里最让人激动地莫过于HTML5了，特别是HTML5视频，使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题。HTML5可以在没有flash的情况下播放视频。现在有很多的漂亮HTML5视频播放界面，包括控制元素，所以你不需要其它的东西来播放视频。这里我们给大家介绍10款最好的免费HTML5播放器，希望大家能喜欢，支持我们，请给我们留言！
The Free HTML5 Video Player
一个免费的开源的使用javascript开发的HTML5播放器。解决了浏览器兼容性问题并且添加了很多非标准的强大功能。
VideoJS
videoJS是一个HTML5视频播放器，使用js和css开发，会自动使用一个fallback调用flash来播放视频一旦浏览器不支持HTML5视频
SublimeVideo
一个HTML5的播放器，用户可以在缺少浏览器插件或者flash的情况下播放视频。支持window全屏模式
FryPlayer
一个执行快速并且使用简单的HTML5视频播放器。主要特性就是免费！
MediaElement.js
使用HTML和CSS来发html5音频和视频播放器
FlareVideo
一个使用flash做为fallback的HTML视频。CSS/HTML/JS简单定制主题。支持全屏。完整的开源并且商业免费使用
Kaltura
这个HTML5视频允许你回放插入网站的HTML5视频。非常轻量级不需要任何多余的模块支持。兼容大多数的浏览器甚至是不支持HTML5的浏览器。可以回放几个视频格式例如，OGG，H.264及其MOV。
Open Standard Media （OSM） Player
一个一体化的web播放器，使用jQuery开发的开源媒体播放器，能处理各种类型的web媒体，包括HTML5，Youtube，vimeo和flash
OIPlayer jQuery plugin
一个HTML5播放器使用java和flash作为fallback
Dailymotion HTML5 Video
基于HTML5视频标签 + JS/CSS3，并且拥有svg过滤器及其动画PNG。
html5视频播放器篇(2):HTML5应用——简易播放器
HTML5应用——简易播放器
分类：
HTML5
javascript
2012-02-13 21:28
931人阅读
评论(0)
收藏
举报
如今HTML已经是比较热门的了，各种关于HTML5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持HTML5标准，以备打赢新的一轮浏览器大战。
话不多说，不知道大家有没有发现，可以用比较新的版本的谷歌浏览器直接打开.mp3格式的音乐。自己可以试试：
这是用谷歌浏览器直接打开mp3文件的情况。 其实，许多新的浏览器都开始支持HTML5中<audio> <video>标签，使得一些格式的流媒体可以摆脱对插件的依赖。 下面我就以<audio>标签做一个简易的音乐播放器.
<audio>控件可以通过一些内置的JavaSceipt函数和特性进行控制，以及进行二次开发。例如load()、play()、pause()等控制音频播放的函数，paused、ended、currentTime、startTime等属性等.
对于这个简易播放器具有播放\暂停、快进、快退等功能，结合<canvas>对象绘制图形
[html] view plaincopy?
<%@language="javascript" %>
<html>
<head>
<title>PlayMusic</title>
<style type="text/css">
div.s{position:absolute;left:100px;top:200px;width:600px;}
audio{width:600px;position:absolute;left:0px;top:100px;}
canvas{position:absolute;left:0px;top:40px;}
marquee{position:absolute;left:250px;top:180px;}
h1{color:Red;}
h1.a{color:Green;position:absolute;left:200px;top:50px;}
</style>
</head>
<body>
<h1 class="a">欢迎使用HTML5播放器</h1>
<%
var name = Request.QueryString("name");
if (name == "")
name = "";
name1 = "save_music\\" + name + ".mp3";
//Response.Write(name);
%>
<marquee behavior=scroll scrolldelay=200 scrollamount=30 width="300" ><h1><%=name %></h1></marquee>
<div class="s">
<canvas width="600" height="60" id="MusicCanvas" onclick="dealclick()"></canvas>
<audio id="music" src=<%=name1 %> controls>
您的浏览器不支持HTML5中的audio标签
</audio>
</div>
</body>
</html>
<script type="text/javascript">
var c = document.getElementById("MusicCanvas");
var ccon = c.getContext("2d");
var toggle = document.getElementById("music");
drawPS();
drawQuick();
function drawPS() //flag=1表示播放命令，flag=0表示暂停
{
con.save();
con.beginPath();
var g = con.createRadialGradient(275, 30, 0, 275, 30, 25); //创建渐变颜色
if (toggle.paused) //暂停状态
{
g.addColorStop(0.2, "#1FD856"); //
g.addColorStop(0.8, "black"); //
toggle.play();
}
else //播放状态
{
g.addColorStop(0.2, "red"); //黄
g.addColorStop(0.8, "black"); //
toggle.pause();
}
con.fillStyle = g;
con.arc(275, 30, 25, 0, Math.PI * 2, true);
con.fill();
con.closePath();
con.restore();
}
function drawQuick() //
{
con.save();
con.beginPath();
con.fillStyle = "grey";
con.fillRect(130, 10, 70, 40);
con.fillStyle = "black";
con.moveTo(130, 30);con.lineTo(145, 13);con.lineTo(165, 13);con.lineTo(150, 30);con.lineTo(165, 47);con.lineTo(145, 47);con.lineTo(130, 30);
con.fill();
con.moveTo(160, 30); con.lineTo(175, 13); con.lineTo(195, 13); con.lineTo(180, 30); con.lineTo(195, 47); con.lineTo(175, 47); con.lineTo(160, 30);
con.fill();
con.closePath();
con.beginPath();
con.fillStyle = "grey";
var x = 350;
con.fillRect(x, 10, 70, 40);
x += 70;
con.fillStyle = "black";
con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);
x -= 30;
con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);
con.fill();
//con.moveTo(160, 40); con.lineTo(175, 23); con.lineTo(195, 23); con.lineTo(180, 40); con.lineTo(195, 57); con.lineTo(175, 57); con.lineTo(160, 40);
con.fill();
con.closePath();
con.restore();
}
function dealclick()//处理敲击事件
{
var x = event.clientX;
var y = event.clientY;
var flag = getPos(x, y);
//alert(x.toString() + " " + y.toString()+" "+flag.toString());
if(flag==0)
return;
switch (flag)//
{
case 1: drawPS(); break;
case 2: quickOrslow(0); break;
case 3: quickOrslow(1); break;
}
}
function getPos(x, y) //
{
var px=100;
var py=240;
x-=px;
y-=py;
if (x >= 275 && x <= 325 && y >= 15 && y<= 65)
return 1;
if (x >= 130 && x <= 200 && y >= 20 && y <= 60)
return 2;
if (x >= 350 && x <= 420 && y >= 20 && y <= 60)
return 3;
return 0;
}
function quickOrslow(flag) //
{
var total = toggle.duration;
var s = Math.ceil(total*0.05);
if (flag == 1)//kuaijin
{
if (toggle.ended == true)
return;
var now = toggle.currentTime;
if (total - now <= s)
return;
else
toggle.currentTime = now + s;
}
else //后退
{
var n = toggle.currentTime;
if (n < s)
return;
else
toggle.currentTime = n - s;
}
}
</script>
这是全部的源代码，当然其中包含了一些ASP语句，适用于传递歌曲名的，可以不用考虑。
[html] view plaincopy?
drawPS()是控制播放与暂停的函数,quickOrSlow()是控制快退的函数。
[html] view plaincopyprint?
当然这个播放器是非常简陋的，但是通过加工美化，还是可以做出优秀的播放器的，而且是没有插件的。
[html] view plaincopyprint?
html5视频播放器篇(3):15 免费的 HTML5 的视频和音频播放器
HTML5 audio 已经成为在线显示视频和音频的新标准，支持 Firefox、Safari 和 Chrome 浏览器。本文提供 15 个免费的强大的 HTML5 音频和视频播放器。
Vimeo
Blip.tv
SublimeVideo
JW Player
Flickr
YouTube
VP Factory
VideoJS
HTML5 Music Player Plugin
HTML5 Video
audio.js
Media Element
SoundManager 2
Viperwolf
Zen Player
via djdesignerlab/oschina编译
想通过手机客户端访问开源中国：请点这里
本站文章除注明转载外，均为本站原创或编译欢迎任何形式的转载，但请务必注明出处，尊重他人劳动共创开源社区转载请注明：文章转载自：开源中国社区 [http://www.oschina.net/]本文标题：15 免费的 HTML5 的视频和音频播放器本文地址：http://www.oschina.net/news/30464/15-free-html5-video-and-audio-players
旧一篇：App 留客率出炉：iPhone 大胜 Android! 1年前新一篇：Juzu 0.5 发布，Portlet开发的MVC框架 1年前
相关资讯
10 个旨在美化网站的 HTML5 滑块设计7天前
35 个免费创新的响应式 HTML5 模板9天前
一些超棒的免费的 HTML5 和 CSS3 网站模板22天前
30 个有用的 HTML5 和 CSS3 表单设计23天前
Gumbo —— Google 的纯 C HTML5 解析器1个月前
#翻译# Java EE HTML5 WebSocket 示例1个月前
PhoneJS - HTML5 JavaScript 移动开发框架1个月前
为你带来灵感的 20 个 HTML5/CSS3 模板1个月前
10 个很有用的 HTML5 和 CSS3 生成器资源1个月前
Bone.io —— 构建实时高性能单页 HTML5 应用1个月前
X你也许会喜欢
10 个旨在美化网站的 HTML5 滑块设计7天前
35 个免费创新的响应式 HTML5 模板9天前
一些超棒的免费的 HTML5 和 CSS3 网站模板22天前
