在线演示1
在线演示2
本地下载
越来越多的浏览器开始支持HTML5中的音频和视频标签了,现在我们可以方便的使用HTML5标签来开发基于web的应用。 可能有的朋友会问,那么对于以前的老版本浏览器,使用最新的HTML5标签,无法正常识别吧? 没错,今天我们这里将介绍一个HTML5的音频和视频播放器类库 -
MediaElement.js,通过使用这个类库,我们可以方便添加对于老版本浏览器的支持,而无须担心使用最新HTML5的兼容性问题,希望大家喜欢!
什么是MediaElement.js?
MediaElement是一个HTML音频和视频解决方案,你可以:
- 使用HTML5的视频和音频标签及其CSS生成播放器
- 对于老的浏览器,使用自定义的Flash和Silverlight播放器来模拟HTML5
- 支持众多应用的插件,jQuery,Wordpress,Drupel,Joomla等等
如何工作?
添加脚本:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/mediaelement-and-player.js"></script>
如果你使用MediaElement.js提供的CSS,你可以导入如下CSS:
<link rel="stylesheet" href="mediaelementplayer.css" />
javascript代码如下:
$('video').mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 480,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 270,
// if set, overrides <video width>
videoWidth: -1,
// if set, overrides <video height>
videoHeight: -1,
// width of audio player
audioWidth: 400,
// height of audio player
audioHeight: 30,
// initial volume when the player starts
startVolume: 0.8,
// useful for <audio> player loops
loop: false,
// enables Flash and Silverlight to resize to content size
enableAutosize: true,
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
// force iPad's native controls
iPadUseNativeControls: false,
// force iPhone's native controls
iPhoneUseNativeControls: false,
// force Android's native controls
AndroidUseNativeControls: false,
// forces the hour marker (##:00:00)
alwaysShowHours: false,
// show framecount in timecode (##:00:00:00)
showTimecodeFrameCount: false,
// used when showTimecodeFrameCount is set to true
framesPerSecond: 25,
// turns keyboard support on and off for this instance
enableKeyboard: true,
// when this player starts, it will pause other players
pauseOtherPlayers: true,
// array of keyboard commands
keyActions: []
});
你可以在不同版本或者类型浏览器下观看效果,基本都可以正常工作。注意不同浏览器支持的视频格式可能不同,所以你最好提供不同的格式的视频源。
这里我们使用自己CSS来开发个性化的播放器。
创建个性化的音频/视频播放器
CSS代码
因为缺省mediaelement带有CSS定义文件,如果你对它的UI不是很满意的话,你可以自己定义对应的CSS:
div.audio-player {
position: relative;
width: 400px;
height: 120px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 0px 0px 25px #404040;
}
以上定义播放器。
/* Buttons */
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;
}
/* Play & Pause */
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 21px;
height: 21px;
top: 35px;
left: 135px;
background: transparent url(../img/play-pause.png) 0 0;
}
.mejs-controls .mejs-pause button { background-position:0 -21px; }
/* Mute & Unmute */
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
width: 14px;
height: 12px;
top: 70px;
left: 140px;
background: transparent url(../img/mute-unmute.png) 0 0;
}
.mejs-controls .mejs-unmute button { background-position: 0 -12px; }
/* Volume Slider */
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 71px;
left: 165px;
cursor: pointer;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 200px;
height: 8px;
background: #212227;
-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 6px;
top: 1px;
left: 1px;
background: url(../img/volume-bar.png) repeat-x;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* Progress Slider */
.mejs-controls div.mejs-time-rail { width: 400px; }
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 400px;
height: 5px;
left: 0;
bottom: 0;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }
.mejs-controls .mejs-time-rail .mejs-time-loaded {
width: 0;
background: #cccccc;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
background: #2B99E6;
}
定义播放器的播放/暂停按钮,声音大小按钮。
/* Progress Slider */
.mejs-controls div.mejs-time-rail { width: 400px; }
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 400px;
height: 5px;
left: 0;
bottom: 0;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }
.mejs-controls .mejs-time-rail .mejs-time-loaded {
width: 0;
background: #cccccc;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
background: #2B99E6;
}
以上定义了进度条相关CSS。其它代码请参考演示。
Javascript代码
$(function() {
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress'],
audioVolume: 'horizontal',
startVolume: 0.8,
loop: true,
audioWidth: 400,
audioHeight: 120
});
});
HTML代码
<section id="container">
<div class="audio-player">
<h2>Rolling in the deep</h2>
<img class="cover" src="img/gbin1.png" alt="gbin1.com">
<audio id="audio-player" src="media/rollinginthedeep.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</section>
这里我们定义了一个音频MP3播放器,javascript很简单,具体选项请参考API说明。
另外你可以使用以上类似方法定义一个视频播放器的CSS,具体请参考文章的代码下载。
希望大家喜欢这个超棒的HTML5播放器,如果你有问题,请给我们留言,谢谢!
相关推荐
前端项目-mediaelement,纯HTML和CSS格式的HTML5音频和视频播放器。mediaelementplayer.js对所有播放器使用相同的HTML/CSS。
MediaElementjs 一款极为方便的视频播放插件,支持HTML5格式的视频,也可以集成flv hls等插件 极为好用,附带实例
SN简易视频播放器源码 源码描述: 一、源码特点 一款视频播放器源码,视频控制:播放、暂停、停止、后退、快进、跳转、适合初学者 二、菜单功能 创建MediaElement媒体控件 MediaElement mediaElement = new ...
Yii2中介元素一个基于顶级MediaElement.js和jQuery的完整HTML / CSS音频/视频播放器。 对于Yii2。安装安装此扩展的首选方法是通过 。 无论运行 ...
SN简易视频播放器源码 源码描述: 一、源码特点 一款视频播放器源码,视频控制:播放、暂停、停止、后退、快进、跳转、适合初学者 二、菜单功能 创建MediaElement媒体控件 MediaElement mediaElement = new ...
情绪过滤器_html5embed ... //之后,您应该禁用一些默认的媒体嵌入设置 //站点管理->外观->媒体嵌入 //您需要取消选中 MP3、Flash 视频、HTML5 音频、HTML5 视频和 Quicktime,因为所有这些都将被采用由这个过滤器照顾
mediaelement播放m3u8视频,加载插件 <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { var mediaElements = document.querySelectorAll('video'), total = media...
主题开发人员使用 WordPress 媒体播放器 (mediaelement.js) 的基本样式表。 创建这个项目是因为在 WordPress 中覆盖媒体播放器的样式规则非常困难。 原因如下: WordPress 在页脚中加载一个样式表。 样式表具有...
现在已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js,它不仅能够添加我们...
音频元素.js 在 mediaElement.js 之上创建的具有高级功能的全宽响应式音频播放器文件要使用 Audio Element Js,请在您的标签中包含以下内容[removed][removed] [removed][removed] 然后初始化audioElement js ...
contao-abr-streaming 使用带有MPEG-DASH和HLS清单的Mediaelement.js的自适应比特率流Contao-Contao 4的扩展笔记使用此扩展时,必须在布局中包含js_medialement_dash模板。 您不应同时使用j_medialement和js_...
很好的 mediaElement 示例,简单易懂,功能强大
2.wpf音频视频播放器本视频播放器主要用到MediaElement控件(微软官网例子),它是wpf中提供的一个包含音频和视频的控件.3.wpf播放器扩展。可以点击http://www.cnblogs.com/YEKEYISHUO/p/3496642.html查看解析和运行...
媒体元素利用 mediaelement.js 播放器的小型 Bolt 扩展
MediaElement视频控件的基本用法,有开始、停止、暂停、音量、快进、快退、正常播放、和视频进度条样式 音量拖动样式,适合需要MediaElement控件播放视频的人群。
flv 简易demo 包含测试 flv格式视频
WPF 播放器 MediaElement
支持MP4,WebM和MP3以及HLS,Dash,YouTube,Facebook,SoundCloud以及其他具有通用的HTML5 MediaElement API的,可在所有浏览器中实现一致的UI。
设置在 SASS 构建中添加地图以覆盖任何默认设置 $mejs-settings : ( background : #333 , total-color : #444 , current-color : #AAA , loaded-color : #666 , volume-total-color : #444 , volume-current-...
wpf MediaElement 全屏播放视频.