mediaElement 示范
mediaElement 示例
MediaElement是一个HTML音频和视频解决方案，你可以：
使用HTML5的视频和音频标签及其CSS生成播放器
对于老的浏览器，使用自定义的Flash和Silverlight播放器来模拟HTML5
支持众多应用的插件，jQuery，Wordpress，Drupel，Joomla等等
下面这个示例请参考
完整的文件我已打包到：http://download.****.net/detail/xiananliu/7205539
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="build/jquery.js"></script>
<script src="build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="build/mediaelementplayer.css" />
<script type="text/javascript">
$(document).ready(function() {
var player = new MediaElementPlayer('video',{
alwaysShowControls: false,
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'] ,
success: function(media, node, player) {
media.addEventListener('play',function(){
$('marquee span').text($('video').attr('src'));
})
}
});
$('div#src button').eq(0).click(function(){
player.setSrc($('input').val());
//alert(1111)
player.play();
//alert(2222);
});
$('div#example a').click(function(){
player.setSrc($(this).attr('href'));
player.play();
return false;
});
$('div#src button').eq(1).click(function(){
//var s= getvl(document.getElementById("file"));
var s2=$('#file').val();
//var x='C:\\Users\\Administrator\\Desktop\\johndyer-mediaelement-4af8088\\media\\echo-hereweare.mp4';
player.setSrc(s2)
player.play();
});
});
</script>
<style type="text/css">
div#mainContent
{
width:900px;
margin:0 auto;
}
div#player {
width:800px;
height:412px;
margin:0 auto;
}
div#src
{
text-align:center;
margin-top:10px;
}
div#topbar
{
background:#000;
color:white;
}
div#src input
{
width:600px;
}
div#example
{
margin-top:20px;
text-align:center;
}
div#example a
{
margin:0 10px;
color:#000;
}
.ie8 .me-plugin { position: static; }
</style>
</head>
<body>
<div id="mainContent">
<div id="player">
<div id="topbar">
<marquee>正在播放：<span></span></marquee>
</div>
<video src="echo-hereweare.mp4" width="800" height="400" >
</video>
</div>
<div id="src">
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right">视频源：</td>
<td><input type="text" /> </td>
<td><button> 播放</button></td>
</tr>
<tr>
<td align="right"> 本地文件：</td>
<td align="left"><input id="file" type="file"/></td>
<td><button> 播放</button></td>
</tr>
<tr>
<td colspan="3">本地播放仅支持IE浏览器！其他浏览器请手动复制本地文件地址到“视频源”播放</td>
</tr>
</table>
</div>
<div id='example'>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">视频示例1</a>
<a href="http://www.w3school.com.cn/example/html5/mov_bbb.mp4">视频示例2</a>
<a href="http://html5video.org/media/sintel.mp4">视频示例3</a>
<br>
<a href="echo-hereweare.mp4">视频示例mp4</a>
<a href="echo-hereweare.ogv">视频示例ogv</a>
<a href="echo-hereweare.webm">视频示例webm</a>
</div>
</div>
</body>
</html>