MediaElement教程
2015-07-26 21:00
706 查看
http://code.hs-cn.com/html/jQuery_Download.htm Jquery.min的各个版本链接及下载
http://jquery.com/download/ Jquery官网
http://www.css88.com/jqapi-1.9/ Jquery帮助文档
http://mediaelementjs.com/ 播放器MediaElement.js
http://www.cnblogs.com/gbin1/archive/2012/05/03/2480837.html
http://www.iteye.com/topic/1133212
http://mediaelementjs.com/#howitworks
http://designmodo.com/video-player/
MediaElement教程
我们在下载好的D:\PHPProj\JQuery\johndyer-mediaelement-0a97cd9中会看到一个test的官方案列，这是用Jasmined的单元测试框架来写的，具体可以看这里http://www.cnblogs.com/zhcncn/p/4330112.html
html5播放视频的参考文档：
http://www.w3school.com.cn/html5/html_5_video.asp
使用MediaElement时无法载入flash播放器，可能是服务器问题，mode设置的不同。
http://www.w3school.com.cn/html5/html_5_video.asp W3C
html5支持的视频格式只有MP4，webm与ogg这3种，如果需要播放其他格式，就需要flash组件才可以，现在先尝试用html5来播放视频。之后再根据需求来判断播放的组件。
1.下载MediaElement，将
- flashmediaelement.swf
- mediaelement-and-player.min.js
- silverlightmediaelement.xap
- jquery.js
- jquery-1.7.1.min.js
5个文件放入127.0.0.2/meplayer的build文件下，在html文件中加入引用：
自定义css，加入循环播放按钮，设置播放其他格式文件，播放音乐
下面是完整的代码：
可以直接在html里加入audio来加入音乐播放器，同时要找到记录实际播放时间的代码。
http://jquery.com/download/ Jquery官网
http://www.css88.com/jqapi-1.9/ Jquery帮助文档
http://mediaelementjs.com/ 播放器MediaElement.js
http://www.cnblogs.com/gbin1/archive/2012/05/03/2480837.html
http://www.iteye.com/topic/1133212
http://mediaelementjs.com/#howitworks
http://designmodo.com/video-player/
MediaElement教程
我们在下载好的D:\PHPProj\JQuery\johndyer-mediaelement-0a97cd9中会看到一个test的官方案列，这是用Jasmined的单元测试框架来写的，具体可以看这里http://www.cnblogs.com/zhcncn/p/4330112.html
html5播放视频的参考文档：
http://www.w3school.com.cn/html5/html_5_video.asp
使用MediaElement时无法载入flash播放器，可能是服务器问题，mode设置的不同。
http://www.w3school.com.cn/html5/html_5_video.asp W3C
html5支持的视频格式只有MP4，webm与ogg这3种，如果需要播放其他格式，就需要flash组件才可以，现在先尝试用html5来播放视频。之后再根据需求来判断播放的组件。
1.下载MediaElement，将
- flashmediaelement.swf
- mediaelement-and-player.min.js
- silverlightmediaelement.xap
- jquery.js
- jquery-1.7.1.min.js
5个文件放入127.0.0.2/meplayer的build文件下，在html文件中加入引用：
<head> <meta charset="UTF-8"> <title>Video Player</title> <!-- 连接JQuery库--> <script type="text/javascript" src="./build/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="./build/jquery.js"></script> <!--连接mediaelement JS--> <script src="js/mediaelement-and-player.min.js"></script> <!--使用MediaElement自带的CSS--> <link rel="stylesheet" href="css/style.css" media="screen"> <style type="text/css">
自定义css，加入循环播放按钮，设置播放其他格式文件，播放音乐
下面是完整的代码：
<<!DOCTYPE html>
<html debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML5 MediaElement</title>
<script src="firebug-lite/build/firebug-lite.js"></script>
<script>
if (typeof window.console == 'undefined') {
window.console = {log:function() {}};
}
</script>
<!-- include source files here... -->
<script src="./build/jquery.js"></script>
<script src="./src/js/me-namespace.js" type="text/javascript"></script>
<script src="./src/js/me-utility.js" type="text/javascript"></script>
<script src="./src/js/me-i18n.js" type="text/javascript"></script>
<script src="./src/js/me-plugindetector.js" type="text/javascript"></script>
<script src="./src/js/me-featuredetection.js" type="text/javascript"></script>
<script src="./src/js/me-mediaelements.js" type="text/javascript"></script>
<script src="./src/js/me-shim.js" type="text/javascript"></script>
<script src="./src/js/mep-library.js" type="text/javascript"></script>
<script src="./src/js/mep-player.js" type="text/javascript"></script>
<script src="./src/js/mep-feature-playpause.js" type="text/javascript"></script>
<script src="./src/js/mep-feature-progress.js" type="text/javascript"></script>
<script src="./src/js/mep-feature-time.js" type="text/javascript"></script>
<script src="./src/js/mep-feature-speed.js" type="text/javascript"></script>
<script src="./src/js/mep-feature-tracks.js" type="text/javascript"></script>
<script src="./src/js/mep-feature-volume.js" type="text/javascript"></script>
<script src="./src/js/mep-feature-stop.js" type="text/javascript"></script>
<script src="./src/js/mep-feature-fullscreen.js" type="text/javascript"></script>
<link rel="stylesheet" href="./src/css/mediaelementplayer.css" />
<link rel="stylesheet" href="./src/css/mejs-skins.css" />
<style>
#container{
width: 700px;
margin: 20px auto;
}
#video-container {
-sdisplay: none;
}
</style>
</head>
<body>
<div id="container">
<h1>MediaElementPlayer.js</h1>
<p>Recommended Setup</p>
<form>
<h2>MP3 audio (as src)</h2>
<audio id="player2" src="./media/One-Life-One- Love.mp3" preload="none" type="audio/mp3" controls="controls">
<p>Your browser leaves much to be desired.</p>
</audio>
<span id="audio-mode"></span>
<h2>MP4/WebM</h2>
<div id="video-container">
<video width="640" height="360" id="player1" controls="controls" preload="none" poster="./media/dog.jpg">
<source src="./media/despicable-me.mp4" type="video/mp4" />
<track kind="subtitles" src="./media/mediaelement.srt" srclang="en" ></track>
</video>
</div>
<input id="showit" type="button" value="show it" /><br>
<script>
$('#showit').on('click', function() {
if ($('#video-container').is(':visible')) {
$('#video-container').hide();
} else {
$('#video-container').show();
}
$('#player1')[0].player.setControlsSize();
});
</script>
<!-- <video width="640" height="360" id="player2" controls="controls" preload="none" poster="./media/big_buck_bunny.jpg">
<source src="../media/big_buck_bunny.mp4" type="video/mp4" />
<source src="./media/big_buck_bunny.mp4" type="video/mp4" />
</video>
<br> -->
<!-- <video width="640" height="360" id="player3" controls="controls" preload="none" poster="../media/dog.jpg">
<source src="../media/big_buck_bunny.mp4" type="video/mp4" />
<source src="./media/echo-hereweare.mp4" type="video/mp4" />
</video> -->
<!-- <span id="video-mode"></span>
<div style="min-height: 400px">
<div id="video-events"></div>
<div id="video-props"></div>
</div>
-->
</form>
</div>
<!-- <script>
function appendMediaEvents($node, media) {
var
mediaEventNames = 'loadstart progress suspend abort error emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange'.split(' ');
mediaEventTable = $('<table class="video-events"><caption><strong>Media Events</strong></caption><tbody></tbody></table>').appendTo($node).find('tbody'),
tr = null,
th = null,
td = null,
eventName = null,
il = 0,
i=0;
for (il = mediaEventNames.length;i<il;i++) {
eventName = mediaEventNames[i];
th = $('<th>' + eventName + '</th>');
td = $('<td id="e_' + media.id + '_' + eventName + '" class="not-fired">0</td>');
if (tr == null)
tr = $("<tr/>");
tr.append(th);
tr.append(td);
if ((i+1) % 5 == 0) {
mediaEventTable.append(tr);
tr = null;
}
// listen for event
media.addEventListener(eventName, function(e) {
var notice = $('#e_' + media.id + '_' + e.type),
number = parseInt(notice.html(), 10);
notice
.html(number+1)
.attr('class','fired');
}, true);
}
mediaEventTable.append(tr);
}
function appendMediaProperties($node, media) {
var /* src currentSrc */
mediaPropertyNames = 'error currentSrc networkState preload buffered bufferedBytes bufferedTime readyState seeking currentTime initialTime duration startOffsetTime paused defaultPlaybackRate playbackRate played seekable ended autoplay loop controls volume muted'.split(' '),
mediaPropertyTable = $('<table class="media-properties"><caption><strong>Media Properties</strong></caption><tbody></tbody></table>').appendTo($node).find('tbody'),
tr = null,
th = null,
td = null,
propName = null,
il = 0,
i=0;
for (il = mediaPropertyNames.length; i<il; i++) {
propName = mediaPropertyNames[i];
th = $('<th>' + propName + '</th>');
td = $('<td id="p_' + media.id + '_' + propName + '" class=""></td>');
if (tr == null)
tr = $("<tr/>");
tr.append(th);
tr.append(td);
if ((i+1) % 3 == 0) {
mediaPropertyTable.append(tr);
tr = null;
}
}
setInterval(function() {
var
propName = '',
val = null,
td = null;
for (i = 0, il = mediaPropertyNames.length; i<il; i++) {
propName = mediaPropertyNames[i];
td = $('#p_' + media.id + '_' + propName);
val = media[propName];
val =
(typeof val == 'undefined') ?
'undefined' : (val == null) ? 'null' : val.toString();
td.html(val);
}
}, 500);
}
</script> -->
<script type="text/javascript">
$('audio, video').bind('error', function(e) {
//console.log('error',this, e, this.src, this.error.code);
});
jQuery(document).ready(function() {
$('audio, video').mediaelementplayer({
//mode: 'shim',
pluginPath:'./build/',
enablePluginSmoothing:true,
loop: true,
//duration: 489,
//startVolume: 0.4,
enablePluginDebug: true,
//iPadUseNativeControls: true,
//mode: 'shim',
//forcePluginFullScreen: true,
//usePluginFullScreen: true,
//mode: 'native',
//plugins: ['silverlight'],
//features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
success: function(me,node) {
// report type
var tagName = node.tagName.toLowerCase();
$('#' + tagName + '-mode').html( me.pluginType + ': success' + ', touch: ' + mejs.MediaFeatures.hasTouch);
if (tagName == 'audio') {
me.addEventListener('progress',function(e) {
//console.log(e);
}, false);
}
me.addEventListener('progress',function(e) {
//console.log(e);
}, false);
// add events
if (tagName == 'video' && node.id == 'player1') {
appendMediaProperties($('#' + tagName + '-props'), me);
appendMediaEvents($('#' + tagName + '-events'), me);
}
}
});
});
</script>
</body>
</html>可以直接在html里加入audio来加入音乐播放器，同时要找到记录实际播放时间的代码。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结
- 23个超流行的jQuery相册插件整理分享
- 影响jQuery使用的14个方面
- jQuery 仿百度输入标签插件附效果图
- jQuery学习笔记之jQuery的动画